CSS3 3D Text Hover Effects ( Source Code )

CSS3 3D Text Hover Effects ( Source Code )

HTML

<h2> John Doe</h2>

CSS


body{ margin: 0; padding: 0; background: #ddd; } h2{ text-align: center; font-size: 150px; color: #fff; font-family: arial; font-weight: bold; transition: .5s; text-transform: uppercase; margin-top: 5%; text-rendering: optimizeLegibility; } h2:hover{ text-shadow: -1px -1px 1px #333, 0px 1px 0 #333, 0px 2px 0 #333, 0px 3px 0 #333, 0px 4px 0 #333, 0px 5px 0 #333, 0px 6px 0 #333, 0px 7px 0 #333, 0px 8px 0 #333, 0px 9px 0 #333, 0px 10px 0 #333, 0px 11px 0 #333, 0px 12px 0 #333, 0px 13px 0 #333, 0px 14px 0 #333, 0px 15px 0 #333, 10px 25px 35px rgba(0, 0, 0, 0.9); }