Inilah Kehebatan CSS3

CSS3

Inilah Kehebatan

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

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

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

Akhirnya:

Sebenarnya masih banyak kehebatan CSS3 yang lain, seperti @font-face, berhubung saya pernah meng-embed font di server sendiri yang menyebabkan bandwidth 9GB habis dalam waktu 3 hari saja, maka sengaja tidak saya bahas. Tapi Anda bisa membaca tutorialnya disini.
Setelah mengetes efek CSS3 ini di berbagai browser, maka browser yang menjadi pilihan saya adalah FIREFOX, SAFARI, dan CRHOME. Dan sering – seringlah meng-update browser Anda ke versi yang terbaru agar bisa merasakan kehebatan CSS3.

BagiBagiBlog

14 December 11 - Link

Bussheeet… Efek dari CSS3 emang bener2 HEBAAT.. Mengagumkan BGT Om!!!
jadi leabih semakin tampak Luar biasa!!!
Hmm,,, kayaknya emang layak dcoba tuh… ijin Bookmark dulu Om!!!
MAKASI BGT atas INfonya!!!

Mbah Qopet

iya bang udah ane coba semua , keren-keren. buat @font-face nambah berat loading T.T

Cory Senjaya

Uihhhhhh….. HEBAT!
keren ya… wah artikel yang sangat sangat sangat berguna, membantu dan menolong dan helping para blogger terutama yang masih tahap belajar seperti sayah… hehehe… MANTAB ^_^’d

dhanz