Unsecured debt consolidation loan


Tuesday, 8 March 2011

Drop Shadow dengan CSS3

Mempercantik tampilan dengan drop shadow memang cukup diminati. Kali ini saya ingin men-share-kan cara membuat drop shadow dengan CSS3. Jadi tidak perlu lagi membuatnya dalam bentuk image yang membutuhkan waktu loading yang lebih lama.

Namun jika kamu menggunakan CSS3 ini terdapat beberapa kelemahan, salah satunya adalah pada browser klien. Browser yang mensupport CSS3 ini adalah mulai dari Safari v.3, FireFox 3.6, Google Chrome.


Berikut adalah contoh hasil drop shadow yang dibuat dengan CSS3.
Penulis telah mencobanya di browser FireFox 3.6.15 dan Google Chrome 9.0 dan berjalan dengan baik.


Contoh penggunaan shadow

Untuk membuat drop shadow seperti di atas, kita cukup menambahkan baris berikut ini pada stylesheet.

-moz-box-shadow: #585858 2px 2px 3px;
untuk browser mozila firefox

-webkit-box-shadow: #585858 2px 2px 3px;
untuk browser google chrome dan safari

Berikut adalah source kode dari box di atas.
<style>
.shadow{
background-color:#FF0000;
-moz-box-shadow: #585858 2px 2px 3px;
-webkit-box-shadow: #585858 2px 2px 3px;
width:250px;
height:100px;
}
</style>
<div class="shadow">
Contoh penggunaan shadow</div>

Selamat mencoba! Jangan lupa komentar yah!

7 comments:

wah tutorial coding, baik tuk dikoleksi nieh, oke gan ku save ych...!! Thx's

@mas SaputraMZ: monggo mas... masama..

klo untuk agar di fontnya aja gimana wil?

@mas arifin: pake ini mas
text-decoration: #000 2px 2px 2px;

Ga tau aku cara buatnya neh.!

Dahulu kita juga suka nambahin kode ini gan, tapi karna gak bekerja disemua browser akhirnya di buang

yah mas,, jangankan css3 ,, css itu sendiri saja saya gx tau,, :(

Post a Comment

Enter your email address:

Delivered by FeedBurner