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




Generator box shadow



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 TABKETERANGAN FUNGSI
TAB PERTAMAadalah hasil tampilan box-shadow, sedangkan untuk elemen kode CSS box-shadow, cukup COPY hasilnya pada box yang saya beri warna merah.
TAB KEDUAadalah 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).
insetmerupakan model shadow, silahkan centang jika model yang Anda inginkan untuk memberi efek bayangan bagian dalam box.
TAB KETIGAadalah style (gaya) tampilan box shadow.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= CSS3 Input Generator Box Shadow
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

34 komentar

  1. dites--dites..,
    benar2 dihidangkan.., tinggal cara makannya.. hehehe.. sdh disuapin inih..

    BalasHapus
    Balasan
    1. cara makanya gmn mas al ? hehe :D

      Hapus
    2. aah itulah Mas Fi..!, baru efek shadownya sj karna sdh ada toolnya..

      tinggal.. efek kurva.. blom berhasil.. padahal penempatan kode sdh ditempatkan seperti di title..

      padahal seperti yg pernh devy bilang.. semua kode html itu sama..paduan2 kode nya.. kode pemanggil supaya efek bisa diterapkan.. blom bisa..

      ini anag (devy) makan apa ya..? ato gegara es doger ya?. bisa paham kode2 begini..

      eeii Mas Fi... kembaran kemarin kemana ya?,

      Hapus
    3. biar pekerjaan mas Al lebih mudah dan praktis, jadi tinggal mengatur nilai sumbu offset pada tool generator ini, mas bisa dapatkan efek bayangan mau model seperti apa.

      kalau tentang makan, Devy bisa karena sering dikasih es doger sama mas Fiu, mas Al cobain dech, pasti nanti mas Al bisa buat efek kurvanya.hehe..

      Hapus
    4. hehehe, es doger nya mantap kn ? hehehe

      Hapus
  2. tutorial blog memang hebat ya mesti banyak belajar saya bang karena orang baru di blog

    BalasHapus
    Balasan
    1. tuh kan mas Al dan mas Fiu, masih saja ada yang panggil Devt dengan mas dan ini dengan bang, hiks..hiks...!!
      padahal sudah Devy tampilkan foto Devy, sedih hatiku..!!

      Hapus
    2. buahahahahahhahaha..........!

      Hapus
    3. gimana kalau besok Devy ganti fotonya dengan foto mas Al, boleh gak..?
      hehe..!!

      Hapus
    4. terserah..
      tp masalah kurva1nya blom bisa2 inih..
      sumbu2nya bagaimana..? sdh ditarikke kiri..
      ampun.. bisa rontok bulu ketek inih..eit..maap

      Hapus
    5. hahahahaha, maklum devy ... keknya yg bgtu tuh bacanya cuma sekilas aja ,,, ato mngkin bacanya kilat ... hehe

      padahl kn foto devy yg cakep ntu dh terpambang jelas dan menggelegar ,,,,

      Hapus
    6. To: Mas Al

      shadownya kok ditarik-tarik mas,ntar ketarik beneran jadi kagak kelihatan lagi, hehe..!! sebenarnya tinggal penempatan CSS ::after dan ::before pada elemen class pada header, agar lebih memudahkan mas Al dalam meng-edit, devy akan tampilkan cara edit kodenya disini:

      Demo Editing Frame Jsfiddle

      Hapus
    7. bisa saja cuma mampir kekolom komentar ya mas Fiu, sedih hatiku dipanggil begitu, padahal setiap saat ini kumis selalu dicukur, biar gak terlihat seperti cowok gitu..?
      hehe..

      Hapus
    8. eemmm...wangiiiiiii.. pantes sj dari tadi ditungguin..

      astagfirullaah Vy..!, demo editing apalagi inih..
      lebih baik daki gunung... dari pada trsiksa begini..
      tp makasi ya.. sy pake dulu

      Hapus
    9. biar lebih mudah mendapatkan tampilannya mas Al, disana sudah terdapat TAB CSS, TAB HTML, TAB JavaScript dan Result (Hasil Tampilan), mas Al bisa edit kode yang ada didalamnya, setelah mendapat tampilan yang sesuai setelah edit kode, mas KLIK tombol update untuk melihat hasilnya, jika sudah OK, tinggal diCopy dech kodenya.

      begitu maksud Devy mas Al.

      Hapus
    10. suwer Vy .. dari subuh.. sy di sini blom bisa2,.
      hehhee.. begini.. pertanyaan sy ulang dari awal... samplenya langsung pake kode html blog sy Ok..Beb..?.. hehehe,

      Hapus
    11. nah tuh dari kemarin kagak di dikirim samplenya,
      GPL (gak pakai lama) ya..!! hehe..!!

      Hapus
    12. Beeeeh .... tumbuh kumis jg tho devy ...hehehe

      Hapus
    13. tetapi setiap 2hari sekali dicukur kok mas Fiu, mungkin lupa, jadi dipanggil bang dech, hehe..!!

      Hapus
    14. Wehhh ... subur donk kumisnya devy ..mhehehe
      Kek artis iis dahlia donk ...hejhe

      Hapus
    15. malah keliatan macho mbak :-)

      Hapus
  3. PERKONGSIAN YG SGT BAGUS..BOLEH DICUBA NI...

    BalasHapus
  4. PERKONGSIAN YG SGT BAGUS..BOLEH DICUBA NI...

    BalasHapus
  5. wuih....tutorialnya sangat bermanfaat sekali nih.....karena berjasa...Insya Allah masuk surga....aamiin...

    BalasHapus
    Balasan
    1. yang masuk surga tutorialnya atau mas Aldino dan mas Fiu neh, hehe..!!

      Hapus
    2. Smuanya masuk surga ...aamiin ...

      Hapus
    3. kalau masalah doa yang bagus ane ikut juga mengmainkan....amin yaa Robbal alamain.

      Hapus
    4. ikutan juga dech..
      Amin..!!

      Hapus
  6. wah keren..... ini blogger cewek pinter banget (h)

    BalasHapus
  7. keren banget nih mbak Devi :D, ajarin saya donk mbak hehhe

    BalasHapus
  8. terus terang ya dev kalau udah pusing kadang ngasih harga ma kode shadow aja saya sering salah...makanya kadang kalau bikin suatu widget atau tampilan lainnya....lama jadinya...
    padahal kata kawan saya itu hal sederhana, tapi mau bagaimana ya dev kalau udah pusing saya tinggal dulu and lanjut latihan musik....dua hobi yang sebenarnya gak nyambung ya heheeee...makanya sering menggunakan generator ujung-ujungnya....dan penjelasan ini mudah diterapkan...sederhana tapi efektif sista...ok makasih penjelasannya.

    BalasHapus
    Balasan
    1. seperti mbah dinan yang dengan suka rela berbagi segala ilmu tentang tutorial, jadi Devy hanya memudahkan pekerjaan semua sahabat pecinta SAHABAT BLOGGER 77 untuk membuat efek bayangan box dengan membuat alat generator ini secara otomatis.

      mau model seperti apa biar mereka bisa bebas menentukan, dan tinggal COPY kodenya, kan lebih praktis, begitu mbah, ya semoga saja bermanfaat jika berkunjung kesini, hehe..!!

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK