Inilah Kehebatan

CSS3

Saya terperanga ketika pertama kali melihat fitur baru CSS3 pada beberapa artikel yang berhasil saya kumpulkan. Bagaimana tidak, lha wong fitur baru itu sangat membantu sekali untuk para web designer dalam mengerjakan projectnya. Inilah contohnya:

Eits, update dulu Browser Anda ke versi yang terbaru. Dan ingat, jangan pernah menggunakan Internet Explorer!

1. Polaroid dengan Rotate, Scale, & Box Shadow

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.


.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);
}

.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);
}

2. Glossy dengan Gradient & Rounded Corner

ENTER

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, bisa dibaca disini.


.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% 90%, 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% 95%, 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;
}

3. Efek transparan dengan Opacity dan RGBA

Lorem ipsum katok kolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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


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);
}

4. Kubus 3 dimensi dengan Skew & Rotate

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2

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. Silakan baca tutorialnya disini.


/* 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;
}

.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);
}

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

Lorem Ipsum Katok Kolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum Katok Kolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum Katok Kolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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.


.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);
}

6. Animasi dengan CSS3 & Tentang Attribute Selector

Untuk melihat efek animasi ini, gunakan browser Safari atau Chrome!

Keterangan:

Efek animasi ini masih juga menggunakan -moz-transform yang sudah digunakan pada contoh diatas. Jika sebuah class menggunakan -moz-transform dan ditambah dengan -webkit-transition maka efek animasinya akan terlihat. Pada kode disamping menggunakan -webkit-transition: all 0.6s ease-in-out dimana 0.6s adalah waktu gerak dan ease-in-out adalah tipe efek yang digunakan. Tutorial animasi ini bisa dibaca disini. Dan sekilas tentang attribute-selector bisa dibaca disini.


/* 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;
}

.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;
}

Inilah Kehebatan

CSS3

Keterangan:

Keterangan:

Keterangan:

Keterangan:

Keterangan:

Keterangan:

Akhirnya: