Rabu, 24 Oktober 2018

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Kali ini saya akan share cara membuat efek bayangan pada teks dengan CSS. Untuk membuat efek bayangan pada teks kita gunakan property text-shadow dan box-shadow. Lalu, apa perbedaan di antara keduanya?
Sesuai namanya, box-shadow digunakan untuk membuat efek bayangan pada kotak atau elemen kontainer. Sedangkan, text-shadow digunakan untuk memberi efek bayangan pada teks.

Nah, anda bisa lihat code di bawah ini.

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Di code tersebut saya membuat sebuah kotak dengan menggunakan tag div yang dibumbui CSS. Tidak ada bayangan? Tenang, gunakan property box-shadow untuk membuat bayangan di sekitar kotak.
Coba lihat code ini.

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Setelah saya tambahkan property box-shadow beserta value-nya, maka hasilnya akan menjadi seperti.

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Lalu, bagaimana caranya agar bayangannya berada di atas dan samping kiri kotak? Perhatikan code di bawah ini dan lihat hasilnya.

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS
Hasil

Sama halnya dengan box-shadow, text-shadow juga memiliki value-value yang sama.
Coba perhatikan code di bawah ini.

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Maka code tersebut akan menghasilkan.

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Seperti itulah cara membuat efek bayangan pada teks dan box menggunakan CSS.
box-shadow dan text-shadow sendiri memiliki 4 value, yaitu :

text-shadow: 5px 5px 10px red;

- Value pertama yang berwarna merah merupakan value untuk mengatur arah horizontal.
- Value kedua yang berwarna biru merupakan value untuk mengatur arah vertikal.
- Value ketiga yang berwarna hijau merupakan value untuk mengatur tingkat keburaman (blur) pada bayangan.
- Value keempat atau terakhir untuk mengatur warna bayangan.

Sepertinya itu yang dapat saya sampaikan kali ini. Semoga tutorial kali ini bermanfaat.

This Is The Newest Post


EmoticonEmoticon