Cara Membuat Efek Shadow Pada Kotak dan Gambar

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.

1. Efek Shadow Pada Teks

*Memakai Kode Html

Berikut Kodenya

<h3 style="color: #01022c; font-family: staccato222 BT; font-size: 2em; font-weight: 700; line-height: 1.2em; padding: 3px 10px; text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119);">
Tuliskan Teks di sini !!
</h3>

Untuk Mengubah Warna teks tinggal liat kode warna disini, kodenya yang #01022c terserah mau diubah jadi warna apa.

Tuliskan Teks di sini !! 

2. Efek Shadow Pada Gambar

Efek Shadow pada gambar kali ini pake kode css nah cara buatnya yaitu :

I. Menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur:

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

Berikut hasilnya :

TEKS DISINI

II. Menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:

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

Berikut hasilnya :

TEKS AREA

III. Menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.box-shadow3{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: -7px -7px 8px #818181;
-webkit-box-shadow: -7px -7px 8px #818181;
-moz-box-shadow: -7px -7px 8px #818181;
}
</style>
<div class="box-shadow3">Silahkan Masukkan Text</div>

Berikut hasilnya :

Silahkan Masukkan Text

IV. Menambahkan teks pada box shadow :

<style type="text/css">
.box-shadow5{
width:300px;
height:150px;
padding:5px;
margin:0 auto;
color:#fff;
font-size: 22px;
font-family: Goudy Stout,sans-serif;
background:#00378A;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<div class="box-shadow5">Cara membuat efek shadow pada kotak dan gambar</div>

Berikut hasilnya :

Cara membuat efek shadow pada kotak dan gambar

Mudah-mudahan pada bisa semua ya. Tinggal siap memodifikasinya sendiri.
Ref : carabuatwebgratis.com

Semoga Manfaat