CSS3

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Generasi ke-3 dari spesifikasi CSS yang direkomendasikan oleh W3C.

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

CSS3 dibagi menjadi beberapa modul, dan tiap-tiap modulnya menambahkan

kemampuan / fitur yang ada di CSS2

kenapa CSS3?

Kenapa menggunakan CSS3

• Membuat website menjadi lebih fleksibel

• Membuat mock-up dengan cepat tanpa bantuan bahasa scripting

• Mengurangi penggunaan gambar = kecepatan load halaman

• Penggunaan selector untuk menghindari penggunaan markup yang boros

sebelum CSS3

dengan CSS3

property CSS3http://www.quackit.com/css/css3/properties/

yang sering digunakan

border-radius

opacity

RGBa & HSLa

box-sizing

box-shadow

text-shadow

CSS gradient

background

pseudo-element

selector lanjut

webfont

media queries

transform (2D & 3D)

CSS transition

CSS animation

CSS Filter

FlexBox

CSS columns

ada beberapa property yang hanya berjalan di browser tertentu.

browser support

untuk mengatasinya, kita harus menambahkan vendor-prefixes.

vendor prefixes

-webkit- -moz- -ie- -o-

kenapa?

karena tiap browser memiliki karakteristik yang berbeda

tujuan: menulis kode yang ‘berjalan’ di- semua browser hampir

opacity

rgba()red green blue alpha

hsla()hue saturation lightness alpha

box-shadow

box-shadowtanpa CSS3

<x-offset> <y-offset> <blur> <color>

box-shadow

<inset> <x-offset> <y-offset> <blur> <spread> <color>

box-shadow

<x-offset> <y-offset> <blur> <spread> <color>

box-shadow

<inset> <x-offset> <y-offset> <blur> <spread> <color>

box-shadow

box-shadowmultiple shadow

text-shadow

<x-offset> <y-offset> <blur> <color>

text-shadow

<inset> <x-offset> <y-offset> <blur> <spread> <color>

text-shadow

gradients

linear-gradientradial-gradient

linear-gradient

contoh

bukan property css3, melainkan value untuk background-image

linear-gradient

sintaks sederhana

multiple color

sintaks lengkap

arahto bottomto topto leftto right

to left topto left bottomto right topto right bottom

color stop

http://lea.verou.me/css3patterns/

radial gradients

sintaks sederhana

multiple color

color stop

sintaks lengkap

tipe

ellipsecircle

jangkauanjarak dari pusat gradient ke sisi terluar-nya

jangkauanclosest-cornerjarak dari pusat gradient ke sudut terdekat elemen

closest-sidejarak dari pusat gradient ke sisi terdekat elemen

farthest-cornerjarak dari pusat gradient ke sudut terjauh elemen

farthest-sidejarak dari pusat gradient ke sisi terjauh elemen

jangkauan

sisi terdekat

sisi terjauhpusat gradient

jangkauansudut terjauh & terdekat semua sama

pusat gradient

jangkauan

pusat gradient

sisi terdekat

sisi terjauh

jangkauan

pusat gradient

sudut terjauh

sudut terdekat

sisi terdekat

sudut terjauh

posisimemindahkan pusat gradient

posisi-ytop

centerbottom

px

posisi-xleft

centerright

px

pusatnya berpindah ke sudut kiri atas

@font-face

penggunaan font pada CSS

font-family

1

font-family

fallback

font-family

font harus ada di sistem operasi client / user.

Google Fontshttp://www.fonts.google.com

2

jika Google Fonts tidak cukup?

@font-face

sintaks lengkap

browser support

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

layanan fontfonts.google.com fontsquirell.com

fontspring.com webtype.com

typotheque.com dll.

fontsquirell.com

WOFF / WOFF2

WOFF / WOFF2• Web Open File Format

• Dikembangkan oleh Mozilla

• Dibuat khusus untuk website

• Di-load lebih cepat daripada jenis font yang lain

• Merupakan kompresi dari tipe TTF / OTF

web font generator

vendor prefixes

sintaks khusus yang harus ditambahkan untuk beberapa

property CSS3

sintaks spesifik untuk tiap browser / vendor.

prefix / awalan

vendor prefixes

-webkit-<properti-css3>-moz-<properti-css3>-ms-<properti-css3>-o-<properti-css3>

kenapa?

karena tidak semua browser support CSS3!

untuk saat ini

vendor prefixes

-webkit- (Chrome, Safari, Opera versi terbaru)

-moz- (Firefox)

-ms- (Internet Explorer)

-o- (Opera versi terdahulu)

contoh

property CSS3 apa saja yang butuh vendor prefixes?

shouldiprefix.com

caniuse.com

http://pleeease.io/play/

emmet

filter

properti css3 yang digunakan untuk memberikan efek visual pada gambar, background

atau border

filter: <tipe-filter>;

tipe filter

blur brightness contrast saturate

grayscale sepia

hue-rotate

invert opacity

drop-shadow

filter: blur(px);

filter: brightness(# atau %);

filter: contrast(# atau %);

filter: saturate(# atau %);

filter: grayscale(# atau %);

filter: sepia(# atau %);

filter: hue-rotate(deg);

filter: invert(# atau %);

filter: opacity(# atau %);

filter: drop-shadow(sama seperti box-shadow);

http://html5-demos.appspot.com/static/css/filters/index.html

transform

properti transform memungkinkan kita dapat

memanipulasi format visual dari elemen HTML

2D & 3Dtransformasi

transform: <fungsi>;

fungsi transformasiscale

memperbesar / memperkecil

rotatememutar

skewmembuat condong / miring

translatemengubah posisi

transition

properti transition memungkinkan kita dapat

mengubah nilai dari property HTML secara halus

transition vs. animation

transition

transition

keadaan awal keadaan akhir

transisi

animation

animationkeyframe

keyframe #2

keyframe #3

keyframe #4

keyframe #5

#1

transition: [property] <durasi> [fungsi] [delay];

property

all

<nama property>

none

timing functionease

ease-inease-out

ease-in-outlinear

cubic-bezier(w,x,y,z)

sekian.

youtube.com/webprogrammingUNPAS

terimakasih.sandhikagalih@unpas.ac.id