Multi
Multi
[CSS Tutorial] How To Create 3D Text; Vector Series: http://s4.zetaboards.com/vector/topic/8619074/1/#new
Topic Started: Thursday, 24. November 2011, 11:37 (537 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
How To Create 3D Text

Time: 10-20 Minutes
Difficulty: Medium
Demo: Here



Today I will be showing you how to create 3D text without any graphics, just good old CSS3. We will be taking advantage of the text shadow property in CSS3 order to achieve 3D text as you may have multiple text shadows.

Just write some plain HTML for text.
Code: HTML
 

<a href="http://s4.zetaboards.com/ZetaNetwork/">
<div id="txt">U Jelly?</div>
<div id="zN">Learn How To Make This At zetaNetwork 5/13/11</div>
</a>

Now we're gonna take the CSS step by step as it may get complicated.
Code: CSS
 
html, body {
background: #abdc28;
}

a {
text-decoration: none;
}

Since the text is a link we'll just remove that annoying underline and we'll set the page background to a green.

We'll start with the first block of text.
Code: CSS
 
#txt {
width: 750px;
font-size: 135px;
margin: 150px auto;
text-align: center;
font-family: Sans-Serif;
color: #fff;
text-shadow: 0px 0px 2px #686868,
0px 1px 1px #ddd,
0px 2px 1px #d6d6d6,
0px 3px 1px #ccc,
0px 4px 1px #c5c5c5,
0px 5px 1px #c1c1c1,
0px 6px 1px #bbb,
0px 7px 1px #777,
0px 8px 3px rgba(100, 100, 100, 0.4),
0px 9px 5px rgba(100, 100, 100, 0.1),
0px 10px 7px rgba(100, 100, 100, 0.15),
0px 11px 9px rgba(100, 100, 100, 0.2),
0px 12px 11px rgba(100, 100, 100, 0.25),
0px 13px 15px rgba(100, 100, 100, 0.3);
}

As you can see the first block of text will have a width of 700px and it is centered. The font family is Sans-Serif and the text color is white with a size of 135px.

Now for the text shadows. We'll give the text a 2px #686868 outline first, then we'll add another text shadow, seperated by a comma, that is #ddd and has a 1px down offset. We'll continue this gradually darkening the shadow while increasing the down offset until the text reaches your desired depth.

Now we'll add a couple more shadows to give it a drop shadow type effect. Using the RGBA property in CSS3 we'll set the RGB to 100 and the alpha to 0.4 for our first shadow. Then we'll start from an alpha of 0.1 and gradually increase it while at the same time increasing the down offset and increasing the blur.

We'll apply the same techniques to our second block of text like so.
Code: CSS
 
#zN {
width: 750px;
font-size: 40px;
margin: 75px auto;
text-align: center;
font-family: Sans-Serif;
color: #fff;
text-shadow: 0px 0px 2px #333,
0px 1px 1px #ddd,
0px 2px 1px #d6d6d6,
0px 3px 1px #ccc,
0px 4px 1px #c5c5c5,
0px 5px 3px rgba(100, 100, 100, 0.4),
0px 6px 5px rgba(100, 100, 100, 0.1),
0px 7px 7px rgba(100, 100, 100, 0.15);
}


And there you have it! 3D text without the use of any image hacks. If you have any questions or comments post them here.[/quote]

- - -
For the full article - http://s4.zetaboards.com/vector/topic/8619074/1/#new
Off
Profile
Quote
Top
 
Maddy
Member Avatar
BAMMMMM!
Outline Documentations
G E N E R A L

Documentation accepted in to the General database
Posted Image
This is a work in progress ^^

"You still talk about it? You still care about it."


Tumblr - WeHeartIt - My Things - Twitter

The List
Life
<3
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..