Making 3D text with CSS3

In previous recipes, we created a drop shadow, bevel, and an inner shadow, using the canvas element. With CSS3, we can do this to make your text really stand out. Using the CSS3 text-shadow property, we can make your text look as if it is jutting out of the screen towards your viewer.

Getting ready

If you would like to skip ahead, you can get the code online at Packt Publishing's website. Otherwise, if you are the learning-by-doing type, let's make our 3D text. We create the 3D effect by using a combination of CSS3 shadow effects.

How to do it…

In your IDE, create a new HTML document with only a header in the body. Add a style section to the head tag and assign the header the property, color:#f0f0f0;, as shown in the following ...

Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.