Efek bayangan css merupakan properti css yang sering kita gunakan, namun pernahkah anda memahaminya dengan baik? Apakah Anda hanya perlu menyalinnya langsung dari Blue Lake saat menggunakannya? Efek indah apa yang bisa dicapai dengan menggunakan bayangan?
Efek bayangan sering digunakan dalam desain web. Efek bayangan dapat menyorot suatu elemen. Sebelum munculnya CSS3, jika kita ingin menambahkan efek bayangan ke teks atau elemen, kita perlu menggunakan gambar untuk mencapainya, yang mana sangat merepotkan. Setelah munculnya CSS3, kita dapat menambahkan efek bayangan pada teks atau elemen melalui dua properti text-shadow dan box-shadow, tanpa menggunakan gambar apapun.
1. bayangan teks
Menggunakan properti text-shadow dari CSS kita dapat mengatur efek bayangan untuk teks. Sintaks dari properti tersebut adalah sebagai berikut:
bayangan-teks:offset-xoffset-yblurcolor;
Sintaksnya dijelaskan sebagai berikut:
(1) offset-x: parameter yang diperlukan, mengatur offset horizontal bayangan, yang dapat berupa nilai negatif;
(2) offset-y: parameter yang diperlukan, mengatur offset vertikal bayangan, yang dapat berupa nilai negatif;
(3) blur: Parameter opsional, atur radius blur. Semakin besar nilainya, semakin besar blurnya, dan semakin kabur tepi bayangannya.
(4) warna: Parameter opsional, mengatur warna bayangan. Jika nilainya dihilangkan atau tidak ditentukan, nilai atribut warna akan digunakan.
Tip: Gunakan atribut text-shadow untuk mengatur beberapa grup efek bayangan secara bersamaan. Gunakan koma untuk memisahkan setiap grup. Grup efek bayangan yang ditentukan akan dicantumkan dalam urutan definisi, dengan bayangan pertama di atas, dan segera. Selain itu, jika Anda ingin menghilangkan efek bayangan pada teks, Anda dapat mengatur nilai atribut text-shadow menjadi none.
[Contoh] Gunakan atribut text-shadow untuk menambahkan efek bayangan pada teks:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>text-shadow</title></head><style>div :anak pertama{text-shadow:5px8px3pxred;}</style><body><div>Text-shadow</div></body></html>Hasil berjalan:
Analisis: bayangan teks: 5px 8px 3px merah; Deskripsi parameter
2.kotak-bayangan
Menggunakan properti box-shadow CSS kita dapat mengatur efek bayangan untuk elemen HTML.
box-shadow:h-shadowv-shadowblurspreadcolorinset;
Sintaksnya dijelaskan sebagai berikut:
(1) h-shadow: parameter yang diperlukan, mengatur offset pada arah horizontal bayangan, yang dapat berupa nilai negatif;
(2) v-shadow: parameter yang diperlukan, mengatur offset pada arah vertikal bayangan, yang dapat berupa nilai negatif;
(3) blur: Parameter opsional, atur radius blur. Semakin besar nilainya, semakin besar blurnya, dan semakin kabur tepi bayangannya.
(4) penyebaran: parameter opsional, mengatur ukuran bayangan;
(5) warna: parameter opsional, mengatur warna bayangan;
(6) inset: parameter opsional, mengubah bayangan luar default (awal) menjadi bayangan dalam.
Tip: Mirip dengan atribut text-shadow, atribut box-shadow juga dapat mengatur beberapa grup efek bayangan secara bersamaan. Gunakan koma untuk memisahkan setiap grup. Beberapa grup efek bayangan yang ditentukan akan dicantumkan dalam urutan definisi, dengan bayangan pertama di akhir.
[Contoh] Gunakan atribut box-shadow untuk menambahkan efek bayangan ke teks:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style>div :anak pertama{width:200px;height:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>Hasil berjalan:
Analisis: box-shadow: 5px 8px 3px 2px deskripsi parameter