CSS 3

Modul Yang Dipelajari

Namun Tidak Semua Property Dapat Berjalan Baik di beberapa Browser

Untuk mengatasi hal tersebut, harus ditambahkan VENDOR-PREFIXES.
Vendor prefixes seperti

Module CSSS3
1. Border Radius
Untuk menumpulkan sudut sampai terbentuk lingkaran

 Menumpulkan dengan border radius: bisa px atau %

 Text allign center dan line heigt sesui tinggi untuk mengatur
elemen berada di tengah-tengah kotak/lingkaran tersebut.
 Jika tinggi dan lebar beda maka akan menjadi elips jika
menggunakan border radius.
 Border radius bisa diberikan untuk masing-masing sisi. Dengan
kombinasi properti top-bottom-right-left, atau dengan satu
instruksi border radius, dimulai dari kiri atas ke kanan atas
kemudian kanan bawah dan kiri bawah mngikuti arah jarum
jam.

2. Opacity
 Membuat elemen menjadi transparan dengan properti Opacity
dengan value 0-1.
 Opacity dapat diwariskan ke elemen di dalamnya.
  Elemen tersebut dapat diberikan opacity yang beda daripada
parentnya dimana opacity childnya merupaka prerentase dari
opacity parentnya.

 Parent solid dan child transparan masih memungkinkan,

namun tidak bisa membuat parent transparan dengan child
yang solid.
3. RGBa & HSLa
 RGBa : Red Green Blue alpha : RGB memberikan warna dan
alpha memberikan transparansi terhadap warna tersebut,
bukan pada elemennya, jadi tidak akan dibariskan pada
childnya, beda dengan opacity, sehingga kita dapat
memberikan transparancy ke parentnya dan childnya tetap
solid.

 Property rgba ditulis pada background color dengan 4 value

seperti diatas, alpha untuk transparansi warna memiliki value
0-1.
 RGBa Hanya bisa dipakai pada elemen yang mempunyai
background color.
  Property ;lain yang mirip adalah HSLa (hue saturation lightness
alpha) valuenya ada 4 : H roda warna (memilih warna) S
saturasi warna dengan persen, Lightness dengan perse dan
alpha.

4. Box Shadow
Memberi bayangan pada elemen deng property box-shadow dengan
4 buah value wajib dan 2 value opsional.

 Valuenya X-offset bayangan bergerak terhadap sumbu x

( kanan atau kiri dengan nilai -), satuan dalam px
 Valuenya Y-offset bayangan bergerak terhadap sumbu Y ( atas
nilai - atau bawah), satuan dalam px
 Blur bayangan dalam px
 Color: bisa hexa, atau rgba untuk sekalian mengatur
transparansinya.
 Spread emnentukan ukuran dari bayanganya, satuan dalam
px, jika ingin bayangan lebih kecil dapat diberikan nilai –
  Value inset membuat bayangan pindah ke dalam elemen.

 Multiple box-shadow dapat diberikan dengan jeda koma

antara shadow.

 Properti multiple shadow juga bisa digunakan untuk membuat

tampilan elemen seperti memiliki multiple border dengan
memainkan warna dan spread/sizenya saja.

5. Text Shadow
Memberi bayangan pada text, aplikasi sama seperti box-shadow
namun hanya memiliki 4 value saja. Bisa juga diberika multiple
shadow.
 Contoh text shdow bisa dilihat di:
[Link]

6. Gradient
Adalah tekhnik memberikan gradasi warna pada suatu element.
Dapat diberikan secara linear atau radial.
a. Linear Gradient
 Bukan merupakan property, melainkan value dari
background-image

 Default gradient warna dari atas ke bawah. Jika ingin

merubah arahnya bisa diberikan value lain dengan
ditambahka sudut atau arah diawal warna.

 Warna yang diberikan dengan kadar yang seimbang, jika

ingin merubah proporsi warnanya bisa ditambahkan value
colorstop disebelah warnanya.
b. Radial Gradient

 Tipe bisa ellipse atau circle (default ellipse)

 Jangkauan adalah jarak dari pusat gradient ke sisi terluarnya.

 Posisi adalah memindahkan psusat gradient dalam suatu

elemen, ditulis dengan At y x, x dan y adalah sumbunya
  Warna dg color stop
 Minimal dituliskan tipe dan warnanya. Atau ditulis semua agar
