You must enable Javascript in your browser to run or open this site.


do not know how?
  1. Click Here for Firefox user!

  2. Click Here for Google Chrome user!
CSS
Art
32a
Home About facebook google+ Twitter Follow 404 page
Post

CSS3 text shadow creation by Damar

Did you know CSS3 text effects?, did you know text shadow effect in CSS3?, you must know, because is very important for web design. Maybe you have already see the text shadow effects in Cyberqpale's Homepage, but i share the another effects and many-many more....., and All of this text shadow is original created by Damar Zaky. What is text shadow?, text shadow it's a text with Shadow :D, but text shadow not only with shadow, but with text shadow creativity, you can create text effect, and even like photoshop effect!. Like my creation below:
CSS3
3 Dimension

text-shadow: 0px 0px 0 rgb(-28,-28,-28),1px 1px 0 rgb(-57,-57,-57),2px 2px 0 rgb(-85,-85,-85),3px 3px 0 rgb(-113,-113,-113),4px 4px 0 rgb(-142,-142,-142),5px 5px 0 rgb(-170,-170,-170),6px 6px 0 rgb(-198,-198,-198),7px 7px 0 rgb(-227,-227,-227),8px 8px 0 rgb(-255,-255,-255), 9px 9px 0 rgb(-283,-283,-283),10px 10px 9px rgba(0,0,0,0),10px 10px 1px rgba(0,0,0,0.5),0px 0px 9px rgba(0,0,0,.2);

Brushed

text-shadow: 0px 2px 4px #000, 0px 4px 4px #000 /*1*/, 0px -2px 4px #000, 0px -4px 4px #000/*2*/, 2px 0px 4px #000, 4px 0px 4px #000/*3*/, -2px 0px 4px #000, -4px 0px 4px #000/*4*/, 2px 2px 4px #000, 4px 4px 4px #000/*11*/, -2px -2px 4px #000, -4px -4px 4px #000/*22*/, -2px 2px 4px #000, -4px 4px 4px #000/*33*/, 2px -2px 4px #000, 4px -4px 4px #000/*44*/; color: transparent;

Outlined

text-shadow: 0px 2px 2px #000, 0px 4px 2px #000 /*1*/, 0px -2px 2px #000, 0px -4px 2px #000/*2*/, 2px 0px 2px #000, 4px 0px 2px #000/*3*/, -2px 0px 2px #000, -4px 0px 2px #000/*4*/, 2px 2px 2px #000, 4px 4px 2px #000/*11*/, -2px -2px 2px #000, -4px -4px 2px #000/*22*/, -2px 2px 2px #000, -4px 4px 2px #000/*33*/, 2px -2px 2px #000, 4px -4px 2px #000/*44*/;

Double

text-shadow: 0px 40px 4px #000;

Blur

color: transparent; text-shadow: 0 0 10px #333;

Multipe Glow

text-shadow: 0 0 10px #fff, 3px 3px 10px #fff, -3px 3px 10px #fff, 3px -3px 10px #fff, -3px -3px 10px #fff, 10px 10px 30px #61cde8, 0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff, -10px 10px 30px #61cde8, 10px -10px 30px #61cde8, -10px -10px 30px #61cde8; color: black;

Convex

color: transparent; text-shadow: 5px 5px 5px #fff, 5px 5px 10px #333, 0 0 2px #000, -5px -5px 10px #333, -5px 5px 10px #333, 5px -5px 10px #333;

GLOW

color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #2e4585, 0 0 70px #2e4585, 0 0 80px #2e4585, 0 0 100px #2e4585, 0 0 150px #2e4585;

Multiple

text-shadow: 3px 3px 0 #52ffff,12px 12px 0 #ff383f, 22px 22px 0 #52ffff, 32px 32px 0 #ff383f;

Colorful

color: transparent; text-shadow: 5px 5px 10px #0044ff, -5px 5px 10px #ff1f1f, 5px -5px 10px #33ff1c, -5px -5px 10px #ffff00;

Color glow

color: #fff; text-shadow: 0px 0px 5px #fff, 5px 5px 10px #0044ff, -5px 5px 10px #ff1f1f, 5px -5px 10px #33ff1c, -5px -5px 10px #ffff00;

Rainbow

color: white; text-shadow: 1px 1px 1px #ff0000, 2px 2px 1px #ff0000, 3px 3px 1px #ff8800, 4px 4px 1px #fff700, 5px 5px 1px #fff700, 6px 6px 1px #22ff00, 7px 7px 1px #22ff00, 8px 8px 1px #00ffee, 9px 9px 1px #0011ff, 10px 10px 1px #0011ff;



6 COMMENTS

What do you think about this post?
Want send a feedback? or ask something?

you can tell something by commenting.....

Comment Rules
No Spam
Only about this post, no OOT
No live link, backlink, comment will deleted if do that

Welcome
To
Damar's
Blog
NEW!
Return
Reborn
Cyberqpale by Damar Zaky ©2012
Host