CSS coffee table book effect

css-coffee-table-book-effect.markdown

CSS coffee table book effect

Add a containing div to turn an image into coffee table book.

A Pen by Saijo George on CodePen.

License.

index.html

<div class="container">

  <img src="https://assets.codepen.io/1025350/schitts-creek2.png" alt="the cast of Schitt’s Creek" />

  <div class="book">
    <img src="https://assets.codepen.io/1025350/schitts-creek2.png" alt="the cast of Schitt’s Creek" />
  </div>

  <img src="https://assets.codepen.io/1025350/pose.png" alt="Elektra Wintour from Pose" />
  
  <div class="book">
    <img src="https://assets.codepen.io/1025350/pose.png" alt="Elektra Wintour from Pose" />
  </div>

  <img src="https://assets.codepen.io/1025350/janet.jpg" alt="Janet from The Good Place" />
  
  <div class="book">
    <img src="https://assets.codepen.io/1025350/janet.jpg" alt="Janet from The Good Place" />
  </div>
</div>

script.js

// @lynnandtonic
// a.singlediv.com

style.stylus

// shadows are kind of weird in Safari ¯\_(ツ)_/¯

.book
  width: 18.5em
  height: (@width * 1.2486)
  margin-top: -4.4em
  position: relative
  transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg)
  box-shadow: -1.4em 1.7em .3em -.3em alpha(black,.8),
              -1.6em 1.8em .9em -.2em alpha(black,.5),
              .3em 1.9em 1.3em alpha(black,.3)
  border-top-right-radius: .4em
  img
    border-top-right-radius: .4em
    box-sizing: border-box
    width: 100%
    clip: rect(0em,18.5em,23.1em,0em)
    display: block
    position: absolute
    filter: saturate(90%)
  &:before,
  &:after
    content: ''
    position: absolute
    top: 0
  &:before
    width: 105%
    height: 105%                        
    left: -5%
    z-index: -1
    background-repeat: no-repeat
    background-image: linear-gradient(115deg, transparent 2.8%,
                                              #3f3f3f 3%, #3f3f3f 16%,
                                              transparent 16%),
                      linear-gradient(125deg, transparent 10%, #3f3f3f 10%,
                                              #3f3f3f 17%, #222 46.8%,
                                              transparent 47%),
                      linear-gradient(125deg, transparent 46%,
                                              alpha(black,.5) 46.5%,
                                              alpha(black,.25) 49%,
                                              transparent 53%),
                      linear-gradient(to right, #444, #666),
                      linear-gradient(#444, #444),
                      linear-gradient(140deg, transparent 45%,
                                              #eee 45%, #ccc 96.8%,
                                              alpha(#aaa,0) 97%) 
    background-size: 100% 100%,
                     100% 100%,
                     100% 100%,
                     100% .4em,
                     94% .2em,
                     100% 100%
    background-position: 0 0,
                         0 0,
                         0 0,
                         0 95.8%,
                         0 100%,
                         0 0
  &:after
    width: 100%
    height: 100%
    background-repeat: no-repeat
    background-image: linear-gradient(to right, transparent 2%,
                                                alpha(black,.1) 3%,
                                                alpha(black,.1) 4%,
                                                transparent 5%),
                      linear-gradient(-50deg, alpha(black,.1) 20%, transparent 100%),
                      linear-gradient(-50deg, alpha(black,.2) 20%, transparent 100%),
                      linear-gradient(to bottom, alpha(black,.1) 20%, transparent 100%),
                      linear-gradient(to bottom, alpha(black,.1) 20%, transparent 100%)
    background-size: 100% 100%,
                     2% 20%,
                     1% 20%,
                     2% 20%,
                     1% 20%
    background-position: 0 0,
                         2.2% 100%,
                         3% 100%,
                         2.2% 0,
                         3% 0

body
  background-color: darkseagreen
  font-size: 15px
  z-index: 1
  padding: 60px 20px
  
.container
  width: 700px
  display: grid
  grid-template-columns: 1fr 1fr
  align-items: center
  justify-items: center
  gap: 70px 50px
  margin: 0 auto

  > img
    width: 220px