Everybody's doing it! C'mon everybody, do the longshadow!
A Pen by Riley Shaw on CodePen.
h2 ♠ | |
h2 ♥ | |
h2 ♣ | |
h2 ♦ | |
#vcent |
Everybody's doing it! C'mon everybody, do the longshadow!
A Pen by Riley Shaw on CodePen.
@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) |