<div class="shelf">
</div>
$T: transparent;
$b: #9D5B4B;
$db:#5D1E20;
$g: #82ba33;
$sg:#438a5e;
$dg:#333333;
$w: #fff;
$r: #ED4135;
$y: #F5AD00;
$o: #EE5C25;
$blue: #00A1A9;
$rb: #0177BE;
$v:#6438B2;
$shadow: rgba(0, 0, 0, 0.3);
$shine: rgba(255, 255, 255, 0.1);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: absolute;
}
*::before,
*::after {
position: absolute;
content: "";
}
body {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
.shelf {
top: 72vmin;
width: 83.2vmin;
height: 64vmin;
background:
linear-gradient($db 0.12vmin, $T 0.2vmin),
linear-gradient(75deg, $T 40%, $b 41% 68%, $T 66%) 5% 0vmin /12.8vmin 16vmin,
linear-gradient(-75deg, $T 40%, $b 41% 68%, $T 66%) 95% 0vmin /12.8vmin 16vmin,
linear-gradient(75deg, $T 50%, $db 51% ) 5% 0 /11.6vmin 16vmin,
linear-gradient(-75deg, $T 50%, $db 51% ) 95% 0 /11.6vmin 16vmin;
background-repeat:no-repeat;
box-shadow: 0 -6.4vmin 0 $b, 78.8vmin -24vmin 0 $w,
26.8vmin -38.4vmin 0 -26.4vmin $v,
27.6vmin -42.4vmin 0 -26.4vmin $blue,
27.6vmin -46.4vmin 0 -26.4vmin $g;
&:before{
z-index:-1;
height:32vmin;
width:8vmin;
left:4vmin;
bottom:70vmin;
background:$r;
box-shadow:
7.6vmin 0 $r,
12.4vmin 1.6vmin 0 -0.8vmin $g,
10.8vmin -1.2vmin 0 0.8vmin white,
16vmin -0.8vmin 0 0.8vmin $dg,
26.4vmin 0 0 1.6vmin $sg,
32vmin 0 0 $w,
28vmin 0 0 4vmin white,
33.6vmin 0 0 4vmin $v,
42.4vmin 1.6vmin 0 -1.6vmin $y;
}
&:after{
width: 80vmin;
bottom:70vmin;
height:36vmin;
background: linear-gradient(
to right,
$T 4vmin, $shine 6.4vmin 7.2vmin, $T 8vmin 13.6vmin, $shine 14.4vmin 15.2vmin, $T 15.6vmin 20vmin, $shine 20.4vmin 21.4vmin, $T 21.6vmin 24.4vmin, $shine 25.2vmin 25.6vmin, $T 26.4vmin 32vmin, $shine 32.8vmin 33.2vmin, $T 33.6vmin 40.8vmin, $shine 41.6vmin 42vmin, $T 42.4vmin 45.2vmin, $shine 46vmin 46.4vmin, $T 47.2vmin 49.2vmin, $shine 50vmin 50.8vmin, $T 51.2vmin),
linear-gradient($T 1.2vmin,$shine 2vmin 2.8vmin, $T 3.2vmin 5.2vmin, $shine 6vmin 6.8vmin, $T 7.6vmin 10.4vmin, $shine 11.2vmin 12vmin, $T 12.8vmin )53.2vmin 22vmin/25.6vmin 16vmin,
linear-gradient(to bottom, $T 6.8vmin, darken( $r, 25% ) 6.8vmin 9.6vmin, $T 8.4vmin 23.2vmin, darken( $r, 25% ) 23.2vmin 26vmin, $T 26vmin)4vmin 4vmin / 7.6vmin 36vmin,
linear-gradient(to bottom, $T 4vmin, darken( $r, 25% ) 4vmin 4.8vmin, $T 4.8vmin 5.6vmin, darken( $r, 25% ) 5.6vmin 6.4vmin, $T 6.6vmin 27.2vmin, darken( $r, 25% ) 27.2vmin 28vmin, $T 7vmin)11.6vmin 4vmin / 8vmin 36vmin,
linear-gradient(135deg,$T 8vmin, $db 8vmin 9.6vmin, $T 9.6vmin 11.2vmin, $db 11.2vmin 12.8vmin, $T 12.8vmin, 14.4vmin, $db 14.4vmin 16vmin, $T 4vmin)19.6vmin 6.4vmin / 4.2vmin 36vmin,
radial-gradient(circle at 0vmin 6vmin,$blue 10%, $T 11%)23.6vmin 2.4vmin / 5.64vmin 33.6vmin,
radial-gradient(circle at 5.2vmin 18vmin,$blue 24%, $T 25%)23.2vmin 2.4vmin / 5.6vmin 33.6vmin,
radial-gradient(circle at 0vmin 30vmin,$blue 10%, $T 11%)23.6vmin 2.4vmin / 5.6vmin 33.6vmin,
linear-gradient(to right, darken( $sg, 0.5% ) 10%, lighten( $sg, 6% ))31.6vmin 12vmin / 5.6vmin 8vmin,
linear-gradient(darken( $sg, 10% ), darken( $sg, 10% ))30vmin 9.6vmin / 8.8vmin 12.8vmin,
linear-gradient(to bottom,$T 4vmin, $b 4vmin 4.82vmin, $T 4.8vmin 28vmin, $b 28vmin 28.8vmin, $T 28.8vmin )40vmin 4vmin / 4vmin 36vmin,
linear-gradient(to bottom, $T 0.8vmin, lighten( $v, 20% ) 0.8vmin 4vmin, $T 4vmin 24vmin, lighten( $v, 20% ) 24vmin 27.2vmin, $T 6.8vmin)44vmin 4vmin / 5.6vmin 36vmin,
linear-gradient(to bottom, $T 1vmin,lighten( $y, 4% ) 3.2vmin 24.8vmin, $T 24.8vmin)50.8vmin 7.2vmin / 0.8vmin 28.8vmin,
linear-gradient(to right,$T 3.2vmin, lighten( $v, 20% ) 3.2vmin 5.6vmin,$T 5.6vmin 20vmin, lighten( $v, 20% ) 20vmin 22.4vmin, $T 5.6vmin)53.2vmin 30vmin/25.6vmin 8vmin,
linear-gradient($T 1.2vmin, $rb 1.2vmin 2.4vmin,$T 2.6vmin 5.2vmin, $y 5.2vmin 6.4vmin, $T 6.6vmin)58vmin 22vmin/16.8vmin 8vmin,
linear-gradient(to right,$shadow, $T 4.4vmin )11.6vmin 4vmin / 8vmin 36vmin,
/*linear-gradient(to right, $shadow, $T 1.2vmin)1vmin 1vmin / 2vmin 9vmin,*/
linear-gradient(to right,$shadow, $T 4.4vmin )19.6vmin 6.4vmin / 8vmin 36vmin,
linear-gradient(
to right, $shadow, $T 4.8vmin)4vmin 4vmin / 8vmin 36vmin,
linear-gradient(to right,$shadow, $T 4.4vmin )23.6vmin 2.4vmin / 8vmin 36vmin,
linear-gradient(to right,$shadow, $T 4.4vmin )28.8vmin 2.4vmin / 11.2vmin 36vmin,
linear-gradient(to right,$shadow, $T 4.4vmin )40vmin 4vmin / 11.2vmin 36vmin,
linear-gradient(to right,$shadow, $T 4.4vmin )44vmin 0vmin / 11.2vmin 36vmin,
linear-gradient(to right,$shadow, $T 4.2vmin )49.4vmin 7.2vmin / 11.2vmin 28.8vmin,
linear-gradient($T 3vmin, $shadow 4vmin, $T 4vmin 7vmin, $shadow 8vmin)54vmin 22vmin/24.8vmin 8vmin,
linear-gradient($T, $shadow 7vmin)53.2vmin 30vmin/24.8vmin 8vmin;
background-repeat: no-repeat;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.