<div></div>
// as seen on a.singlediv.com
// helpers
book-height(height)
linear-gradient(to bottom, #111 height, transparent height)
book-grey(start,end)
linear-gradient(to right, transparent start, #222 start,
#2e2e2e end, transparent end)
book-color(color,shade,start,end)
linear-gradient(to right, transparent start, color start,
darken(color,shade) end, transparent end)
// black and white books
div
width: 100vw
height: 100vh
min-height: 350px
margin: 0
position: relative
background-color: #111
background-image: linear-gradient(to top, #222 5%, #111 6%,
#111 7%, transparent 7%),
book-height(30%),
linear-gradient(to right, #222, #2e2e2e 5%, transparent 5%), // book 1
book-grey( 6%, 9%), // book 2
book-grey( 27%,34%), // book 6
book-grey( 51%,57%), // book 11
book-height(35%),
book-grey( 42%,44%), // book 8
book-grey( 45%,47%), // book 9
book-grey( 48%,50%), // book 10
book-grey( 87%,91%), // book 13
book-height(37.5%),
book-grey( 14%,20%), // book 4
book-height(40%),
book-grey( 10%,13%), // book 3
book-color(#222,3,21%,25%), // book 5
book-grey( 58%,64%), // book 12
book-grey( 92%,95%), // book 14
book-height(48%),
book-color(#222,3,96%,99%), // book 15
linear-gradient(to bottom, transparent 68.5%,
transparent 76%,
#111 76%,
#111 77.5%,
transparent 77.5%,
transparent 86%,
#111 86%,
#111 87.5%,
transparent 87.5%),
book-grey( 35%,41%), // book 7
book-height(68%),
linear-gradient(to right, transparent 78%,
#333 78%,
#333 80%,
transparent 80%,
transparent 82%,
#333 82%,
#333 83%,
transparent 83%),
book-grey( 66%,85%) // box
background-size: 300px 150px
background-position: center bottom
// colorful books
&:before
content: ''
width: 100%
height: 100%
position: absolute
left: 0
top: 0
background-color: #111
background-image: linear-gradient(to top, tan 5%, #111 6%,
#111 7%, transparent 7%),
book-height(30%),
linear-gradient(to right, firebrick, darken(firebrick,10) 5%, transparent 5%), // book 1
book-color(tomato,10,6%, 9%), // book 2
book-color(darkolivegreen,10,27%,34%), // book 6
book-color(salmon,10,51%,57%), // book 11
book-height(35%),
book-color(teal,10,42%,44%), // book 8
book-color(teal,10,45%,47%), // book 9
book-color(teal,10,48%,50%), // book 10
book-color(lightslategrey,17,87%,91%), // book 13
book-height(37.5%),
book-color(darkkhaki,15,14%,20%), // book 4
book-height(40%),
book-color(olive,10,10%,13%), // book 3
book-color(saddlebrown,10,21%,25%), // book 5
book-color(saddlebrown,10,58%,64%), // book 12
book-color(darkslategrey,10,92%,95%), // book 14
book-height(48%),
book-color(darkslategrey,10,96%,99%), // book 15
linear-gradient(to bottom, transparent 68.5%,
transparent 76%,
#111 76%,
#111 77.5%,
transparent 77.5%,
transparent 86%,
#111 86%,
#111 87.5%,
transparent 87.5%),
book-color(indianred,10,35%,41%), // book 7
book-height(68%),
linear-gradient(to right, transparent 78%,
rosybrown 78%,
rosybrown 80%,
transparent 80%,
transparent 82%,
rosybrown 82%,
rosybrown 83%,
transparent 83%),
book-color(brown,10,66%,85%) // box
background-size: 300px 150px
background-position: center bottom
clip-path: circle(150px at center center)
animation: flashlight 5000ms infinite
// eyes
&:after
content: ''
width: 25px
height: 10px
position: absolute
left: calc(50% + 59px)
bottom: 100px
background-repeat: no-repeat
background-image: radial-gradient(circle, white 50%, transparent 50%),
radial-gradient(circle, white 50%, transparent 50%)
background-size: 10px 10px
background-position: left center, right center
animation: eyes 5000ms infinite
@keyframes flashlight
0%, 9%
opacity: 0
clip-path: circle(150px at 45% 10%)
10%, 15%, 85%
opacity: 1
50%
clip-path: circle(150px at 60% 20%)
54%, 100%
clip-path: circle(150px at 55% 92%)
88%, 100%
opacity: 0
@keyframes eyes
0%, 52%
opacity: 0
53%, 87%
opacity: 1
64%
transform: scaleY(1)
67%
transform: scaleY(0)
70%
transform: scaleY(1)
88%, 100%
opacity: 0
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.