Renders best in Chrome.
This technique does work in Firefox, but text stroke is not supported.
A Pen by Wayne Lippold on CodePen.
Renders best in Chrome.
This technique does work in Firefox, but text stroke is not supported.
A Pen by Wayne Lippold on CodePen.
<div class="stage"> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
<div class="layer"></div> | |
</div> |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
// google font subsetting, see Heydon Pickering's: http://www.sitepoint.com/joy-of-subsets-web-fonts/ | |
@import url('//fonts.googleapis.com/css?family=Pacifico&text=Wayne'); | |
@import url('//fonts.googleapis.com/css?family=Roboto:700&text=Lippold'); | |
@import url('//fonts.googleapis.com/css?family=Kaushan+Script&text=!'); | |
body { | |
min-height: 450px; | |
height: 100vh; | |
margin: 0; | |
background: radial-gradient(circle, darken(dodgerblue, 10%), #1f4f96, #1b2949, #000); | |
} | |
.stage { | |
height: 300px; | |
width: 500px; | |
margin: auto; | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
perspective: 9999px; | |
transform-style: preserve-3d; | |
} | |
.layer { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
transform-style: preserve-3d; | |
animation: ಠ_ಠ5s infinite alternate ease-in-out -7.5s; | |
animation-fill-mode: forwards; | |
transform: rotateY(40deg) rotateX(33deg) translateZ(0); | |
} | |
.layer:after { | |
font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif; | |
content: 'Wayne\A Lippold!'; | |
white-space: pre; | |
text-align: center; | |
height: 100%; | |
width: 100%; | |
position: absolute; | |
top: 50px; | |
color: darken(#fff, 4%); | |
letter-spacing: -2px; | |
text-shadow: 4px 0 10px hsla(0, 0%, 0%, .13); | |
} | |
$i: 1; | |
$NUM_LAYERS: 20; | |
@for $i from 1 through $NUM_LAYERS { | |
.layer:nth-child(#{$i}):after{ | |
transform: translateZ(($i - 1) * -2px); | |
} | |
} | |
.layer:nth-child(n+#{round($NUM_LAYERS/2)}):after { | |
-webkit-text-stroke: 3px hsla(0, 0%, 0%, .25); | |
} | |
.layer:nth-child(n+#{round($NUM_LAYERS/2 + 1)}):after { | |
-webkit-text-stroke: 15px dodgerblue; | |
text-shadow: 6px 0 6px darken(dodgerblue,35%), | |
5px 5px 5px darken(dodgerblue,40%), | |
0 6px 6px darken(dodgerblue,35%); | |
} | |
.layer:nth-child(n+#{round($NUM_LAYERS/2 + 2)}):after { | |
-webkit-text-stroke: 15px darken(dodgerblue, 10%); | |
} | |
.layer:last-child:after { | |
-webkit-text-stroke: 17px hsla(0, 0%, 0%, .1); | |
} | |
.layer:first-child:after{ | |
color: #fff; | |
text-shadow: none; | |
} | |
@keyframes ಠ_ಠ{ | |
100% { transform: rotateY(-40deg) rotateX(-43deg); } | |
} | |