Maksimalkan Box-Shadow Untuk Sebuah Desain

Maksimalkan Box-Shadow Untuk Sebuah Desain Tampilan - Apa sih kelebihan sebuah Properti Box-Shadow dalam sebuah desain, box-shadow merupakan sebuah properti dalam CSS yang memegang kunci penting dalam sebuah bentuk desain yang sederhana dalam nilainya, tapi cukup memberikan hasil akhir yang cukup baik, tidak ubahnya dalam membuat sebuah Tombol ataupun sebuah Navigasi Menu, peroperti box-sahadow selalu diikut sertakan untuk menunjang hasil yang baik.

Dalam hal ini saya pribadi cukup menyukai jenis properti box-shadow ini, selain memberikan hasil akhir yang cukup memuaskan, properti box-shadow disupport oleh mayor browser (Firefox, Safari, Opera, Chrome, maupun Internet Explorer)

Bagaimana Membaca Nilai Sebuah Box-Shadow?

Sebuah contoh kasus dalam nilai sebuah properti box-shadow:

box-shadow: 1px 2px 3px 4px #123456 inset;

• 1px menunjukan nilai posisi bayangan (shadow) horizontal
• 2px menunjukan nilai posisi bayangan (shadow) vertikal
• 3px menujukan nilai jarak blur (optional)
• 4px menunjukan nilai ketebalan bayangan (optional)
• #123456 menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.
• Inset perubahan posisi bayangan (default mengarah keluar tanpa nilai inset) dengan penambahan nilai inset menjadikan shadow mengarah kedalam (optional)

Contoh Properti Box-Shadow

box-shadow:5px 5px 0px #000000;

box-shadow:-5px -5px 0px hsla(0, 0%, 0%, 1.0);

box-shadow:0px 0px 20px black;

box-shadow:0px 0px 20px #000000 inset;

box-shadow: 0px 20px 25px -20px #000000

box-shadow:inset 0px 2px 7px rgba(0, 0, 0, 0.5);

Dari contoh diatas merupakan contoh sederhana dari properti box-shadow, dengan melakukan percobaan dan latihan tentunya kalian bisa memberi hasil yang lebih baik daripada contoh diatas.

Selamat mencoba.