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:
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:
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:
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
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:
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;
}
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
}
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.
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:
BACA JUGA
Daftar Generator Penulisan Simbol HTML TerlengkapTampilan 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:
| 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. |
Demikian artikel tentang CSS3 Input Generator Box Shadow ini dapat kami sampaikan, semoga artikel atau info tentang CSS3 Input Generator Box Shadow ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
