8
Cara membuat efek bayangan atau Box Shadow di blog
Setelah sebelumnya kita membahas jenis-jenis border dan cara membuatnya, maka diposting kali ini kita akan coba membahas cara membuat box-shadow atau efect bayangan. Jika teman-teman sering menggunakan image editor atau text editor seperti photoshop atau microsoft office, maka pasti teman-teman sudah tidak asing dengan istilah ini. Tapi disini kita tidak akan menggunakan image editor atau text editor. Tapi kita akan membahas cara pembuatannya dengan menggunakan CSS.

Untuk pembuatan box-shadow ini sendiri meski hanya memakai sedikit kode perintah, tapi kita bukan hanya bisa membuat satu bayangan saja, tetapi kita juga bisa membuat lebih dari satu bayangan ganda atau yang disebut bayangan ganda, bahkan lebih dari 2 bayangan pun bisa kita lakukan. Kodenya sangat sederhana, jadi sangat mudah untuk kita pahami. Kita hanya perlu mengatur koordinat jarak horizontal dan koordinat jarak vertikal serta menentukan warna yang akan kita pakai.

Jika dibuat rumus maka rumusnya kira-kira adalah seperti ini:

{box-shadow: (koordinat X) (koordinat Y) (radius blur) (warna);}
Keterangan:
Koordinat X =  Berfungsi untuk  menspesifikasikan jarak horizontal bayangan. Jika sebuah nilai berisi angka positif (misal: 10px) akan membuat bayangan di sebelah kanan kotak sebesar 10px, sedangkan bernilai negatif (misal: -10px) maka akan memberikan bayangan disebelah kiri.

Koordinat Y =  Berfungsi untuk menspesifikasikan jarak vertikal bayangan. Jika nilai berisi positif (misal: 10px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (misal:-10px) akan memberikan bayangan disebelah atas.

Radius Blur =  Berfungsi untuk  menspesifikasikan radius dari blur yang dihasilkan. Nilai default adalah 0, yang berarti tidak ada blur. Nilai positif berarti meningkatkan kabur, sedangkan nilai negatif berati menyusutkan bayangannya.

Warna         =  Berfungsi untuk  menspesifikasikan warna bayangan.

1. Efek bayangan Tunggal/Satu bayangan.
Contoh penulisan awal.
{box-shadow: 0 0 10px #red;} 

Cara penggunaan:
Sebagai contoh kita anggap kita sudah memiliki kode HTML seperti ini:
disini adalah konten
Dan kode CSSnya misal seperti ini.
#box-bayangan{
background: #ccc;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
} 
Hasil yang kita dapatkan dari kode CSS dan HTML tersebut hanya akan terlihat seperti dibawah ini.
Hasil sebelum penambahan kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari box-shadownya.
box-shadow: 0 0 10px red;
Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.
#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan--*/
}

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.

2. Cara pembuatan efek bayangan ganda atau lebih.
Untuk cara pembuatan bayangan efek ganda atau lebih ini, prinsipnya tetap sama dengan pembuatan efek satu bayangan. Kita hanya perlu memberikan sedikit tambahan saja. Coba kalian perhatikan perbedaan dua kode dibawah ini.

box-shadow: 0 0 10px red;

box-shadow: 0 0 10px red, 0 0 30px blue;

Pada kode kedua kita hanya menambahkan tanda koma(,) kemudian memberikan tambahan kode bayangan yang baru. Untuk pemberian kode kedua nilai/angka penentu harus lebih besar dari kode yang pertama dan warna yang berbeda pula.

#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan tunggal--*/
}
#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red, 0 0 30px blue; /*--code bayangan ganda--*/
}
Hasil yang akan kita dapatkan adalah seperti dibawah ini.


Hasil penambahan efek bayangan ganda dengan CSS


Hal ini juga berlaku jika kita ingin menambahkan lagi bayangan yang lebih banyak. Siapa tahu kalian suatu saat bisa membuat box-shadow dengan efek pelangi. Kalau saya cuma bisa membuat yang aneka warna aja seperti dibawah ini. Hehe..

Kotak 3D beraneka warna dengan CSS

Untuk posting berikutnya kita akan sedikit membahas tentang hal yang serupa yaitu cara membuat text-shadow dan text 3D

Teks shadow dan teks 3D dengan CSS

Poskan Komentar

  1. Wah,, nice info gan,..
    nambah lg ilmu ane berkat sahabat,..
    trma ksh sahabatku.. !!

    Happy Blogging..

    BalasHapus
  2. Hasilnya sdh jadi silahkan dilihat,, :D

    BalasHapus
  3. bos taruh di mana CSSx maklum masih amatir buat css
    kirim di e mail ku bos oke thanks
    and follback blog saya http://adisurya96.blogspot.com

    BalasHapus
  4. ternyata triknya sederhana
    TERIMA KASIH telah berbagi

    BalasHapus
  5. lw mau pasang di postingan dimna nih..??
    ko ga da tutorialnya..??
    bls di blog ini ya..
    Gudang Makalahmu

    BalasHapus
  6. Bagus nih kangboleh di coba... thank ya share nya..

    BalasHapus

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top