<!-- nothing -->
$bgcolor: #FFEFC3;
$transparent: rgba(255, 255, 255, 0);
$color-1: transparentize(#FFEFC3, .6);
$color-2: transparentize(#E8DE67, .6);
$color-3: transparentize(#C0CCAB, .5);
$color-4: transparentize(#E57152, .8);
$size: 7em;
$big-size: $size*2;
HTML {
height: 100%;
}
BODY {
background:
linear-gradient(90deg,
$transparent 93%,
$color-3 93%, $color-3 100%
),
linear-gradient(90deg,
$color-2 5%,
$transparent 5%, $transparent
),
linear-gradient(
$color-2 5%,
$transparent 5%, $transparent
),
linear-gradient(
$transparent 90%,
$color-4 90%, $color-4 100%
),
linear-gradient(
$transparent 35%,
$color-1 35%, $color-1 45%,
$transparent 45%, $transparent 55%,
$color-2 55%, $color-2 70%,
$transparent 70%
),
linear-gradient(90deg,
$transparent 35%,
$color-1 35%, $color-1 45%,
$transparent 45%, $transparent 55%,
$color-2 55%, $color-2 70%,
$transparent 70%
),
linear-gradient(
$transparent 55%,
$color-1 55%, $color-1 60%,
$transparent 60%
),
linear-gradient(90deg,
$transparent 55%,
$color-1 55%, $color-1 60%,
$transparent 60%
),
linear-gradient(
$transparent 20%,
$color-3 20%, $color-3 80%,
$transparent 80%
),
linear-gradient(90deg,
$transparent 20%,
$color-4 20%, $color-4 80%,
$transparent 80%
),
linear-gradient(
$transparent 10%,
$color-2 10%, $color-2 35%,
$transparent 35%
),
linear-gradient(90deg,
$transparent 10%,
$color-2 10%, $color-2 35%,
$transparent 35%
);
background-size: $big-size $big-size;
background-color: $bgcolor;
font: 10px/2 'Trebuchet MS', Verdana, sans-serif;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.