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
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
Judul : Efek bayangan pada Text dengan CSS3
link : Efek bayangan pada Text dengan CSS3
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 :
Dimana:
9 Efek Bayangan Text/Tulisan dengan CSS3
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
hasilnya :p.myText { text-shadow:-2px -2px 2px #aaa; }
2. Shadow only
hasilnya :p.myText { color:#fff; text-shadow:0 0 5px #000; }
3. Blurred Shadow
hasilnya :p.myText { color:#fff; text-shadow:0 0 5px #000; }
4. No Blur Shadow
hasilnya :p.myText { text-shadow:2px 2px 0 #aaa; }
5. Multiple No Blur Shadows
hasilnya :p.myText { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; }
6. Far Away Shadow
hasilnya :p.myText { text-shadow:30px 10px 0 #aaa; }
7. Rainbow Shadow
hasilnya :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; }
8. Outline Shadow
hasilnya :p.myText { color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; }
9. See Through Shadow
hasilnya :p.myText { color:rgba(0,0,0,0.5); text-shadow:3px 3px 0 #aaa; }
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