+62 852-9966-1376

Fitur Dan Kelebihan Css3

Fitur dan Kelebihan CSS3

1. Polaroid dengan Rotate, Scale, & Box Shadow
[code lang=”css”] .box {
z-index: 1;
position: relative;
padding: 3px;
width: 230px;
height: 200px;
/* Kode yang digunakan */
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}

.box:hover {
z-index: 2;
position: relative;
/* Kode yang digunakan */
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}
[/code] Keterangan:

Untuk membuat efek bayangan saya menggunakan -moz-box-shadow. Efek memutar menggunakan -moz-transform ditambah dengan rotate(0deg). Dimana (0deg) adalah besar sudut.

Dan untuk perbesaran saat di hover, juga menggunakan -moz-transform, tapi ditambah scale(1.25) yang merupakan besar nilai perbesaran.

2. Glossy dengan Gradient & Rounded Corner

[code lang=”css”]

.tombol {
width: 600px;
height: 200px;
margin: -30px auto;
border: 2px solid #4F93CA;
background-color: rgba(60, 132, 198, 0.8);
/* Kode yang digunakan */
-moz-border-radius: 100px;
-moz-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
-webkit-border-radius: 100px;
-webkit-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
background-image: -webkit-gradient(linear, 0% 0%, 0?%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
}

.kilau {
top:1px;
left:50px;
position: relative;
height: 110px;
width: 500px;
/* Kode yang digunakan */
-moz-border-radius: 100px;
background-color: rgba(255, 255, 255, 0.2);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 80%);
-webkit-border-radius: 100px;
background-image: -webkit-gradient(linear, 0% 0%, 0?%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}

.tombol span {
text-shadow: 0px 1px 8px #2867A5;
font-family: arial black;
color: #fefefe;
font-size: 80px;
position: relative;
top: -20px;
left: 150px;
}

[/code]

Keterangan:

Untuk menghasilkan efek glossy seperti contoh di atas, saya menggunakan -moz-border-radius untuk rounded corner dan -moz-linear-gradient untuk gradasinya.

Kode disamping kanan adalah kode yang saya gunakan untuk contoh efek glossy yang berwarna biru. Dan untuk tutorial lengkap pembuatan efek glossy,

3. Efek transparan dengan Opacity dan RGBA

[code lang=”css”] p.trans2 {

padding: 15px;

left: 0px;

top: -421px;

position:relative;

z-index:2;

width: 400px;

height: 410px;

/* Kode yang digunakan */

background-color:rgba(255, 255, 255, 0.8);

-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);

-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);

}
[/code] Keterangan:

Jika class p.trans2 diberi kode opacity:0.8 teks yang tertulis akan ikut menjadi transparan. Berbeda jika kita menggunakan kode rgba(255, 255, 255, 0.8); dimana nilai 0.8 adalah nilai opacity, maka teks tidak ikut menjadi transparan. Dengan menggunakan opacity dan warna RGBA, maka kita tidak perlu lagi menggunakan gambar dengan format *png untuk membuat efek transparan

4. Kubus 3 dimensi dengan Skew & Rotate
[code lang=”css”] /* Kode CSS untuk kubus No.1 */

.left, .right {
top: 130px;
float:left;
padding: 15px;
position:relative;
width: 200px;
height: 200px;
color: #fff;
font-size: 12px;
right: 160px;
}

<iframe __idm_frm__="2147484714" allowfullscreen="true" allowtransparency="true" frameborder="0" height="250" hspace="0" id="aswift_2" marginheight="0" marginwidth="0" name="aswift_2" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" scrolling="no" style="left:0;position:absolute;top:0;border:0px;width:300px;height:250px;" vspace="0" width="300"></iframe>

.top {
font-size: 12px;
color: #fff;
z-index: 2;
top:-51px;
left: 185px;
background: #7C8B2E;
float:left;
padding: 15px;
position:relative;
width: 200px;
height: 200px;
/* Kode yang digunakan */
-moz-transform: rotate(60deg) skewY(-30deg) scaleY(1.15);
-webkit-transform: rotate(60deg) skewY(-30deg) scaleY(1.15);
}

.left {
background: #2867A5;
/* Kode yang digunakan */
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
}

.right {
background: #EF5F30;
/* Kode yang digunakan */
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
}
[/code] Keterangan:

Efek 3 dimensi ini masih menggunakan -moz-transform tapi ditambah dengan skewY(0deg). Dimana (0deg) adalah besar sudut pada koordinat Y.

Saya mengalami kesulitan saat membuat kubus ini, karena saya harus meng-akurat-kan besar sudutnya supaya pas dengan sudut yang lain

5. Multi-Column dengan Column, Gap, & Rule
Keterangan:

-moz-column-count untuk menentukan jumlah kolom. -moz-column-gap untuk menentukan jarak antar kolom. -moz-column-rule untuk menambahkan sebuah garis antar kolom.

Saya juga memakai multi-column pada artikel Sejarah Wayang Kulit. Dan tutorial lengkapnya, bisa di baca disini.
[code lang=”css”] .kolom {
margin-top: -30px;
margin-bottom: 10px;
padding: 20px;
background: #fff;
/* Kode yang digunakan */
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}

.kolom2 {
text-align: justify;
margin-top: -5px;
padding: 20px;
background: #fff;
/* Kode yang digunakan */
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #BDC1C7;
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #BDC1C7;
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}
[/code] Keterangan:

-moz-column-count untuk menentukan jumlah kolom. -moz-column-gap untuk menentukan jarak antar kolom. -moz-column-rule untuk menambahkan sebuah garis antar kolom.

6. Animasi dengan CSS3 & Tentang Attribute Selector
[code lang=”css”] /* Kode untuk contoh animasi pertama */

.kot {
float:left;
width: 180px;
height: 130px;
margin: 30px 0;
/* Kode yang digunakan */
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
}

.kot[title$=”kot1″] {
background: #2867A5;
}

.kot[title$=”kot1″]:hover {
-moz-transform:translate(3em, 0pt);
-webkit-transform:translate(3em, 0pt);
}

.kot[title$=”kot2″] {
margin-left: 20px;
background: #7C8B2E;
}

.kot[title$=”kot2″]:hover {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}

.kot[title$=”kot3″] {
margin-left: 20px;
background: #EF5F30;
}

.kot[title$=”kot3″]:hover {
-moz-transform:translate(-3em, 1em);
-webkit-transform:translate(-3em, 1em);
}

.kot[title$=”kot4″] {
margin-left: 20px;
background: #EA2F22;
}

.kot[title$=”kot4″]:hover {
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
}

.kot:hover {
z-index: 2;
}
[/code] Keterangan:

Efek animasi pada contoh di atas menggunakan -moz-transition dan -webkit-transition sehingga efek animasinya akan terlihat Di browser Mozilla, Chrome, dan Safari.

Pada contoh disamping menggunakan kode transisi all 0.6s ease-in-out dimana 0.6s adalah waktu gerak dan ease-in-out adalah tipe efek yang digunakan.

  • By nsahid
  • On Jun 30, 2011
  • Kategori: Pemrograman | 9
  • Tags: css, css3, html, web programming,

  • Comment

nsahid

Nur Sahid, mengabdi sebagai Aparatur Sipil Negara. Disamping juga bekerja sebagai freelance untuk pemrograman web dan android. Skill yang dimiliki adalah HTML, CSS, Javascript, PHP Native dan Framework Codeigniter, JQuery, AngularJS, VueJS