Daftar Property CSS

Property CSS
Property	Value/Nilai	Satuan	Keterangan
Font Styling
font-family	nama font, generic family		mengatur jenis font yang digunakan dan bisa memiliki beberapa value : = nama font : arial, times new roman, tahoma, georgia, verdana, calibri, impact, dll = generic family : san-serif, serif, dll.
font-size	angka	px, %, dan em	untuk mengatur ukuran font.
	lighter		membuat font menjadi lebih kurus/ramping.
	normal		membuat font yang memilki default bold, seperti heading, menjadi font normal.
	100-900		angka 100-900 membuat font menjadi lebih tebal, semakin mendekati 900, maka font nya akan menjadi lebih tebal.
	bold		membuat tulisan menjadi bold/tebal.
	bolder		membuat tulisan lebih tebal dari default nilai bold yang ada.
font-variant			mengatur font menjadi small-caps.
	normal		value ini membuat tulisan menjadi normal.
	small-caps		membuat sebuah text menjadi huruf besar semua, apabila sebuah sudah menajadi huruf besar, maka huruf tersebut akan menjadi lebih besar dari sebelumnya dan tentunya lebih besar dari huruf yang lain.
font-style			mengubah font menjadi bercetak miring.
	normal		membuat font yang memiliki default italic, menjadi normal.
	italic		membuat font menjadi miring.
	oblique		membuat font menjadi miring beberapa derajat kemiringan.
line-height	angka	px, %, dan em	mengatur spasi antar baris.
Text Styling
color			untuk memberikan warna pada tulisan.
	nama warna		nama warna dalam bahasa inggris seperti red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll.
	bilangan hexadecimal		nama warna dalam bilangan hexadecimal seperti #fff, #a1c9, #bb2222, #d3bcbc, dll.
	warna rgb		nama warna rgb seperti rgb( 23, 150, 255 ), rgb( 100, 255, 0), rgb( 59, 230, 170 ), dll.
text-align			mengatur format pada paragraph/text.
	left		mengatur rata kiri suatu paragraph. Nilai ini adalah nilai default dari property text-align.
	right		mengatur rata kanan suatu paragraph.
	center		mengatur rata tengah suatu paragraph.
	justify		mengatur rata kiri dan rata kanan suatu paragraph.
text-indent	angka	px dan %	memberikan indentasi/jarak pada awal paragraph/text.
text-decoration			mengatur dekorasi pada text.
	none		menghilangkan garis bawah yang ada pada sebuah tulisan. Contohnya seperti menghilangkan garis sebuah link. Karena hasil dari tag link, secara default menampilkan link tulisan dengan garis bawah.
	underline		memberi garis bawah pada sebiah tulisan.
	overline		memberikan garis di atas sebuah tulisan.
	line-through		memberi garis melewati text atau memberikan garis di tengah sebuah text.
text-transform			mengubah huruf menjadi huruf besar, huruf kecil atau huruf kapital ( huruf yang diawali dengan huruf besar, kemudian diikuti dengan huruf kecil ).
	none		membuat tulisan agar tidak berubah seperti awalnya.
	lowercase		merubah atau memaksa tulisan menjadi huruf kecil semua.
	uppercase		merubah atau memaksa tulisan menjadi huruf besar semua.
	capitalize		merubah atau memaksa tulisan menjadi huruf capitalize semua, yaitu tulisan dimana setiap awal katanya selalu huruf besar.
letter-spacing	angka	px dan %	mengatur spasi/jarak/tingkat kerenggangan antar huruf.
word-spacing	angka	px dan %	mengatur spasi/jarak antar kata.
Background Styling
background-color			untuk memberikan warna pada background.
	nama warna		nama warna dalam bahasa inggris seperti red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll.
	bilangan hexadecimal		nama warna dalam bilangan hexadecimal seperti #fff, #a1c9, #bb2222, #d3bcbc, dll.
	warna rgba		nama warna rgb seperti rgb( 23, 150, 255 ), rgb( 100, 255, 0), rgb( 59, 230, 170 ).
background-image			untuk menambahkan atau mengatur gambar yang digunakan untuk dijadikan background.
	url()		digunakan untuk memberitahu lokasi gambar yang akan kita pakai untuk background dan penulisan URL-nya berlaku relatif.
background-repeat			untuk melakukan pengulangan sumbu vertikal dan atau horizontal.
	repeat		untuk melakukan pengulangan baik terhadap sumbu x dan sumbu y background-repeat.
	repeat-x		untuk melakukan pengulangannya hanya terhadap sumbu x saja.
	repeat-y		untuk melakukan pengulangannya hanya terhadap sumbu y saja.
	no-repeat		untuk tidak melakukan pengulangan baik terhadap sumbu x atau sumbu y. Dengan menggunakan value ini, kita bisa menggunakan property background-position.
