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 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
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.
untuk mengatasinya, kita harus menambahkan vendor-prefixes.
vendor prefixes
-webkit- -moz- -ie- -o-
karena tiap browser memiliki karakteristik yang berbeda
tujuan: menulis kode yang ‘berjalan’ di- semua browser hampir
rgba()red green blue alpha
hsla()hue saturation lightness alpha
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
<x-offset> <y-offset> <blur> <color>
text-shadow
<inset> <x-offset> <y-offset> <blur> <spread> <color>
text-shadow
linear-gradientradial-gradient
bukan property css3, melainkan value untuk background-image
linear-gradient
sintaks sederhana
arahto bottomto topto leftto right
to left topto left bottomto right topto right bottom
http://lea.verou.me/css3patterns/
sintaks sederhana
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
posisimemindahkan pusat gradient
posisi-ytop
centerbottom
px
posisi-xleft
centerright
px
pusatnya berpindah ke sudut kiri atas
penggunaan font pada CSS
font-family
fallback
font harus ada di sistem operasi client / user.
Google Fontshttp://www.fonts.google.com
2
jika Google Fonts tidak cukup?
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.
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
sintaks khusus yang harus ditambahkan untuk beberapa
property CSS3
sintaks spesifik untuk tiap browser / vendor.
vendor prefixes
-webkit-<properti-css3>-moz-<properti-css3>-ms-<properti-css3>-o-<properti-css3>
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)
property CSS3 apa saja yang butuh vendor prefixes?
shouldiprefix.com
http://pleeease.io/play/
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
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
properti transition memungkinkan kita dapat
mengubah nilai dari property HTML secara halus
transition vs. animation
transition
keadaan awal keadaan akhir
transisi
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)
youtube.com/webprogrammingUNPAS