Cara Mudah Buat Efek Bayangan (Box Shadow) Dengan CSS

Home » Blogging » Cara Mudah Buat Efek Bayangan (Box Shadow) Dengan CSS

Cara Mudah Buat Efek Bayangan (Box Shadow) Dengan CSS

Posted By : Tips & Cara Admin Posted on - 6:42:00 AM with No comments

Kali ini Tips & Cara akan share mengenai cara membuat efek bayangan (box shadow) di blog. Efek bayangan ini tentunya jika diterapkan untuk desain template blog akan lebih cantik dan menarik tentunya. Cara membuatnya pun tidak sulit kok, yang terpenting anda mengetahui sedikit CSS (cascading style sheet). Untuk belajar menggunakan CSS pun tidak sulit, banyak tutorial web yang membahas tentang hal ini. Box shadow intinya membuat efek blur hingga menyerupai bayangan, efek blur yang dihasilkan tergantung bagaimana anda menempatkan kode tersebut sesuai keinginan anda, bisa blur dengan kondisi vertical maupun horizontal.

Penggunaanya pun bisa menggunakan CSS maupun penulisan kode HTML secara langsung, nah berikut contoh kode efek box shadow sederhana beserta penjelasannya. Untuk penggunaan dengan CSS maka penulisannya akan seperti berikut:

#contoh kotak {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Sedang untuk penulisan mode HTML contoh penulisan kode tersebut sbb:

Namun pada intinya semua kode tersebut berbentuk sbb:

box-shadow: x-point y-point blur spread color inset;

Keterangan dari kode box shadow tersebut adalah sebagai berikut:

x-point merupakan bayangan yang mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke samping kiri dan sebaliknya, jika bernilai positif maka akan mengarah ke samping kanan.
y-point merupakan bayangan yang mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke atas dan sebaliknya, jika bernilai positif maka akan mengarah ke bawah.
blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya efek blur pada bayangan).
spread merupakan ukuran dari bayangan itu sendiri.
color untuk menetukan warna bayangan yang akan di hasilkan.
inset untuk menaruh bayangan di dalam box dan bersifat optional, artinya boleh ada dan boleh tidak.

Kali ini saya akan sedikit share tentang penerapan contoh penggunaan box shadow, perhatikan gambar dibawah ini tanpa efek bayangan:

#kotak a{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
}

Nah berikut penambahan CSS untuk box shadow atau efek bayangan:

#kotak b{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

#kotak c{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

#kotak d{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

#kotak e{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

#kotak f{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

#kotak g{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}

Nah mudah kan cara membuat box shadow di blog, anda bisa menerapkannya baik melalui CSS maupun HTML langsung, semoga artikelnya bermanfaat.

sponsored ads