Tutorial Belajar CSS 3 Part 3 – Membuat Efek bayangan pada text dan box
Dalam tutorial ini kita akan membahas mengenai Effect Shadow dengan menggunakan CSS3, dalam CSS3 anda dapat menggunakan effect Shadow pada Text dan Box.
Jadi teman – teman dapat memberikan effect bayangan (Shadow) pada bagian text ataupun box dengan menggunakan fitur ini.
Membuat Effect Bayangan (Shadows) pada text dengan CSS 3
Property yang digunakan adalah text-shadow, ada beberapa value yang bisa anda gunakan antara lain :
text–shadow:jarak_kiri_kanan jarak_atas_bawah ketebalan_blur warna;
Untuk memperjelas dari penggunaan Text-shadow silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow:5px 3px 3px red; } </style> </head> <body> <h1>Contoh Text Shadow</h1> </body> </html> |
Keterangan :
- posisi bayangan 5px kearah kanan (value pertama)
- posisi bayangan 3px kearah bawah (value kedua)
- ketebalan blur 3px (value ketiga)
- warna bayangan adalah merah. (value keempat).
Membuat Multiple Shadows
Anda juga dapat membuat beberapa effect bayangan sekaligus.. dengan cara menuliskan beberapa value sekaligus, dan dipisah dengan tanda koma, contohnya seperti skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> h1 { text-shadow: 0 0 5px red, 0 0 10px blue; } </style> </head> <body> <h1>Contoh Multiple Color</h1> </body> </html> |
semisal kita simpan dengan nama multiple-shadow.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- Perhatikan text diatas memiliki 2 bayangan.
- Bayangan pertama berwarna merah karena kita memberikan value 0 0 5px red
- Bayangan kedua berwarna biru karena kita memberikan value 0 0 10px blue
- Anda bisa memisahkan beberapa value text-shadow dengan menggunakan tanda koma.
- Dalam contoh diatas saya bedakan ketebalan blur sehingga terlihat perbedaan warna antara bayangan pertama dan bayangan kedua.
Membuat Effect Bayangan (Shadows) pada box dengan CSS 3
Jika dalam bagian pertama kita sudah belajar mengenai bagaimana cara membuat bayangan pada text, dalam tutorial ini kita akan belajar membuat bayangan pada sebuah box.
Property yang digunakan adalah box-shadow, ada beberapa value yang bisa anda gunakan antara lain :
box–shadow:jarak_kiri_kanan jarak_atas_bawah ketebalan_blur warna;
Untuk contoh silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #bayangan { box-shadow:5px 5px 5px #ccc; width: 300px; height: 350px; } </style> </head> <body> <div id="bayangan"> <img src="Lighthouse.jpg" width="300px"> <h2 style="text-align: center;">Lighthouse</h2> </div> </body> </html> |
Keterangan :
- Dalam contoh diatas saya membuat sebuah kotak dengan ukuran lebar 300px dan didalamnya saya berikan sebuah gambar.
- Pada kotak tersebut terdapat sebuah bayangan dengan ukuran 5px kearah kanan,5px bawah, dan ketebalan blur 5px, dan memiliki warna #ccc yaitu warna abu – abu.
Support Browser
Untuk browser yang mensupport dari text-shadow dan box-shadow adalah :
| Property |  |
 |
 |
 |
 |
| Text-shadows | 4.0 | 10.0 | 3.5 | 9.5 | 4.0 |
| Box-Shadows | 10.0
4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
10.5 | 5.1
3.1 -webkit- |
Sumber : www.w3schools.com
silahkan disesuaikan dengan browser yang akan digunakan, bisa menambahkan vendor prefix. Jika anda belum memahami konsep vendor prefix silahkan baca terlebih dahulu pada tutorial css3 di part 1 mengenai vendor prefix.
Baik itu dulu kawan pembahasan mengenai text-shadow dan box-shadow didalam CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial CSS3 Selanjutnya.
Informasi ini sangat membantu