Efek bayangan pada Text dengan CSS3 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Efek bayangan pada Text dengan CSS3, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Belajar CSS, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Efek bayangan pada Text dengan CSS3
link : Efek bayangan pada Text dengan CSS3

Baca juga


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 :



Demikianlah Artikel Efek bayangan pada Text dengan CSS3

Sekianlah artikel Efek bayangan pada Text dengan CSS3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Efek bayangan pada Text dengan CSS3 dengan alamat link https://dev-create.blogspot.com/2013/12/efek-bayangan-pada-text-dengan-css3.html