deZige

Maksimalkan Box-Shadow Untuk Sebuah Desain

cara membuat, menggunakan dan memaksimalkan tampilan box shadow dengan menambahkan efek blur dan nilai inset untuk sebuah desain yang lebih baik

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)

penggunaan box-shadow dan contoh

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.

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige