Efek bayangan pada Text dengan CSS3

Setelah lama vakum, ebsof kali ini akan membahas bagaimana cara membuat efek bayangan pada tulisan dengan CSS3 atau dalam bahasa inggrisnya "CSS3 Text Shadow Effects" , heee.. . Langsung aja bagaimana Cara membuat efek shadow tulisan dengan CSS3 yaitu :

Sintaks untuk bayangan TEXT / Text Shadow adalah sbb :

text-shadow:xPosition yPosition blurSize color;

Dimana: 

• xPosition is the horizontal position of the text shadow relative to the text.
• yPosition is the vertical position of the text shadow relative to the text.
• blurSize is the size of the shadows blur.
• color is the color value – hex, rgb, rgba, hsl, hsla or named color.

9 Efek Bayangan Text/Tulisan dengan CSS3

1. Top left shadow

p.myText { text-shadow:-2px -2px 2px #aaa; }

hasilnya :

2. Shadow only

p.myText { color:#fff; text-shadow:0 0 5px #000; }

hasilnya :

3. Blurred Shadow

p.myText { color:#fff; text-shadow:0 0 5px #000; }

hasilnya :

4. No Blur Shadow

p.myText { text-shadow:2px 2px 0 #aaa; }

hasilnya :

5. Multiple No Blur Shadows

p.myText { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; }

hasilnya : 

6. Far Away Shadow

p.myText { text-shadow:30px 10px 0 #aaa; }

hasilnya :

7. Rainbow Shadow

p.myText { color:#000; text-shadow:1px 1px 0 red, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 green, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet; }

hasilnya :

8. Outline Shadow

p.myText { color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; }

 hasilnya :

9. See Through Shadow

p.myText { color:rgba(0,0,0,0.5); text-shadow:3px 3px 0 #aaa; }

hasilnya :