Cara menggunakan box-shadow css smooth

Pada kesempatan kali ini saya akan menjelaskan cara membuat box-shadow di css. Box-shadow adalah properti tempat membuat efek bayangan untuk kotak, teks, gambar, dll. Di setiap bayangan dapat ditentukan oleh satu hingga lima komponen, sebagai berikut

1. nilai offset horizontal [offset horizontal]
2. offset nilai secara vertikal [offset vertikal]
3. radius buram opsional [radius buram]
4. radius sebar opsional [radius sebar]
5. warna opsional [warna]

1

kotak - bayangan. [horizontal offset] [ vertikal offset] [blur radius] [menyebar radius ] [warna];

Drop shadow dapat digunakan sebagai peredam ke kiri atau ke kanan, dan ke atas atau ke bawah dari sisi elemen, dan drop shadow juga dapat dibuat di dalam elemen sebagai bayangan yang menciptakan ilusi kedalaman di dalam elemen, hal ini dapat dilakukan dengan menambahkan kata kunci inset pada delcaration. Untuk penulisannya seperti contoh pada gambar dibawah ini

1

kotak - bayangan. sisipkan [horizontal offset] [vertikal offset] [ blur radius] [menyebar radius] [warna] ;

Berikut adalah penjelasan dari sintaks di atas

Inset bersifat opsional dan dapat menentukan apakah drop shadow dibuat terlihat di belakang elemen atau di dalamnya. Jika Inset digunakan, itu dapat mengubah bayangan jatuh untuk bayangan luar dan bayangan dalam

Offset-x adalah nilai untuk memberikan offset bayangan horizontal dan menentukan jarak dimana bayangan digeser ke kiri atau ke kanan suatu elemen, nilai positif yang menentukan bayangan ke kanan, dan nilai negatif yang menentukan bayangan ke kiri

Offset-y adalah nilai untuk memberikan offset bayangan vertikal dan menentukan jarak dimana bayangan digeser ke bawah atau ke atas dari suatu elemen, nilai positif yang menentukan bayangan ke bawah, dan nilai negatif yang menentukan bayangan ke atas

blur-radius adalah nilai untuk memberikan efek bayangan samar dan opsional, jika diatur ke 0 bayangan akan tajam, semakin tinggi angkanya, semakin buram

spread-radius adalah nilai untuk memberikan efek bayangan dan bersifat opsional, nilai positif dapat memperbesar ukuran bayangan, dan nilai negatif dapat memperkecil ukuran bayangan

warna adalah nilai untuk menentukan warna setiap bayangan dan bersifat opsional

Untuk contoh penulisan lengkapnya seperti di bawah ini

1

kotak - bayangan. 20px 20px; /* nilai opsional dihilangkan */kotak - bayangan. 0px 0px 5px rgba( 0, 0, 0 , . 2); /* menciptakan efek kabur lembut di sekitar tepi elemen */kotak - bayangan. inset 0px 2px 1px putih ;kotak - bayangan. 0 0 0 9999px rgba (0, 0, 0, 0. 1); /* membuat efek hamparan semi-transparan di balik jendela modal. TIDAK DIREKOMENDASIKAN karena alasan kinerja yang disebutkan di atas */

Kotak

Apa itu Teks bayangan CSS?

Apa itu bayangan Teks?