Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

multiple 3D text shadow using css

Tags:

css

I want to give shadow effect to some of my texts in a website which would make it look like 3D using CSS Is it possible?

like image 670
Kumod Avatar asked Jul 21 '10 07:07

Kumod


People also ask

How do you add multiple text shadows in CSS?

CSS Syntax Note: To add more than one shadow to the text, add a comma-separated list of shadows.

Can you have multiple box shadows?

You can comma separate box-shadow any many times as you like.

Can you have multiple colors on a text shadow?

By using a comma, we can specify multiple text shadows. Here we have created the first text shadow with the same color as th background to give a semi-3D effect.


2 Answers

Yeah, it's possible to have multiple text-shadows on a font, just use a comma-separated list of values:

p {
    text-shadow: 0.1em 0.1em 0.2em #ccc, 0.2em 0.2em 0.3 em #ddd /* ...other...*/
}
like image 109
David Thomas Avatar answered Oct 22 '22 00:10

David Thomas


Use this

http://jsfiddle.net/RobertKolatzek/uk2my/1/

and try to understand, how it works (colors, sizes, etc).

At bottom, you get your text-shadow property to copy and paste.

In a simple case, you use text-shadow to render 3D, then the shadow of it:

text-shadow: 0px 4px 0 #ccc, 0px 6px 0 #888;
like image 27
user1065951 Avatar answered Oct 22 '22 02:10

user1065951