postingan terbaru

Loading

Senin, 07 November 2011

Membuat Bayangan Shadow pada Kotak dan Gambar

Dengan menggunakan CSS baik CSS 1 dan 2 atau terlebih CSS 3 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,  loading terasa lebih cepat.
Pada kesempatan ini saya akan memberikan beberapa contoh penggunaan CSS 3 untuk membuat efek bayangan atau shadow pada kotak atau gambar dan hasilnya lumayan keren untuk mempercantik tampilan dari sebuah web atau blog, monggo tinggal pilih sesuai selera masing-masing !

Menberi Bayangan tanpa efek blur contohnya seperti ini :


 TEKS DISINI

Berikut Kodenya :

 
<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>



Menberi Bayangan dengan efek blur ke kanan bawah contohnya seperti ini :


TEKS DISINI

Berikut Kodenya :
<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 DISINI</div>



Menberi Bayangan dengan efek blur ke kiri atas  contohnya seperti ini :


TEKS DISINI

Berikut Kodenya :
<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">TEKS DISINI</div>
Selamat Utak-atik blog semoga tambah cantik.......!!!


Artikel Yang Berhubungan



0 komentar:

Poskan Komentar

Buat sobat blogger anda tulis komentar disini,angdidi tulis komentar disana tapi yang sopan ya!!!angdidi yakin anda adalah blogger yang baik matur kesuwun...