| [CSS Tutorial] How To Create 3D Text; Vector Series: http://s4.zetaboards.com/vector/topic/8619074/1/#new | |
|---|---|
| Tweet Topic Started: Thursday, 24. November 2011, 11:37 (537 Views) | |
| Andrew | Thursday, 24. November 2011, 11:37 Post #1 |
![]()
ぼくたちがすべてはばか。
|
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.
Now we're gonna take the CSS step by step as it may get complicated.
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.
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.
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 | Thursday, 1. December 2011, 04:46 Post #2 |
![]()
BAMMMMM!
|
Outline Documentations G E N E R A L Documentation accepted in to the General database |
![]() 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 » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi








^




8:15 PM Jul 10


Outline Live