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:  Membuat Bentuk Segitiga dengan CSS

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