Engineering
CSS3: text-shadow
A practical look at the CSS3 text-shadow property and how to use it to add depth to web typography.
Updated 1 min read
By Yoosuf Mohamed, Systems
Architect
I recently had the opportunity to work on a gaming startup’s website, and they wanted a modern site packed with all the latest visual flourishes. I decided to lean heavily on CSS3 and jQuery interactions, and as part of that, I went searching for creative CSS3 text-shadow effects to make the site’s typography cleaner and more readable. Below are some of the experiments I came across, published as fiddles. Play around with them and share your own.
CSS3 LetterPress
Open the CSS3 LetterPress fiddle
CSS3: Cloud effect
Open the CSS3 Cloud effect fiddle
CSS3 Embossed
CSS3: City light
Open the CSS3 City light fiddle
CSS3: Flame effect
Open the CSS3 Flame effect fiddle
CSS3 Retro effect
Open the CSS3 Retro effect fiddle
CSS3 Puffed effect
Related reading
-
Implementing Wizards the Right Way
Building multi-step wizards: Duolingo's one-question onboarding, Stripe Connect's branching, and the anti-patterns that make users quit.
-
HTTP2 for front-end web developers
What front-end web developers need to know about HTTP/2 and the performance gains it brings.
-
Performance Checklist for the Mobile Web
A practical checklist for improving performance on the mobile web, from asset loading to rendering.