Membuat Box Shadow Pada CSS3 Bagian 2

Posted on

      Assalamualaikum wr Wb. Masih bersama saya admin dari blog lupacode ini hallo apa kabar sahabat lupacode semuanya yang selalu rajin belajar pemrograman bersama lupacode. Alhamdulilah pada pembahasan materi kemarin kita telah selesai membahas mengenai Property BoxShadow pada materi bagian pertama

Pada kesempatan kali ini saya ingin melanjutkan pembahasan materi berikutnya yang masih membahas mengenai box shadow ini, dimana pada materi box shadow yang pertama kita telah mencoba menggunkan property yang utama dari box shadow ini, seperti yang saya bahas pada materi bagian pertama bahwa ada value opsional didalam property box shadow ini

 
Belajar Box Shadow Pada CSS3 (Part 2)

 

Belajar Box Shadow Pada CSS3 (Part 2)

Nah sekarang kita akan pelajari bagaimana penggunaan dari box-shadow yang opsional yaitu <spread>

spread Box Shadow - web desain

 

     Jadi kalau nanti kita menulis untuk value nya 5px 5px 5px 5px maka angka yang ke empat itu untuk spread atau saya lebih suka anggap itu sebagai size yaitu untuk menentukan ukuran dari bayangannya

Baiklah sekarang kita akan coba langsung buka lagi syntax yang sudah kita buat kemarin seperti ini

 

Sekarang kita coba lihat dulu hasil dari syntax yang kemarin adalah seperti ini
Box Shadow part1 - web desain

Nah sekarang kita akan coba tambahkan satu lagi spread, yaitu ada di parameter ke empat sebelum warna. Misalkan kita kasih 5px seperti ini

box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.75);

sekarang kita lihat bayangannya akan bertambah menjadi 5px seperti ini

Box Shadow part2 - web desain

Supaya lebih jelas lagi mengenai spread saya kasih contoh seperti ini, misalkan saya kasih x-offsetnya 0 dan y-offsetnya juga 0 kemudian blur nya 0 lalu spread nya 5px seperti ini

box-shadow: 0 0 0 5px rgba(0,0,0,0.75);

maka seolah – olah kotak ini punya border, padahal ini bukan border. Ini adalah bayangan yang tidak ada blurnya kelihatannya solid seperti ini

Box Shadow part3 - web desain

     Ada satu hal keren mengenai penggunaan spread ini, dan tadi kenapa saya lebih suka menganggap ini size bukan spread itu karena begini, misalkan saya kasih x-offsetnya 0 dan y-offsetnya 30px lalu blurnya 10px kemudian untuk spreadnya saya kasih -20px seperti ini

box-shadow: 0 30px 10px -20px rgba(0,0,0,0.75);

maka sekarang kita lihat hasilnya

Box Shadow part4 - web desain

     Sekarang lihat bayangannya jadi seperti itu, sekarang-sekarang ini juga lagi trend nih bayangan-bayangan seperti itu, jadi ini silahkan gunakan kreatifitas kalian saja untuk memodifikasi

Saya tambahkan lagi seperti ini, misalkan kursornya jika saya arahkan kedalam elemen nya, maka elemennya akan bergerak seperti itu yah, saya tambahkan syntax nya jadi seperti ini

Sekarang kita lihat hasilnya akan menjadi seperti ini
Box Shadow part5 - web desain

     Coba sekarang kalian copy script diatas atau ikuti script diatas maka sekarang jika kita mengarahkan kursor ke elemen tersebut makan akan bergerak seperti itu keren bukan, itu saya tambahkan transition walaupun kita belum belajar transisi yah, nanti kalau kita sudah masuk kedalam materi transisi lebih menyenangkan lagi dan lebih keren lagi pastinya. Jadi silahkan kalian gunakan sendiri kreativitas kalian masing-masing untuk membuat bayangan seperti itu

Selanjutnya yang akan kita bahas adalah mengenai value <inset> yang bisa kasih ke Box-shadow dan ini opsional boleh ada boleh tidak, tapi begitu kita buat maka bayangannya akan berada didalam kotaknya bukan diluar kotaknya. Misalkan saya kasih contoh seperti ini, saya ubah dulu untuk box-shadow yang tadi telah kita buat menjadi seperti ini

box-shadow: 0 0 15px 5px rgba(0,0,0,0.5);

maka hasilnya akan menjadi seperti ini

Box Shadow part6 - web desain
Lalu sekarang kita tambahkan value inset seperti ini
box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.5);
sekarang kita lihat lagi hasilnya seperti ini
Box Shadow part7 - web desain

     Nah kalian bisa lihat maka bayangannya akan pindah ke dalam, semakin besar blurnya maka bayangannya akan semakin besar blur ke dalam seperti gambar diatas, dan itulah penggunaan dari inset

Oke baiklah sekarang yang terakhir kita akan membahas mengenai penggunaan MultipleShadow nah salah satu kelebihan dari Box-shadow ini adalah kita bisa memberikan lebih dari satu bayangan pada sebuah elemen. Contohnya adalah seperti ini, saya kembalikan lagi box-shadow yang diatas menjadi sebuah box shadow yang sederhana, dan saya ganti warna dari shadow nya seperti ini

box-shadow: 5px 5px 5px rgba(255,0,0,0.5);

Sekarang kita lihat dulu hasilnya adalah seperti gambar dibawah ini

Box Shadow part8 - web desain

     Nah kita bisa menambahkan bayangan yang baru dengan menambahkan di akhir bayangan ini koma, contohnya seperti ini

box-shadow: 5px 5px 5px rgba(255,0,0,0.5),

-5px -5px 5px rgba(0,0,255,0.5);

Sekarang kita lihat hasilnya adalah seperti ini

Box Shadow part9 - web desain
      Sekarang bayangannya ada dua, dengan ini kalian bisa menciptkan efek yang menarik. Kalau kalian sudah tau cara pakai multiplebox-shadow ini. Atau misalkan kaya gini, kalian bisa membuat sebuah kotak yang punya banyak border nya, jadi kita gunakan multiple box-shadow ini, contohnya seperti ini

Kita lihat hasilnya sekarang
Box Shadow part10 - web desain

      Kalian bisa lihat sekarang kita bisa ngasih multiple border, padahal ini bukan border ini adalah shadow yang ga punya blur. Atau kalian bisa kasih lagi untuk property Border radius nya kita tinggal tambahkan saja seperti ini misalnya border-radius: 50%;

Kita lihat lagi hasilnya sekarang seperti ini menjadi sebuah lingkaran sempurna

Box Shadow part11 - web desain

     Oke jadi bisa seperti itu yah, jadi tinggal bagaimana pinter – pinternya kalian untuk mengatur value dari box-shadow ini

Baiklah sampai disini dulu untuk pembahasan materi kali ini, mudah – mudahan kalian ga bingung. Tapi kalau bingung silahkan saja kalian tulis pertanyaan di kolom komentar. Kalau kalian merasa manfaat dari materi ini silahkan share kepada temen – temen yang lainnya supaya kita bareng – bareng saja belajar yah

Oke sampai berjumpa lagi pada materi lupacode yang selanjutnya jangan sampai ketinggalan untuk mendapatkan materi – materi terbaru dari web desain yah

Saya admin dari web lupacode undur diri, terimakasih

#Happy_Coding – Lupacode

Wassalamualaikum Wr Wb

Leave a Reply

Your email address will not be published. Required fields are marked *