CSS 3

Henny Alfianti
Apa itu CSS 3 ?
• CSS3 merupakan generasi ke-3 dari perkembangan CSS
sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama
saja dengan pengertian CSS generasi paling awal. Hanya
saja, beberapa standar baru untuk CSS3 menggantikan
versi CSS sebelumnya dan dapat bereksplorasi lebih
dalam lagi untuk membuat tampilan situs lebih menarik.
CSS Vendor Prefix
• Pesatnya perkembangan modul-modul CSS3 memaksa
perusahaan pembuat web browser untuk mendukung
property CSS yang belum sepenuhnya menjadi
standar W3C. Untuk property seperti ini, web browser
memilih menggunakan CSS Vendor Prefix.

• Vendor prefix adalah sebutan untuk penambahan

beberapa karakter khusus di awal penulisan property,
terutama untuk property CSS3 terbaru. Sebagai contoh,
untuk property column-count, jika menggunakan vendor
prefix ditulis menjadi: -webkit-column-count.
Cara Penulisan Vendor Prefix

• Vendor prefix ditambahkan di awal penulisan property,

sesuai dengan inisial web browser.
• Berikut adalah awalan vendor prefix pada web browser
populer:
 -webkit- (Chrome, dan versi terbaru dari Opera)
 -moz- (Firefox)
 -o- (Opera versi lama)
 -ms- (Internet Explorer)
Aturan penulisan vendor prefix
• Untuk modzilla :
• -moz-<properti CSS3>: <nilai>;

• Untuk Chrome :
• -webkit-<properti CSS3>: <nilai>;

• Untuk Opera :
• -o-<properti CSS3>: <nilai>;

• Untuk Internet Explore :

• filter:progid.DXImageTransform.Microsoft.<properti>(<atri
but>) ;
CSS3 Module
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animation
CSS3 : Rounded Corner

Example :
Result rounded corner
•
CSS3 border-radius - Specify Each Corner

• 1. Four values - border-radius: 15px 50px 30px 5px:

• 2. Three values - border-radius: 15px 50px 30px:

• 3. Two values - border-radius: 15px 50px:

CSS3 : Border Image
Example
• Kita memiliki gambar original :

• Dengan menggunakan sintax css di bawah ini,

• Akan menghasilkan :
CSS3 : Background
Example
CSS3 : Gradient

• Linear Gradient - Top to Bottom (this is default)

• Linear Gradient - Left to Right

• Linear Gradient - Diagonal

Example
CSS3 : Shadow

• Example Text Shadow

Example
CSS3 : 2D-3D Transform
CSS3 2D Transforms
• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()
2D Transform
• Translate Method

• Rotate Method

• Scale Method
3D Transform
• RotateX() Method

• RotateY() Method

• RotateZ() Method
CSS3 : Transition
Example
Speed Transition
Example Transition
• Delay

• Transition + Transformation
CSS3 : Animation
Example
• Animasi untuk merubah warna box dari merah - kuning
Example
• Animasi untuk membuat box bergerak dan berubah warna
Example
• Mengulang berapa kali animasi bergerak