background-position			untuk mengatur posisi gambar baik secara sumbu horizontal ataupun vertikal.
	top left		untuk mengatur posisi gambar agar berada di posisi atas kiri.
	top right		untuk mengatur posisi gambar agar berada di posisi atas kanan.
	top center		untuk mengatur posisi gambar agar berada di posisi atas tengah.
	center left		untuk mengatur posisi gambar agar berada di posisi tengah kiri.
	center center		untuk mengatur posisi gambar agar berada di posisi tengah tengah.
	center right		untuk mengatur posisi gambar agar berada di posisi tengah kanan.
	buttom left		untuk mengatur posisi gambar agar berada di posisi bawah kiri.
	buttom center		untuk mengatur posisi gambar agar berada di posisi bawah tengah.
	buttom right		untuk mengatur posisi gambar agar berada di posisi bawah kanan.
	x% y%	%	untuk mengatur posisi gambar agar berada di posisi sesuai persentasi sumbu x dan y terhadap halaman website.
	x-pos y-pos	px	untuk mengatur posisi gambar agar berada di posisi sesuai sumbu x dan y yang ditentukan dengan angka bersatuan px.
Inheritance CSS
color	inherit		agar elemen anak dari HTML memilki nilai warna yang sama dengan elemen HTML yang dimilki parent-nya
font	inherit		agar elemen anak dari HTML memilki nilai font yang sama dengan elemen HTML yang dimilki parent-nya
letter-spacing	inherit		agar elemen anak dari HTML memilki nilai jarak spasi antar huruf yang sama dengan elemen HTML yang dimilki parent-nya
line-height	inherit		agar elemen anak dari HTML memilki nilai jarak antar baris yang sama dengan elemen HTML yang dimilki parent-nya
list-style	inherit		agar elemen anak dari HTML memilki nilai style daftar yang sama dengan elemen HTML yang dimilki parent-nya
text-align	inherit		agar elemen anak dari HTML memilki nilai posisi text yang sama dengan elemen HTML yang dimilki parent-nya
text-indent	inherit		agar elemen anak dari HTML memilki nilai posisi indentasi text yang sama dengan elemen HTML yang dimilki parent-nya
text-transform	inherit		agar elemen anak dari HTML memilki nilai perubahan text yang sama dengan elemen HTML yang dimilki parent-nya
visibility	inherit		agar elemen anak dari HTML memilki nilai visibility yang sama dengan elemen HTML yang dimilki parent-nya
white-space	inherit		agar elemen anak dari HTML memilki nilai warna yang sama dengan elemen HTML yang dimilki parent-nya
Dimensi Website
width	angka	px, %, in, cm, mm, pt, pc	untuk mengatur panjang sebuah elemen seperti div.
height	angka	px, %, in, cm, mm, pt, pc	untuk mengatur lebar sebuah elemen seperti div.
display			tampilan elemen HTML pada halaman website.
	block (default)		penjelasan lihat di notes.
	inline		penjelasan lihat di notes.
	inline-block		penjelasan lihat di notes.
	none		penjelasan lihat di notes.
overflow			untuk mengatasi kelebihan konten.
	visible		nilai atau value default dari property overflow ini. tanpa kita harus memberikan property css overflow, maka secara otomatis kelebihan konten yang ada akan diperlihatkan.
	auto		nilai yang kita bisa berikan pada pada property overflow ini, sehingga ketika suatu konten melebihi elemen parent-nya, maka secara otomatis css akan memberikan style scroll pada konten tersebut. Namun, bila kontennya mencukupi elemen pembungkusnya, maka scrollnya akan hilang.
	hidden		nilai yang kita bisa berikan pada property overflow ini, sehingga ketika suatu konten yang diberikan property overflow dengan nilai hidden, maka kelebihan konten yang melebihi elemen pembungkusnya akan disembunyikan, sehingga kita tidak bisa mengaksesnya.
	scroll		nilai dari property overflow yang perilakunya hampir mirip dengan nilai auto. Bedanya kalau kita menggunakan nilai property overflow dengan value scroll ini, maka baik ada kelebihan konten atau tidak ada kelebihan konten yang melebihi elemen parentnya, style scroll akan tetap ada.

Notes : inline 1. Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat. 2. Lebar dan tinggi elemennya sebesar konten yang ada didalamnya. 3. Kita tidak dapat mengatur tinggi dan lebar dari elemen inline tersebut, kecuali untuk elemen HTML yang display valuenya inline, itu bisa diatur tinggi dan lebarnya, contoh <img>, itu satu2 display HTML yang memiliki value display inline. 4. Margin dan Padding hanya memperngaruhi elemen secara horizontal, tidak vertikal. 5. Elemen HTML yang memiliki default displaynya inline : b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea. inline-block 1. Tidak ada elemen yang secara default memiliki property display inline-block. Maksudnya kalo ada, berarti telah diubah oleh usernya. 2. Kita haris ubah secara manual. 3. Perilaku dasarnya sama dengan inline, maksudnya apabila kita tambah elemen inline block, makanya hasilnya akan bertambah dibaris yang sama, bukan dibawahnya. 4. Elemen inline block ini bisa diatur tinggi dan lebarnya. Block 1. Elemen HTML yang secara default menambahkan baris baru ketika dibuat. 2. Jika tidak diatur lebarnya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parentnya. 3. Kita dapat mengatur tinggi dan lebarnya dari elemen block. 4. Di dalam elemen block, kita dapat menyimpan tag dengan elemen inline, inline block atau bahkan elemen block lagi. 5. Elemen HTML yang memiliki default displaynya block h1-h6, p, ol, ul, li, form, hr, div. None 1. Digunakan untuk menghilangkan sebuah elemen.

