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;
good creation \m/
ReplyDeleteThank you....
DeleteThanks ilmunya sob, ini cucok untuk para Blogaziner :D
ReplyDeleteMampir yaa :D
ok gan! n makasih!
Deletemakasih ilmunya :D
ReplyDeleteyo sama-sama....
Delete