lebih kompleks
7. Font face
Merubah font di CSS bisa menggunakan 3 cara:
a. Font family
b. Google font ([Link] cari font yang
diinginkan, kemudian klik tanda (+), pilih penggunaan standar,
copy linknya dan paste di head setelah title, kemudian copy font
family di instruksi webnya dan paste di CSS font family.
c. @font-face (syntax ditulis di paling atas CSS)

Tempat mendownload font bisa dicari di

Cara penggunaanya

Cara lain
 pada web [Link] kita bisa memilih font yang sudah
tersedia cara penulisan sintaknya, kita bisa klik di font tersbut
kemudian klik pada menu webfontkit dan pilih format font
yang ingin di download (paling penting WOFF). Kemudian
extract dan pilih font type yang diinginkan. Copy file WOFFnya
dan letakkan di folder HTML dan CSS yang sama dan buka
 style CSS yang ada disana dan copy terus paste di style css
kita.

Setelah dicopy, hapus url yang tidak diperlukan, padadibawah ini

disisakan url WOFF saja

8. Web Font Generator

Mengubah tipe font TTF/OTF menjadi WOFF agar bisa digunakan
diweb dan mudah diload. Bisa menggunakan fasilitas dari
fontsquirrel di menu generator, kemudian upload file font otf/ttf yang
akan diubah menjadi woff, kemudian pilih seting optimal, agreement
checklist font boleh digunakan di web, kemudian download dan
simpan file web, juga akan ada syntax CSSnya tinggal di copas saja.

9. Vendor Prefix
Sintaks khusus yang harus ditambahkan pada beberapa properti
CSS3 agar dapat berfungsi baik dismua web browser dan sintaks
spesifik untuk tiap-tiap browser
 Untuk mengethui properti apa saja yang perlu diberikan prefix,
dapat dilihat di website: [Link] atau
[Link] atau [Link] atau bisa
menggunakan emmet, saat mengetik property, sebelum titik 2 dapat
ditab dan keluar vendor prefix.

10. Filter
Properti CSS3 yang bisa digunakan untuk memberikan efek visual
pada gambar, backgroung atau border.
Contoh : filter: <tipe-filter>;

Drop-shadow bisa digunakan untuk gambar dan tulisan (mempunyai

fungsi box-shadow dan text shadow sekaligus) serta dapat
 memberikan bayangan pada objekt yang tidak tranparan pada
sebuah gambar, lebih bagus dari box-shadow.

Bisa menggunakan photo shop untuk mnegetahui hasi editan

gambar.

11. Transform
Properti transform memungkinkan kita dapat memanipulasi format
visual dari elemen HTML
Contoj: transform:<fungsi>;

 Scale dengan value angka, pembesaran berapa kali. Dapat

dilakukan pembesaran ke sumbu Y dan X dengan value ditulis
terpisah ( scalex(1.5), scale Y(2)) atau digabung (scale (1.5,2))
 Rotate ditulis dengan deg(derajat), rotate(sumbu ditengah),
rotate x(sumbu ditengahhorizontal) rotate Y(sumbu ditengah
vertikal). Efek rotate bisa digabung ketiganya.
 Skew x dan y untuk memiringkin elemen
 Memindahkan/menggeser elemen ke sumbu x dan Y

12. Transition
Properti transition memungkinkan kita dapat mengubah nilai
properti HTML secara halus.
Contoh: transition:[property]<durasi> [fungsi] [delay];
 Durasi wajib diisi dengan satuan s/ms
 Property, jika tidak diisi berarti semua property ditransisi,
cotoh memilih 1 property
 Contoh properti yang bisa ditransisi

 Fungsi (timing function)

Ease: default cepat2lambat
Ease in: cepat dan melambat
Easeout: cepat saat diakhir
Ease in out: cepat diawal dan
akhir
Linear : konstan
Cubic-bezier, pergerakan bisa
dimodifikasi, dengan kurva yg
bisa diamati di inspect
element web.
Waktu sama dari durasi.

 Delay

Multiple transisi dengan delay

13. Animation
Memiliki beberapa keyframe yang membuatnya berbeda dengan
transisi. Sintaksnya:

Namun pada selektor harus ada propertynya dengan nbama yang

sama. Contoh: animation:name durasi fungsi;

Salah satu beda animasi dan transisi adalah kita sudah selesai,
elemen tersebut kembali ke posisi semula, beda dengan transisi,
tetap berada pada posisi akhir saat di hover.
Jika animasi ditaruh dielemet tidak dihover maka animasi akan
muncul begitu halaman dibuka.

Value pada properti animasi

 Name : harus sama dengan nama pada keyframe yang dibuat
 Durasi: dalam S/MS
 Timing-function mirip pada transisi
 Delay
 Iteration-count (angka/infinite) : pengulangan
 Direction (normal/reverse/alternate/alternate-reverse
 Fill mode (none/forward/backwards/both)
 Play state (running/pause)