Box Model
margin	angka, auto	px, %	untuk mengatur jarak area atau bagian transparan yang berada di sekitar kotak.
margin-top	angka, auto	px, %	untuk mengatur jarak area atau bagian transparan yang berada di sekitar kotak bagian atas.
margin-right	angka, auto	px, %	untuk mengatur jarak area atau bagian transparan yang berada di sekitar kotak sebelah kanan.
margin-buttom	angka, auto	px, %	untuk mengatur jarak area atau bagian transparan yang berada di sekitar kotak bagian bawah.
margin-left	angka, auto	px, %	untuk mengatur jarak area atau bagian transparan yang berada di sekitar kotak sebelah kiri.
padding	angka	px, %	kebalikan dari margin, padding adalah area transparan di sekitar ( dalam ) kotak. Posisi padding berada di antara border dan konten.
padding-top	angka	px, %	untuk mengatur padding bagian atas.
padding-right	angka	px, %	untuk mengatur padding sebelah kanan.
padding-buttom	angka	px, %	untuk mengatur padding bagian bawah.
padding-left	angka	px, %	untuk mengatur padding sebelah kiri.
border	angka, warna dan tipe	px, %	batas di sekeliling content dan padding.
border-top	angka, warna dan tipe	px, %	untuk mengatur border bagian atas.
border-right	angka, warna dan tipe	px, %	untuk mengatur border bagian kanan.
border-buttom	angka, warna dan tipe	px, %	untuk mengatur border bagian bawah.
border-left	angka, warna dan tipe	px, %	untuk mengatur border bagian kiri.
box sizing	border-box		property untuk membantu browser menghitungkan nilai padding dan margin dengan ukuran kotak yang sudah ditentukan secara otomatis.
Float Dan Clearfix
float			Float merupakan properti pada css untuk mengatur posisi sebuah elemen. Sebuah elemen dapat dipaksa berada disebelah kiri atau kanan sebuah elemen dari parent/pembungkusnya dengan menggunakan properti ini.
	none		Property float pada setiap elemen HTML, memiliki nilai default none.
	right		elemen HTML yang diberikan nilai property float dengan nilai right, maka elemen HTML tersebut, posisinya akan berada di sebelah kiri element parent-nya atau elemen pembungkusnya.
	left		Ketika elemen HTML diberikan nilai property float dengan nilai left, artinya elemen HTML tersebut, posisinya akan berada disebelah kanan elemen parent-nya.
clear			memperbaiki dan membersihkan masalah float.
	right		nilai right ini digunakan untuk membersihkan property float right.
	left		nilai left ini digunakan untuk membersihkan property float left.
	both		nilai both ini digunakan untuk membersihkan float yang berada pada suatu elemen pembungkus atau containernya, dimana didalamnya ada elemen HTML yang menggunakan baik float left dan float right.
overflow			untuk mengatasi kelebihan konten.
	auto		nilai yang kita bisa berikan pada pada property overflow ini, sehingga ketika suatu konten melebihi elemen parent-nya, maka secara otomatis css akan memberikan style scroll pada konten tersebut. Namun, bila kontennya mencukupi elemen pembungkusnya, maka scrollnya akan hilang.
Position
position			mengatur tata letak setiap kotak elemen HTML yang ingin kita tampilkan pada halaman website sesuai dengan posisi yang kita mau tanpa harus mempengaruhi kotak elemen HTML disekitarnya.
	static		nilai default dari tiap-tiap elemen HTML ketika tidak diberi properti css position.
	relative		membuat suatu kotak elemen HTML keluar dari dimensi asalnya 1 tingkat.
	absolute		membuat suatu elemen kotak HTML akan bergerak relatif terhadap posisi dari element parentnya, selama elemen parentnya memiliki posisi yang juga non static. jadi element parentnya harus dibuat perilakunya out of flow juga atau keluar dari flow perilaku normalnya.
	fixed		membuat suatu elemen HTML akan bergerak relatif terhadap elemen windownya, tanpa mempedulikan elemen parentnya, meskipun elemen parentnya memiliki posisi non static.
