Mengenal Fitur CSS3

Chrome | 43.0 
4.0 -webkit- | | Internet Explore / Edge | 10.0 | | Firefox | 16.0
5.0 -moz- | | Safari | 9.0
4.0 -webkit- | | Opera | 30.0
15.0 -webkit-
12.0 -o- |

Keterangan :

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja dengan awalan -webkit-, -moz-, atau -o-.

Contoh Pengguna opera versi 30.0 ke atas :

div { animation-iteration-count: 2; }

Sedangkan pengguna opera versi 15.0 hingga 29.0 :

div { -webkit-animation-iteration-count: 2; }

Nilai Properti :

animation-name

menentukan nama keyframe yang akan dikaitkan ke selector

animation-duration

menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk menyelesaikan animasi

animation-timing-function

Menentukan kurva kecepatan animasi

Nilai properti :

linear

mengatur animasi dengan kecepatan yang sama dari awal hingga akhir

ease

Nilai default animation-timing-function yaitu animasi memiliki kecepatan awal lambat, kemudian cepat, kemudian berakhir perlahan

ease-in

mengatur animasi dengan kecepatan awal / permulaan yang lambat

ease-out

mengatur animasi dengan akhir yang lambat

ease-in-out

mengatur animasi dengan awal yang lambat dan akhir yang lambat

initial

menetapkan properti ke nilai default

inherit

Mengikuti nilai properti dari elemen induk, misalkan pada elemen induk diset ease-in-out maka akan ikut diset ease-in-out juga.

animation-delay

menentukan penundaan / jeda sebelum animasi dimulai

animation-iteration-count

menentukan berapa kali animasi harus dimainkan

Contoh apabila harus dimainkan 2x :

div { animation-iteration-count: 2; }

animation-direction

menentukan apakah animasi harus dimainkan ke depan, mundur atau gabungan maju dan mundur (alternate).

Nilai properti :

normal

Animasi dimainkan seperti biasa (ke depan)

reverse

Animasi dimainkan secara terbalik (mundur)

alternate

Animasi dimainkan ke depan terlebih dahulu, lalu mundur

alternate-reverse

Animasi diputar mundur terlebih dahulu, lalu ke depan

initial

Mengatur animasi ke nilai default

inherit

Mengikuti nilai properti dari elemen induk, misalkan pada elemen induk diset reverse maka akan ikut diset reverse juga.

Contoh penggunaan animation-direction :

div { animation-direction: reverse; }

animation-fill-mode

menentukan gaya sebuah elemen ketika animasi tidak sedang dimainkan (sebelum dimulai, setelah berakhir, atau keduanya).

animation-play-state

menentukan apakah animasi berjalan atau berhenti

More Pseudoclass

Digunakan untuk menentukan style khusus suatu elemen :

:first-child

contoh :

li:first-child

tujuan contoh diatas adalah menentukan style khusus elemen

yang pertama.

contoh kode :

<style> li:first-child { background-color: yellow; color : red; } </style> <h1>Daftar Bekal Piknik</h1> <ul> <li>Nasi</li> <li>Sate</li> <li>Sayuran</li> </ul>

Hasil :

:last-child

Kebalikan dari first child, menentukan style khusus elemen yang terakhir

contoh kode :

<style> li:last-child { background-color: yellow; color : red; } </style> <h1>Daftar Bekal Piknik</h1> <ul> <li>Nasi</li> <li>Sate</li> <li>Sayuran</li> </ul>

nth-child (n)

Menentukan style khusus elemen yang diinginkan, misal elemen dengan urutan 2 dan 3.

Contoh kode:

<style> li:nth-child(2), li:nth-child(3) { background-color: yellow; color : red; } </style> <h1>Daftar Bekal Piknik</h1> <ul> <li>Nasi</li> <li>Sate</li> <li>Sayuran</li> <li>Minuman</li> </ul>

Hasil:

:nth-child (odd) dan :nth-child (even)

Menentukan style khusus elemen ganjil dan genap

Contoh kode :

<style> li:nth-child(odd) { background-color: yellow; color : red; } li:nth-child(even) { background-color: orange; } </style> <h1>Daftar Bekal Piknik</h1> <ul> <li>Nasi</li> <li>Sate</li> <li>Sayuran</li> <li>Minuman</li> </ul>

Hasil :

::first-letter

menentukan style khusus untuk huruf pertama pada suatu elemen

Box Shadow

