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.
 
How-Create-3D-Text-Using-CSS-Tizen
 
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 }
17
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 gambling and blockchain industries for major developments, new product and brand launches, game releases and other newsworthy events. Editors assign relevant stories to in-house staff writers 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 iGaming headlines of the day delivered to your inbox

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

    Gambling News

    Explore the latest in online gambling with our curated updates. We cut through the noise to deliver concise, relevant insights, keeping you informed about the ever-changing world of iGaming and its most important trends.

    In-Depth Strategy Guides

    Elevate your game with tailored strategies for sports betting, table games, slots, and poker. Learn how to maximize bonuses, refine your tactics, and boost your chances to beat the house.

    Unbiased Expert Reviews

    Honest and transparent reviews of sportsbooks, casinos and poker rooms crafted through industry expertise and in-depth analysis. Delve into intricacies, get the best bonus deals, and stay ahead with our trustworthy guides.