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.