top	angka	px	untuk memindahkan suatu elemen kotak HTML berapa px ke bawah dari posisi atas kotak tersebut.
left	angka	px	untuk memindahkan suatu elemen kotak HTML berapa px ke arah kiri dari posisi kotak semula.
bottom	angka	px	untuk memindahkan suatu elemen kotak HTML berapa px ke atas dari posisi bawah kotak tersebut.
right	angka	px	untuk memindahkan suatu elemen kotak HTML berapa px ke arah kanan dari posisi kotak semula.
z-index
z-index			untuk mengatur posisi suatu elemen, tepatnya untuk sumbu z yang akan diatur mendekati atau menjauhi indera penglihatan.
	angka		nilainya bisa positif atau negatif tergantung posisi yang kita inginkan dari nilai 1 - 9999. z-index : 9999; , artinya posisi suatu elemen kotak HTML berada paling depan dekat dengan penglihatan kita. z-index: -9999; , artinya posisi suatu elemen kotak HTML berada paling belakang.
Border Radius
border radius	angka	px, %	property ini digunakan untuk memberikan border radius untuk semua atau keempat sisi kotak seperti contoh diatas.
border-top-right-radius	angka	px, %	property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kanan atas sebuah kotak.
border-top-left-radius	angka	px, %	property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kiri atas sebuah kotak.
border-bottom-right-radius	angka	px, %	property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kanan bawah sebuah kotak.
border-bottom-left-radius	angka	px, %	property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kiri bawah sebuah kotak.
Opacity
opacity	angka	nothing, %	untuk mengatur transparansi sebuah elemen dengan nilai 0 - 1 atau 0% - 100%
RGBa Dan HSLa
background			untuk memberikan warna background dalam bentuk shorthand.
	rgba()		nama warna rgb (red, green, blue ) dari angka 0 - 255 dengan persentase transparansinya seperti rgb( 23, 150, 255, 60% ), rgb( 100, 255, 0, 0.8), dll.
	hsla ()		nama warna dengan persentasi warna hsla ( hue, saturation, lightness, dan alpha ) dengan persentase transparansinya seperti hsla(58, 94%, 68%, 0.60), hsla(18, 85%, 62%, .5) dll.
	hexadecimal		nama warna dalam bilangan hexadecimal seperti #fff, #a1c9, #bb2222, #d3bcbc, dll.
	name's color		nama warna dalam bahasa inggris seperti red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll.
background-color			untuk memberikan warna background.
	rgba()		nama warna rgb (red, green, blue ) dari angka 0 - 255 dengan persentase transparansinya seperti rgb( 23, 150, 255, 60% ), rgb( 100, 255, 0, 0.8), dll.
	hsla ()		nama warna dengan persentasi warna hsla ( hue, saturation, lightness, dan alpha ) dengan persentase transparansinya seperti hsla(58, 94%, 68%, 0.60), hsla(18, 85%, 62%, .5) dll.
	hexadecimal		nama warna dalam bilangan hexadecimal seperti #fff, #a1c9, #bb2222, #d3bcbc, dll.
	name's color		nama warna dalam bahasa inggris seperti red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll.
color			untuk memberikan warna pada element HTML pada text styling.
	rgba()		nama warna rgb (red, green, blue ) dari angka 0 - 255 dengan persentase transparansinya seperti rgb( 23, 150, 255, 60% ), rgb( 100, 255, 0, 0.8), dll.
	hsla ()		nama warna dengan persentasi warna hsla ( hue, saturation, lightness, dan alpha ) dengan persentase transparansinya seperti hsla(58, 94%, 68%, 0.60), hsla(18, 85%, 62%, .5) dll.
	hexadecimal		nama warna dalam bilangan hexadecimal seperti #fff, #a1c9, #bb2222, #d3bcbc, dll.
	name's color		nama warna dalam bahasa inggris seperti red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll.