Properti ini digunakan untuk menampilkan efek shadow / bayangan pada box.

Browser Pendukung:

Propertybox-shadowChrome10.0
4.0 -webkit-Internet Explore / Edge9.0Firefox4.0
3.5 -moz-Safari5.1
3.1 -webkit-Opera10.5

Contoh :

<style> div { padding :10px margin : 10px 20px; box-shadow: 2px 2px 10px 2px rgba(0,0,0,.3); } </style> <div><p>The optional fourth value defines the spread of the shadow</p></div>

Jika ingin menampilkan efek bayangan ke dalam maka bisa menyisipkan inset.

Contoh :

<style> div { padding :10px margin : 10px 20px; box-shadow: inset 2px 2px 10px 2px rgba(0,0,0,.3); } </style> <div><p>The optional fourth value defines the spread of the shadow</p></div>

Text Shadow

Properti ini memberikan efek bayangan pada tulisan.

Browser Pendukung:

Propertytext-shadowChrome4.0Internet Explore / Edge10.0Firefox3.5Safari4.0Opera9.6

Contoh:

<style> h1 { text-shadow: 2px 2px 8px #aaa; color: white } </style> <h1>The text Shadow Property</h1>

Border Radius

Properti ini berfungsi untuk membentuk sudut-sudut dari elemen, misal elemen dengan bentuk awal persegi ingin dijadikan melingkar di sudut-sudutnya.

Browser Pendukung:

Propertyborder-radiusChrome5.0 
4.0 -webkit-Internet Explore / Edge9.0Firefox4.0 
3.0 -moz-Safari5.0 
3.1 -webkit-Opera10.5

Contoh :

<html> <head> <style> #value1 { border-radius: 20% 10%; background: #000FFF; padding: 20px; width: 200px; height: 140px; } </style> </head> <body> <div id="value1"></div> </body> </html>

Nilai properti

length

Pengisian nilai ini akan menentukan bentuk sudut dari elemen

Contoh1 :

border-radius: 25px;

Apabila hanya diisi 1 nilai length, maka nilai tersebut berlaku untuk keempat sudut.

Contoh 2:

border-radius: 25px 50px;

Apabila diisi 2 nilai length , maka nilai pertama berlaku untuk sudut kiri atas dan kanan bawah, dan nilai kedua berlaku untuk sudut kanan atas dan kiri bawah.

Contoh 3 :

border-radius: 25px 50px 50px;

Apabila diisi 3 nilai length , Nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk sudut kanan atas dan kiri bawah, dan nilai ketiga berlaku untuk sudut kanan bawah

contoh 4

border-radius: 25px 50px 50px 25px;

Apabila diisi 4 nilai length , nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk sudut kanan atas, nilai ketiga berlaku untuk sudut kanan bawah, nilai keempat berlaku untuk sudut kiri bawah.

%

Pengisian nilai dalam bentuk % , ketentuannya sama seperti pengisian dalam bentuk length

contoh :

border-radius: 20% 10%;

initial

inherit

Gradient Background

Ada 2 jenis gradient background :

linear

Radial

Contoh kode :

<style> .container div { width:130px; height:130px; display:inline-block; margin:2px; } #el1{background:linear-gradient(to bottom,yellow,red)} #el2{background:radial-gradient(red 5%, yellow 15%, green 60%);} #el3{background:repeating-linear-gradient(red, yellow 10%, green 15%)} #el4{background:repeating-radial-gradient(red,green 5px,white 5px, white 10px)} </style> <div class="container"> <div id="el1">Linear</div> <div id="el2">Radial</div> <div id="el3">Repeating Lin</div> <div id="el4">Repeating Rad</div> </div>

Hasil :

3D Transform

memungkinkan untuk mentransformasi 3D, contohnya untuk memberikan efek memutar suatu elemen.

metode tranformasi 3 D

• rotateX()

  Metode rotateX () digunakan untu memutar elemen di sekitar sumbu X pada derajat tertentu,

  misal diputar 180 derajat

• rotateY()

  Metode rotateY () digunakan untuk memutar elemen di sekitar sumbu Y pada derajat tertentu, misal diputar 180 derajat

• rotateZ()

  Metode rotateZ () digunakan untu memutar elemen di sekitar sumbu Z pada derajat tertentu,

  misal diputar 180 derajat

  contoh kode :

    #Div 
    {
        -webkit-transform: rotateZ(90deg); /* Safari */
        transform: rotateZ(90deg);
    }