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.

[related_posts]

Kasus pertama :

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

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

penjelasannya :

Kasus kedua :

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

-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

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

Kasus keempat :

Baca Juga:  Efek Kertas dengan CSS3

Gambar diatas boxnya miring? kok bisa yah?

-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 ­čÖé

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram t├╝rk takip├ži sat─▒n al