Box Shadow
box-shadow			untuk memberikan bayangan pada elemen HTML.
	inset		value/nilai property box shadow untuk membuat bayangan ke arah dalam.
	x-offset ( dalam angka bisa -/+ )	px	value/nilai property box shadow yang berfungsi untuk mengatur jarak bayangan terhadap elemen HTML atau objek pada sumbu horizontal.
	y-offset ( dalam angka bisa -/+ )	px	value/nilai property box shadow yang berfungsi untuk mengatur jarak bayangan terhadap elemen HTML atau objek pada sumbu vertikal.
	blur ( dalam angka )	px	untuk memberikan blur pada bayangan suatu elemen/objek. Nilainya 0 sampai tak terhingga. Semakin besar nilainya semakin blur bayangannya. Sedangkan semakin kecil dan mendekati angka 0 maka bayangannya semakin solid.
	spread ( dalam angka bisa -/+ )	px	value/nilai pada property box shadow yang berfungsi untuk menambah ukuran dari bayanganya. nilai ini bisa diberikan angka positif dan negatif. Nilai positif yang semakin besar akan membuat ukuran sebuah bayangan menjadi lebih besar. Sedangkan nilai negatif yang semakin kecil akan membuat ukuran bayangan semakin kecil. Nilai spread dan blur saling berkorelasi. Jadi ketika sebuah elemen HTML atau objek diberikan kedua nilai tersebut, yang terjadi adalah bayangan akan membesar dahulu sesuai nilai/value spread dan setelah itu baru terjadi blur sesuai dengan nilai blur yang diberikan.
	color ( rgba, hsla, hexadecimal, name's colors )		untuk memberikan warna box shadow.
Text Shadow
text-shadow			untuk memberikan bayangan pada elemen HTML.
	x-offset ( dalam angka bisa -/+ )	px	value/nilai property Text shadow yang berfungsi untuk mengatur jarak bayangan terhadap Text pada sumbu horizontal.
	y-offset ( dalam angka bisa -/+ )	px	value/nilai property Text shadow yang berfungsi untuk mengatur jarak bayangan terhadap Text pada sumbu vertikal.
	blur ( dalam angka )	px	untuk memberikan blur pada bayangan suatu Text. Nilainya 0 sampai tak terhingga. Semakin besar nilainya semakin blur bayangannya. Sedangkan semakin kecil dan mendekati angka 0 maka bayangannya semakin solid.
	color ( rgba, hsla, hexadecimal, name's colors )		untuk memberikan warna text shadow.
Linear Dan Radial Gradient
background			untuk memberi warna pada background
	linear-gradient(<warna awal>, <warna akhir> )		teknik gradasi atau perubahan tingkat warna secara garis lurus dengan sederhana.
	linear-gradient(<warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n>)		teknik gradasi atau perubahan tingkat warna secara garis lurus dengan multiple color.
	linear-gradient(sudut\|arah, <warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n> )		teknik gradasi atau perubahan tingkat warna secara garis lurus dengan multiple color dan penentuan sudut : to bottom : dari atas ke bawah = 180deg, -180deg. to top : dari bawah ke atas = 360deg, -360deg. to right : dari kiri kekanan = 90deg, -270deg. to left : dari kanan kekiri = -90deg, 270deg. to left top : dari bawah kanan ke arah kiri atas = -45deg, 315deg ( diagonal ). to left bottom : dari kanan atas ke arah kiri bawah = -135deg, 225deg ( diagonal ). to right top : dari kiri bawah ke arah kanan atas = 45deg, -315deg ( diagonal ). to right bottom : dari kiri atas ke arah kanan bawah = 135deg, -225deg ( diagonal ). Notes : 1. Untuk warna kita bisa menggunakan name's color, hexadecimal, rgba, atau hsla maupun kombinasi dari keempatnya. 2. Untuk warna kita bisa menggunakan color stop untuk mengatur bobot gradasi di akhir warna dengan persentasi yang diinginkan, contoh : orange 30%.
	radial-gradient(<warna awal>, <warna akhir> )		teknik gradasi atau perubahan tingkat warna secara melingkar dengan sederhana.
	radial-gradient(<warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n>)		teknik gradasi atau perubahan tingkat warna secara melingkar dengan multiple color.
	radial-gradient{<tipe> <range> at<position-y> <position-x> , <warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n>}		teknik gradasi atau perubahan tingkat warna secara melingkar dengan multiple color dan penentuan tipe gradasi, range ( jangkauan gradasi ), dan posisi : Tipe: 1. circle 2. ellipse Range: 1. closest-corner adalah jarak dari pusat gradient ke sudut terdekat elemen. 2. closest-side adalah jarak dari pusat gradient ke sisi terdekat elemen. 3. farthest-corner jarak dari pusat gradient ke sudut terjauh dari element. 4. farthest-side adalah jarak dari pusat gradient ke sisi terjauh elemen. Position: 1. menggunakan angka dengan satu px atau persen. 2. menggunakan keyword untuk masing-masing sumbu vertikal dan horizontal : - vertikal (position-x): left, right, center - horizontal (position-y): top, bottom, center Notes : 1. Untuk warna kita bisa menggunakan name's color, hexadecimal, rgba, atau hsla maupun kombinasi dari keempatnya. 2. Untuk warna kita bisa menggunakan color stop untuk mengatur bobot gradasi di akhir warna dengan persentasi yang diinginkan, contoh : orange 30%.
background-image			untuk memberi warna pada background
	linear-gradient(<warna awal>, <warna akhir> )		teknik gradasi atau perubahan tingkat warna secara garis lurus dengan sederhana.
	linear-gradient(<warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n>)		teknik gradasi atau perubahan tingkat warna secara garis lurus dengan multiple color.
	linear-gradient(sudut\|arah, <warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n> )		teknik gradasi atau perubahan tingkat warna secara garis lurus dengan multiple color dan penentuan sudut : to bottom : dari atas ke bawah = 180deg, -180deg. to top : dari bawah ke atas = 360deg, -360deg. to right : dari kiri kekanan = 90deg, -270deg. to left : dari kanan kekiri = -90deg, 270deg. to left top : dari bawah kanan ke arah kiri atas = -45deg, 315deg ( diagonal ). to left bottom : dari kanan atas ke arah kiri bawah = -135deg, 225deg ( diagonal ). to right top : dari kiri bawah ke arah kanan atas = 45deg, -315deg ( diagonal ). to right bottom : dari kiri atas ke arah kanan bawah = 135deg, -225deg ( diagonal ). Notes : 1. Untuk warna kita bisa menggunakan name's color, hexadecimal, rgba, atau hsla maupun kombinasi dari keempatnya. 2. Untuk warna kita bisa menggunakan color stop untuk mengatur bobot gradasi di akhir warna dengan persentasi yang diinginkan, contoh : orange 30%.
	radial-gradient(<warna awal>, <warna akhir> )		teknik gradasi atau perubahan tingkat warna secara melingkar dengan sederhana.
	radial-gradient(<warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n>)		teknik gradasi atau perubahan tingkat warna secara melingkar dengan multiple color.
	radial-gradient{<tipe> <range> at<position-y> <position-x> , <warna ke-1>, <warna ke-2>, <warna ke-3>, ... <warna ke-n>}		teknik gradasi atau perubahan tingkat warna secara melingkar dengan multiple color dan penentuan tipe gradasi, range ( jangkauan gradasi ), dan posisi : Tipe: 1. circle 2. ellipse Range: 1. closest-corner adalah jarak dari pusat gradient ke sudut terdekat elemen. 2. closest-side adalah jarak dari pusat gradient ke sisi terdekat elemen. 3. farthest-corner jarak dari pusat gradient ke sudut terjauh dari element. 4. farthest-side adalah jarak dari pusat gradient ke sisi terjauh elemen. Position: 1. menggunakan angka dengan satu px atau persen. 2. menggunakan keyword untuk masing-masing sumbu vertikal dan horizontal : - vertikal (position-x): left, right, center - horizontal (position-y): top, bottom, center Notes : 1. Untuk warna kita bisa menggunakan name's color, hexadecimal, rgba, atau hsla maupun kombinasi dari keempatnya. 2. Untuk warna kita bisa menggunakan color stop untuk mengatur bobot gradasi di akhir warna dengan persentasi yang diinginkan, contoh : orange 30%.
Vendor Prefixes
-webkit-			vendor-prefixes yang digunakan untuk google chrome, safari, dan opera versi terbaru.
-moz-			vendor-prefixes yang digunakan untuk mozila firefox.
-ms-			vendor-prefixes yang digunakan untuk internet explorer.
-o-			vendor-prefixes yang digunakan untuk opera versi terdahulu.
Filter
filter			berfungsi untuk digunakan memberikan efek visual pada gambar, background atau border.
	blur	px	untuk memberikan efek mengaburkan atau remang-remang. Nilainya berisi angka 0 sampai nilai tidak terbatas.
	brightness	angka, %	untuk mengatur gelap dan terangnya suatu gambar. Untuk type brightness nilai defaultnya adalah 100% yang berarti sama dengan 1. Jadi kita bisa menggunakan nilai 1%, 10%, 50%, 100%, 200%, ... dan tak terhingga . Atau kita juga bisa menggunakan 0, 1, 1.2, 2, 3, 4, 4.6, 5, ... dan tak terhingga.
	contrast	angka, %	digunakan untuk memberikan dan menampilkan efek yang berbeda dari gambar aslinya.
	saturate	angka, %	untuk mengatur tingkat intensitas suatu warna atau nilai kejenuhannya.
	grayscale	angka, %	untuk memberikan efek ke abu-abuan.
	sepia	angka, %	memberikan efek sama seperty grayscale, namun efek grayscale-nya mengarah ke arah warna coklat tua kekuning-kuningan.
	hue-rotate ( deg )	deg	merotasi roda warna.
	invert	angka, %	untuk memberikan efek seperti negatif film.
	opacity	angka, %	untuk mengatur transparansi elemen HTML.
	drop-shadow ( sama seperti box shadow )		untuk memberikan bayangan pada elemen HTML. penjelasan lihat box-shadow, namun drop-shadow tidak mengenal inset dan spread.
Pseudo Element
content			isi property
	" "		string merupakan value property CSS content dalam bentuk string, bisa berupa tulisan atau entitas unicode yang biasanya digunakan untuk icon/glyph
	url()		berisi gambar
	open quote		untuk membuka quote
	close quote		untuk menutup quote
Transform
transform			untuk memanipulasi bentuk, ukuran, dan posisi suatu elemen HTML.
	scale(angka)		untuk memperbesar dan memperkecil ukuran suatu elemen HTML baik secara horizontal dan vertikal dengan proporsi yang sama.
	scaleX(angka)		untuk memperbesar dan memperkecil ukuran suatu elemen HTML secara horizontal saja.
	scaleY(angka)		untuk memperbesar dan memperkecil ukuran suatu elemen HTML secara vertikal saja.
	rotate(deg)	deg	untuk merotasi sebuah elemen HTML dengan sumbu pusatnya ada di titik paling tengah.
	rotateX(deg)	deg	untuk merotasi sebuah elemen HTML dengan sumbu pusatnya ada ditengah secara horizontal. Ibaratnya kalo kertas bujursangkar dilipat menjadi dua bagian sama rata, garis lipatannya adalah sumbunya.
	rotateY(deg)	deg	untuk merotasi sebuah elemen HTML dengan sumbu pusatnya ada ditengah secara vertikal. Ibaratnya kalo kertas bujursangkar dilipat menjadi dua bagian yang sama rata, garis lipatannya adalah sumbunya.
	skew(deg)	deg	untuk membuat elemen HTML menjadi cenderung miring/condong secara horizontal. Nilai positif akan membuat condong/miring ke kiri. Nilai negatif akan membuat sebuah elemen condong / miring ke kanan. skew = skewX
	skewX(deg)	deg	untuk membuat elemen HTML menjadi cenderung miring/condong secara horizontal. Nilai positif akan membuat condong/miring ke kiri. Nilai negatif akan membuat sebuah elemen condong / miring ke kanan. skew = skewX
	skewY(deg)	deg	untuk membuat elemen HTML menjadi cenderung miring/condong secara vertikal. Nilai positif akan membuat condong/miring ke arah atas bagian sisi sebelah kiri. Nilai negatif akan membuat sebuah elemen condong/miring ke arah atas bagian sisi sebelah kanan.
	translate(px)	px	untuk mengubah posisi suatu elemen HTML sama seperti fungsi property CSS position absolute dengan menggunakan property left apabila kita beri nilai positif. Hasil dari nilai translate(px) = translateX(px) apabila bernilai positif.
	translateX(px)	px	untuk mengubah posisi suatu elemen HTML secara horizontal. Hasil dari nilai translate(px) = translateX(px) apabila bernilai positif. Fungsi translateX(px) sama seperti menggunakan property CSS position absolute dengan menggunakan property CSS left dan right.
	translateY(px)	px	untuk mengubah posisi suatu elemen HTML secara vertikal. Fungsi translateY(px) sama seperti menggunakan property CSS position absolute dengan menggunakan property CSS top dan bottom.
Transition
transition			memiliki fungsi yang memungkinkan kita dapat mengubah dan memodifikasi secara halus elemen HTML dengan nilai dari properti CSS yang diberikan pada elemen HTML tersebut.
	durasi		parameter wajib yang ditulis pada baris kode property CSS3 transition. Durasi digunakan untuk menentukan berapa lama suatu elemen HTML berubah dari keadaan awal ke keadaan akhir. durasi bisa ditulis dengan angka yang memiliki satuan s / ms. s sama dengan second, sedangkan ms sama dengan millisecond atau seperseribu detik.
	property		untuk menentukan property apa saja yang akan diberikan transition. Value ini jika ada diletakkan sebelum durasi. Ada 5 jenis valuenya: 1. all : adalah parameter default. Artinya kalau tidak dituliskan pada baris kode property CSS3 transition, maka akan berperilaku memberi transition pada semua property yang ada pada keadaan akhir. Atau kita juga bisa menuliskan all sebelum parameter durasi, untuk menekankan bahwa kita akan memberikan transition pada property CSS3 di keadaan akhir. 2. <Nama property> : Penulisan parameter property kita bisa saja menuliskan property tertentu yang ingin kita transisikan. Contoh untuk sintak di atas, apabila kita ingin mentransisikan property margin-left saja. Maka nanti kotak tersebut akan bergerak dari kiri ke kanan secara halus. Sedangkan untuk property CSS transform dan background-color akan berubah secara instant. 3. None : Penulisan parameter property ini kita juga bisa menulisakan dengan nilai none yang artinya tidak ada property CSS pada keadaan akhir yang perlu ditransisikan.
	fungsi transisi / timing function:		untuk menentukan jenis pergerakan apa yang akan dilakukan saat terjadi transition
	ease		nilai default dari parameter timing function. Artinya apabila kita tidak menentukan jenis nilai timing function yang terjadi saat transition, maka yang akan berlaku timing function jenis ease.
	ease-in		jenis timing function dimana pergerakan awalnya pelan, makin lama makin cepat.
	ease-out		jenis timing function dimana pergerakan awalnya cepat, makin lama makin lambat.
	ease-in-out		jenis timing function dimana pergerakannya merupakan kombinasi ease-in dan ease-out.
	linear		jenis timing function dimana pergerakan mengatur kecepatannya seimbang searah garis lurus.
	cubic-bezier(w, x, y, z)		jenis timing function dimana arah pergerakkannya kita bisa atur dengan menggunakan sebuah kurva yang bisa menghasilkan sebuah persamaan.
	delay		parameter optional pada property CSS3 transition yang fungsinya untuk memberikan waktu tunggu sebelum menjalankan sebuah transition. Satuan yang digunakan sama seperti dengan durasi. Jadi kalau dalam satu baris kode, ada 2 durasi. Durasi yang ada di depan pasti durasi untuk melakukan transisi, sedangkan durasi yang selanjutnya atau ada dibelakang adalah untuk delay.
Animation
animation			memiliki fungsi yang memungkinkan kita dapat mengubah dan memodifikasi secara halus elemen HTML dengan nilai dari properti CSS yang diberikan pada elemen HTML tersebut.
	animation-name		adalah parameter yang wajib diisi sebagai nilai dari property CSS3 animation ini. Untuk pemberian nama bebas, asal sesuai dan sama dengan penggunaan nama pada @keyframes.
	animation-duration		parameter wajib yang ditulis pada baris kode property CSS3 animation. Durasi digunakan untuk menentukan berapa lama suatu elemen HTML berubah dalam beberapa keadaan dari awal sampai keadaan akhir. durasi bisa ditulis dengan angka yang memiliki satuan s / ms. s sama dengan second, sedangkan ms sama dengan millisecond atau seperseribu detik.
	animation-timing-function:		untuk menentukan jenis pergerakan apa yang akan dilakukan saat terjadi animasi.
	ease		nilai default dari parameter timing function. Artinya apabila kita tidak menentukan jenis nilai timing function yang terjadi saat transition, maka yang akan berlaku timing function jenis ease.
	ease-in		jenis timing function dimana pergerakan awalnya pelan, makin lama makin cepat.
	ease-out		jenis timing function dimana pergerakan awalnya cepat, makin lama makin lambat.
	ease-in-out		jenis timing function dimana pergerakannya merupakan kombinasi ease-in dan ease-out.
	linear		jenis timing function dimana pergerakan mengatur kecepatannya seimbang searah garis lurus.
	cubic-bezier(w, x, y, z)		jenis timing function dimana arah pergerakkannya kita bisa atur dengan menggunakan sebuah kurva yang bisa menghasilkan sebuah persamaan.
	animation-delay		parameter optional pada property CSS3 transition yang fungsinya untuk memberikan waktu tunggu sebelum menjalankan sebuah transition. Satuan yang digunakan sama seperti dengan durasi. Jadi kalau dalam satu baris kode, ada 2 durasi. Durasi yang ada di depan pasti durasi untuk melakukan transisi, sedangkan durasi yang selanjutnya adalah untuk delay. Satuannya kita bisa gunakan s ( second ) dan ms ( millisecond ). Jadi ketika kita ingin menggunakan 2 durasi ini, perhatikan perhitungan waktunya.
	animation-iteration-count		untuk menentukan berapa kali pengulangan. Kita bisa menggunakan angka atau keyword dengan nilai ‘infinite’ apabila animasi yang ingin dilakukan terus menerus berulang. Defaultnya 1x pengulangan, apabila kita tidak menentukan berapa jumlah iteration count-nya. Kita bisa menggunakan angka 1, 2, 3, 4, 10, … dan tak terhingga atau nilai dengan keyword infinite untuk berkreasi dengan menggunakan property CSS3 animation ini.
	animation-direction:		parameter untuk mengatur arah pergerakan animasi. Apabila kita tidak menentukan parameter nilai tersebut, maka nilai yang berlaku untuk parameter ini adalah normal, yang artinya akan bergerak dari awal ke akhir.
	normal		nilai default dari parameter direction ini, arah pergerakannya dari awal ke akhir.
	reverse		nilai yang arah pergerakan animasinya dari akhir ke awal. Nilai parameter reverse adalah kebalikan dari nilai normal, sebagai nilai defaultnya.
	alternate		nilai yang arah pergerakannya merupakan kombinasi atau berganti-ganti, tapi arah jalan pergerakannya tetap dari posisi awal. Jadi pergerakannya dari awal ke akhir, kemudian dari akhir ke awal, kemudian dari awal ke akhir, dan berganti-ganti seperti itu terus sampai berapa banyak nilai parameter iteration-count yang ditentukan. Pergerakan dengan kombinasi ini adalah pergerakan yang paling natural.
	alternate-reverse		arah pergerakan yang berkebalikan dengan nilai alternate. Apabila menggunakan pergerakan dengan nilai alternate-reverse, maka kombinasi pergerakkannya dimulai dari akhir. Jadi pergerakannya dari akhir ke awal, kemudian dari awal ke akhir, kemudian dari akhir ke awal, dan berganti-ganti seperti itu terus sampai berapa banyak nilai parameter iteration-count yang ditentukan.
	animation-fill-mode:		parameter untuk menentukan akhir dari animasi terjadi. Apabila tidak ditentukan maka nilai defaultnya adalah none, yang artinya animasi berakhir pada posisi awal.
	none		nilai default dari parameter fill mode dimana animasi akan berakhir pada posisi awal.
	forwards		nilai dari fill mode dimana animasi akan berakhir pada posisi akhir animasi. Jadi apabila kita tidak ingin animasinya langsung loncat ke awal, kita bisa menggunakan nilai forwards untuk parameter fill-mode.
	backwards		nilai dari fill mode dimana animasi akan berakhir pada posisi awal.
	both		nilai fill mode dimana animasi akan berakhir pada posisi akhir ulangan baik itu di awal atau di akhir
	animation-play-state:		untuk menentukan jalan atau tidaknya suatu animasi
	running		default animasi yang terjadi apabila nilai parameter tidak ditentukan, maka nilainya adalah running sehingga animasi jalan secara otomatis
	paused		animasi tidak akan jalan