A Pen by Riley Shaw.

index.slim

h2 ♠
h2 ♥
h2 ♣
h2 ♦

#vcent

Long-shadow-cards.markdown

Long shadow cards

Everybody's doing it! C'mon everybody, do the longshadow!

A Pen by Riley Shaw on CodePen.

License.

style.sass

@import "compass"
$cards: 'A' 'Q' '10' 'K'

=shadowfy($num, $c, $type: text)
  $s: scale-lightness($c, -20%)
  background-color: $c
  $shadow: 1px 1px #{$s}
  @for $i from 2px through $num*1px
    $shadow: append($shadow, $i $i $s, comma)
  @if $type == text
    text-shadow: $shadow 
  @else
    box-shadow: $shadow

html, body
  height: 100%
  text-align: center
    
body
  background-color: #2ecc71

#vcent, h2
  display: inline-block
  vertical-align: middle
  
#vcent
  height: 100%
  width: 0
  
h2
  overflow: hidden
  position: relative
  height: 120px
  width: 120px
  margin: 36px
  font: bold #{84px}/#{120px} sans-serif
  text-align: center
  color: #ecf0f1
  +border-radius(17.544%)
  +shadowfy(800, #2ecc71, box)
  
  &:nth-child(odd)    
    +shadowfy(50, #2c3e50)
  &:nth-child(even)
    +shadowfy(50, #e74c3c)
    
  &:before
    position: absolute
    bottom: -38px
    left: 16px
    font-size: 18px
    vertical-align: bottom
    
  @for $i from 1 through 4
    &:nth-child(#{$i}):before
      content: nth($cards, $i)