Cara membuat efek shadow pada kotak dan gambar

Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi warna pada border, seleksi warna pada text, fitur skala, kolom pada text, termasuk fitur gradien pada background. Selain itu Penggunaan css3 membuat blog kita menjadi lebih ringan, sehingga ketika membuka blog, loading terasa lebih cepat.
Sekian banyak Tutorial yang sudah saya posting di blog ini sudah menggunakan fitur css3. Dan Untuk kali ini, saya juga akan memanfaatkan fitur dari css3, yaitu memberi efek shadow pada sebuah kotak dan image atau gambar.

Yang pertama, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur:

<style type="text/css">
.shadow11{
box-shadow: 7px 7px #818181;
-webkit-box-shadow: 7px 7px #818181;
-moz-box-shadow: 7px 7px #818181;
}
</style>
<div class="shadow11" style="width:330px; height:50px; padding:5px; background:#00378A;
border: 1px solid black;"></div>

Berikut hasilnya :

Yang kedua, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.shadow1{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}
</style>
<div class="shadow1" style="width:330px; height:50px; padding:5px; background:#00378A;
border: 1px solid black;"></div>

Berikut hasilnya :

Yang ketiga, menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.shadow4{
box-shadow: -7px -7px 8px #818181;
-webkit-box-shadow: -7px -7px 8px #818181;
-moz-box-shadow: -7px -7px 8px #818181;
}
</style>
<div class="shadow4" style="width:330px; height:50px; padding:5px; background:#00378A; border: 1px solid black;"></div>

Berikut hasilnya :

Yang keempat, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah gambar, dengan memberi efek blur :

<style type="text/css">
.shadow3{
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFZQjTmA87k6XYaDBZdsFVe2KxmXcKCNQuKJPDJgYi9gFv0ZfDFVvIKdDMW3FeMd5iSOs4dyYCaMo6L1axk9a-W-y54j3KvA5G8hNmRaLIPwZQPUuP4pMCGmZUu-NysTQ1DqBISjU2Z0RB/s300/Gardu.jpg" class="shadow3" />

Berikut hasilnya :




Yang kelima, cara menambahkan teks pada box shadow :
Untuk membuat fariasi Teks, silahkan anda bisa lihat artikel  cara membuat fariasi Teks

<style type="text/css">
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}
</style>
<div class="shadow2" style="width:330px; height:150px; padding:5px; background:#00378A;
border: 1px solid black;">
<center>
<span style="color: #ffffff; font-size: 22px"><span style="font-family: Goudy Stout,sans-
serif;">Cara membuat efek shadow pada kotak dan gambar</span></span></center></div>

Berikut hasilnya :

Cara membuat efek shadow pada kotak dan gambar

Catatan :

• Kode  dengan warna COKLAT diatas, adalah nilai panjang dan lebar kotak
• Kode  dengan warna PINK diatas, adalah warna background kotak
• Kode  dengan warna BIRU diatas, ganti dengan Ulr gambar milik anda
• Kode  dengan warna HIJAU MUDA diatas, adalah warna Teks anda
• Kode  dengan warna MERAH diatas, adalah cara penulisan Teks anda

Silahkan anda utak-atik sendiri sesuai selera anda.

Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.