CSS3 Input Generator Box Shadow

CSS3 Input Generator Box Shadow - Box Shadow merupakan kegiatan untuk membuat atau memberi efek bayangan (shadow) pada box. Dalam penerapan Elemen Input CSS box-shadow terbagi lagi dalam beberapa deklerasi model, diantaranya sebagai berikut:

1. Radius Out Shadow
Elemen ini dibentuk untuk memberi efek bayangan pada sisi box bagian terluar, sehingga bayangan yang akan ditampilkan akan berada disisi luar objek, sedangkan jarak radius bayangan dengan box bisa Anda tentukan nilainya pada masing-masing sisi offset. Contoh seperti ini:

.box {
  width:200px;
  height:250px;
  margin:0 auto;
  border:solid 2px #39f;

  /* Nilai offset box-shadow */
  box-shadow:9px 10px 6px 2px #000000;
}

2. Radius Inset Shadow
Efek shadow dengan atribut inset adalah efek banyangan pada sisi box bagian terdalam, kegiatan seperti ini biasanya untuk memberikan tampilan box agar terlihat seakan cembung, karena bayangan yang dibentuk hanya bagian sisi offset terdalam pada objek. Contoh seperti ini:

.box {
  width:200px;
  height:250px;
  margin:0 auto;
  border:solid 2px #39f;

  /* Nilai offset box-shadow inset*/
  box-shadow: inset -1px 5px 80px 12px #000000
}

Hal yang terpenting untuk membuat atau memberi efek bayangan pada sebuah box adalah nilai dan letak sisi-sisi sumbu offset, sedangkan penambahan out-shadow dan inset-shadow itu hanya merupakan model deklerasi bentuk tampilan box. Penulisan nilai sumbu offset pada CSS Box Shadow umumnya seperti ini:

box-shadow: 5px 15px 20px 25px #000000

PENJELASAN
Nilai 5px pertama adalah offset X (Untuk Mengatur sisi efek shadow sebelah KANAN)
Nilai 15px kedua adalah offset Y (Untuk Mengatur sisi efek shadow sebelah BAWAH)
Nilai 20px ketiga adalah efek blur (Untuk Mengatur ketebalan WARNA bayangan)
Nilai 25px keempat adalah efek spread (Untuk Mengatur SEMUA sisi box)
#000000 adalah warna efek banyangan.

Pertemuan kali ini semua pekerjaan Anda akan saya permudah, jadi Anda tidak akan kebingungan lagi untuk menentukan besarnya efek bayangan (shadow) pada semua nilai sisi offset pada box dengan CSS3 Input Generator Box Shadow seperti ini:




COBA ALAT

BACA JUGA

Daftar Generator Penulisan Simbol HTML Terlengkap



Tampilan generator box shadow disana sudah saya siapkan 3 TAB yang bisa Anda gunakan untuk membuat efek bayangan pada box Anda. Penjelasan lebih lengkapnya seperti tabel berikut:

KETERANGAN TAB DAN FUNGSI KODE

STYLE TAB	KETERANGAN FUNGSI
TAB PERTAMA	adalah hasil tampilan box-shadow, sedangkan untuk elemen kode CSS box-shadow, cukup COPY hasilnya pada box yang saya beri warna merah.
TAB KEDUA	adalah untuk mengatur nilai sumbu pada box seperti Offset X, Offset Y, Blur dan Spread, Cukup KLIK tombol (+) untuk menambah angka dan (-) untuk mengurangi Angka.
Color (HEX)	Memberikan warna yang berbeda pada efek bayangan, Anda tinggal hapus kode 000000 lalu ganti dengan kode color-hex sesuai keinginan. Anda bisa pilih warna kesukaan Anda pada Tabel Kode Color Heksa Terlengkap (Ragam Warna).
inset	merupakan model shadow, silahkan centang jika model yang Anda inginkan untuk memberi efek bayangan bagian dalam box.
TAB KETIGA	adalah style (gaya) tampilan box shadow.