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

Scroll to Top