Belajar CSS3 Dasar, Tutorial CSS3

CSS3 sudah lama muncul tapi masih banyak browser yang tidak support dengan ini, disini kita akan belajar tentang CSS3 yang sering saya gunakan untuk desain-desain website.

Artikel Terkait

• Bermain-main dengan CSS3 Box-shadow
• Membuat Breadcrumb (Navigasi) sederhana dengan CSS
• Membuat Bentuk Segitiga dengan CSS
• Efek Kertas dengan CSS3
• Membuat Tombol Sederhana dengan Teknik CSS Sprites

Kasus pertama :

Pada gambar diatas terlihat sebuat text yang seakan-akan tenggelam, bagaimana cara membuatnya? gampang! nih:

1	text-shadow: 3px 5px 5px #fff;

penjelasannya :

Kasus kedua :

Gambar di atas pada bagian box terdapat bayangan yang keren! bagaimana caranya?

1 2 3

-webkit-box-shadow: 0px 0px 10px #555555; -moz-box-shadow:0px 0px 10px #555555; box-shadow:0px 0px 10px #555555;

Kasus ketiga :

Bagaimana kalau membuat seperti gambar diatas? box rounded corner

1 2 3

-moz-border-radius: 15px; -webkit-border-radius:15px; border-radius: 15px;

Kasus keempat :

Gambar diatas boxnya miring? kok bisa yah?

1 2 3 4 5 6 7 8 9 10

-moz-transform: rotate(7.5deg);  /* FF3.5+ */          -o-transform: rotate(7.5deg);  /* Opera 10.5 */  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */                transform: rotate(7.5deg);                         filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6,IE7 */                            M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);                -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(                            M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,                            sizingMethod='auto expand')"; /* IE8 */                      zoom: 1;

Nah, bagi teman-teman yang bisa lebih jauh lagi bisa disharing sama kita disini