Home How To Create 3D Text using CSS3

How To Create 3D Text using CSS3

I am very happy to see, CSS3 finally eliminates the use of Photoshop in terms of giving text shadows. I was just trying my hands on text shadows in CSS3 and thought of creating 3D text by giving multiple shadows and got something wonderful.
Earlier Text Shadows were announced since the beginning of CSS2 however, the only browser that was supporting this functionality was Safari.
If you talk about today’s condition, almost all the browsers except Internet Explorer are running Text Shadows successfully.
I agree that we would not be able to use these shadows for clients for next few years because of cross browser compatibility however these features can help you push the boundaries of modern Web Technology today.
We do have certain jQuery plug-ins available like IE CSS Shadow that can create shadowed text completely compatible with Internet Explorer.
Let’s learn how we create 3D text using CSS3. I am giving text shadow to Heading and Paragraph tags.
HTML code written below will land up in between the body tag.

1 <div id="wrapper">
2  <h1>CSSReX</h1>
3  <p>This works well with major Browsers like FireFox, Opera, Safari and Chrome however does not work with Internet Explorer!</p>
4 </div>

Here we have the CSS for giving heading and paragraph multiple shadows to give 3D effect.

01 #wrapper h1{
02  font:normal 60pt Arial;
03  color:#FFFFFF;
04  text-shadow: 0 1px 0 #ccc,
05  0 2px 0 #c9c9c9,
06  0 3px 0 #bbb,
07  0 4px 0 #b9b9b9,
08  0 5px 0 #aaa,
09  0 6px 1px rgba(0,0,0,.1),
10  0 0 5px rgba(0,0,0,.1),
11  0 1px 3px rgba(0,0,0,.3),
12  0 3px 5px rgba(0,0,0,.2),
13  0 5px 10px rgba(0,0,0,.25),
14  0 10px 10px rgba(0,0,0,.2),
15  0 20px 20px rgba(0,0,0,.15);
16 }
18 #wrapper p{
19  font:normal 40pt Arial;
20  color:#FFFFFF;
21  text-shadow: 0 1px 0 #ccc,
22  0 2px 0 #c9c9c9,
23  0 3px 0 #bbb,
24  0 4px 0 #b9b9b9,
25  0 5px 0 #aaa,
26  0 6px 1px rgba(0,0,0,.1),
27  0 0 5px rgba(0,0,0,.1),
28  0 1px 3px rgba(0,0,0,.3),
29  0 3px 5px rgba(0,0,0,.2),
30  0 5px 10px rgba(0,0,0,.25),
31  0 10px 10px rgba(0,0,0,.2),
32  0 20px 20px rgba(0,0,0,.15);
33 }

Source Cssrex

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.