Saya akan memperlihatkan tampilan atau script yang lainnya dari CSS. Tampilan yang akan saya perlihatkan adalah CSS3 Box Shadow effects.
Box shadow adalah efek bayangan pada suatu area, dulu sebelum kita mengenal CSS3 maka efek bayangan ini dibuat menggunakan background gambar. Sejak kehadiran CSS3 maka efek box shadow dapat kita buat dengan mudah. Namun dukungan web browser untuk box shadow masih berbeda-beda sehingga diperlukan deklarasi properti yang berbeda agar dapat dijalankan dengan baik oleh setiap web browser.
Sumber : www.w3schools.com
1.Dalam penggunaannya sederhana, Anda hanya menentukan bayangan horizontal (2px) dan bayangan vertikal (2px):
Gambar 1.1 text shadow sederhana.
2.Berikutnya, menambahkan warna untuk bayangan:
Gambar 1.2 text-shadow sederhana.
3.Kemudian, menambahkan efek blur untuk bayangan:
Gambar 1.3 text-shadow sederhana
4.Contoh berikut menunjukkan teks biru muda dengan bayangan hitam:
gambar 1.4 text-shadow sederhana.
5.Contoh berikut menunjukkan neon cahaya bayangan pink:
gambar 1.5 text-shadow secderhana.
6.Contoh berikut menunjukkan neon cahaya bayangan merah dan biru:
Gambar 1.6 text-shadow sederhana.
Gambar 1.7 text-shadow sederhana.
8.CSS3 box-shadow Properti
Properti CSS3 box-shadow berlaku bayangan untuk elemen.Dalam penggunaannya sederhana, Anda hanya menentukan bayangan horizontal dan vertikal bayangan:
Berikutnya, menambahkan warna untuk bayangan:
Gambar 1.8 box-shadow properti
sekian dari saya tampilan dari CSS3 Box Shadow effects.
semoga kalian suka dan juga kalian bisa mencobanya .
Wassalamualaikum wr.wb
0 komentar:
Posting Komentar