/ Background Patterns

Jason Quote Background Pattern

Jason Quote Background Pattern

Jason Quote Background Pattern

A background pattern for a Quote widget.

Based on Lea Verou snippets.

Made with

Html
Css/scss

Author

George Olaru

Css

$color2: #80c9dd;
$color3: #d5eaf0;
$color1: #62bbd3;

body {
background-color: $color1;
background-image: linear-gradient(30deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
linear-gradient(150deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
linear-gradient(30deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
linear-gradient(150deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
linear-gradient(60deg, $color3 25%, transparent 25.5%, transparent 75%, $color3 75%, $color3), 
linear-gradient(60deg, $color3 25%, transparent 25.5%, transparent 75%, $color3 75%, $color3);
background-size:40px 70px;
background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}

$color2-1: #fff;

body1 {
  background-color:#62bbd3;
background-image:
radial-gradient($color2-1 9px, transparent 10px),        
repeating-radial-gradient($color2-1 0, $color2-1 4px, transparent 5px, transparent 20px, $color2-1 21px, $color2-1 25px, transparent 26px, transparent 50px);    
background-size: 30px 30px, 90px 90px; 
background-position: 0 0;
}

Demo

See the Pen Jason Quote Bg Pattern by George Olaru (@babbardel) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More