Kode HTML & CSS
| Tag HTML | Fungsi Dan Keterangan |
|---|---|
| <!DOCTYPE html> | memberi tahu browser, versi HTML berapa yang akan digunakan. Untuk kode ini berarti kita akan menggunakan versi HTML 5 |
| <!-- --> | untuk membuat komentar di dalam source code |
| <a></a> | anchor untuk membungkus tag link |
| <abbr></abbr> | untuk mendefinisikan sebuah singkatan atau akronim |
| <acronym></acronym> | tag ini tidak didukung pada HTML5, maka gunakan <abbr> sebagai penggantinya pada HTML5 untuk mendefinisikan akronim |
| <address></address> | untuk mendefinisikan informasi kontak penulis atau pemilik dokumen |
| <applet></applet> | tag ini tidak didukung pada HTML5. Gunakan <embed> atau <object> sebagai penggantinya pada HTML5. Mendefinisikan embedded applet |
| <area> | mendefinisikan sebuah area didalam image-map |
| <article></article> | untuk mendefinisikan sebuah artikel |
| <aside></aside> | untuk mendefinisikan selain dari konten halaman |
| <audio></audio> | mendefinisikan konten suara |
| <b></b> | untuk membuat text bercetak tebal |
| <base> | menentukan basis URL atau target untuk semua URL relatif dalam dokumen |
| <basefont> | tag ini tidak didukung pada HTML5, maka gunakan CSS sebagai penggantinya pada HTML5 untuk menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen |
| <bdi></bdi> | isolat bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu sendiri |
| <bdo></bdo> | mengganti arah teks saat ini |
| <big></big> | tag ini tidak didukung pada HTML5, gunakan CSS sebagai penggantinya pada HTML5 untuk mendefinisikan teks besar |
| <blockquote></blockquote> | untuk mendefinisikan bagian yang dikutip dari sumber lain |
| <body></body> | tempat menulis isi website yang akan ditampilkan di browser |
| <br> | berfungsi untuk menambahkan baris |
| <button></button> | digunakan untuk membuat tombol pada halaman website |
| <canvas></canvas> | digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript) |
| <caption></caption> | mendefinisikan caption dari sebuah tabel |
| <center></center> | tag ini tidak didukung pada HTML5, gunakan CSS sebagai penggantinya pada HTML5 untuk mendefinisikan teks yang posisinya berada ditengah |
| <cite></cite> | tag ini untuk mendefinisikan judul karya |
| <code></code> | tag yang digunakan untuk mendefinisikan bagian dari code pada komputer |
| <col> | menentukan sifat kolom untuk setiap kolom dalam <colgroup> element |
| <colgroup></colgroup> | Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat |
| <datalist></datalist> | menentukan daftar pilihan yang telah ditentukan untuk kontrol input |
| <dd><dd> | mendeskripsikan terminologinya |
| <del></del> | untuk mendefinisikan teks yang telah dihapus dari dokumen |
| <details></details> | untuk mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan |
| <dfn></dfn> | merupakan contoh untuk mendefinisikan istilah |
| <dialog></dialog> | untuk mendefinisikan sebuah kotak dialog atau jendela |
| <dir></dir> | tag ini tidak didukung pada HTML5, maka gunakan <ul> sebagai penggantinya pada HTML5 untuk mendefinisikan daftar direktori |
| <div></div> | untuk mendefinisikan sebuah bagian dalam sebuah dokumen |
| <dl></dl> | untuk memberitahu HTML ketika kita ingin membuat list definisi yang didalamnya ada terminologi dan deskripsinya |
| <dt><dt> | merepresentasikan terminologinya |
| <em></em> | untuk memberi penekanan pada sebuah text, hasilnya text bercetak miring |
| <embed></embed> | mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi |
| <fieldset></fieldset> | sebuah grup untuk pengelompokan dalam form |
| <fieldset></fieldset> | sebuah grup untuk pengelompokan dalam form |
| <figcaption></figcaption> | mendefinisikan sebuah caption untuk <figure> element |
| <figure></figure> | menentukan konten mandiri |
| <font></font> | tag ini tidak didukung pada HTML5, gunakan CSS sebagai penggantinya pada HTML5 untuk mendefinisikan font, warna, dan ukuran dari sebuah teks |
| <footer></footer> | untuk mendefinisikan sebuah grup footer didalam sebuah dokumen |
| <form></form> | untuk membuat/membungkus elemen form pada halaman website |
| <frame></frame> | tag ini tidak didukung pada HTML5, fungsi tag ini adalah untuk mendefinisikan sebuah jendela (frame) dalam sebuah frameset |
| <frameset></frameset> | tag ini tidak didukung pada HTML5, fungsi dari tag ini adalah untuk mendefinisikan sebuah satu set frames |
| <h1></h1> | membuat judul dengan besar h1 |
| <h2></h2> | membuat judul dengan besar h2 |
| <h3></h3> | membuat judul dengan besar h3 |
| <h4></h4> | membuat judul dengan besar h4 |
| <h5></h5> | membuat judul dengan besar h5 |
| <h6></h6> | membuat judul dengan besar h6 |
| <head></head> | bagian yang berisi judul website, style, script, dan metadata |
| <header></header> | untuk mendefinisikan sebuah header untuk dokumen atau bagian dokumen |
| <hr> | untuk menambahkan garis horizontal |
| <html></html> | sebagai struktur dasar pembuatan halaman website |
| <i></i> | untuk membuat text bercetak miring |
| <iframe></iframe> | untuk mendefinisikan sebuah frame inline |
| <img> | tag untuk menampilkan gambar pada halaman website |
| <input> | Sesuatu data yang dimasukkan user baik itu dalam bentuk textfill, pilihan yang ada di combo box atau di radio button, atau hanya dengan menekan tombol instruksi di bagian tertentu form untuk menentukan suatu nilai tertentu |
| <ins></ins> | untuk mendefinisikan teks yang telah dimasukkan ke dalam dokumen |
| <kbd></kbd> | untuk mendefinisikan input keyboard |
| <keygen></keygen> | untuk mendefinisikan sebuah key-pair generator field (for forms) |
| <label></label> | digunakan untuk memberi nama dan menandai setiap elemen input dengan menggunakan atribut for yang akan disamakan dengan nama id |
| <li></li> | menunjukkan daftar item yang akan kita buat |
| <link> | tag untuk menghubungkan satu link untuk pemberian style pada halaman website |
| <main></main> | untuk menentukan konten utama dari dokumen |
| <map></map> | untuk mendefinisikan client-side image-map |
| <mark></mark> | untuk mendefinisikan ditandai/teks yang disorot |
| <menu></menu> | untuk mendefinisikan daftar/menu perintah |
| <menuitem></menuitem> | untuk mendefinisikan item perintah/menu bahwa pengguna dapat memanggil dari menu popup |
| <meta> | mendeskripsikan website kita agar search engine google bisa dengan mudah mengidentifikasi website kita. |
| <meter></meter> | untuk mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge) |
| <nav></nav> | mendefinisikan navigasi untuk links |
| <noframes></noframes> | tag ini tidak didukung pada HTML5, fungsi tag ini adalah untuk mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame |
| <noscript></noscript> | untuki mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi klien |
| <object></object> | untuk mendefinisikan sebuah embedded objek |
| <ol></ol> | untuk memberi tahu HTML bahwa list yang akan dibuat adalah list terurut |
| <optgroup></optgroup> | untuk mendefinisikan sekelompok opsi terkait dalam daftar drop-down |
| <option></option> | untuk mendefinisikan sebuah option dari sebuah daftar drop-down |
| <output></output> | untuk mendefinisikan hasil dari sebuah perhitungan |
| <p></p> | untuk membungkus/membuat paragraph |
| <param> | untuk mendefinisikan sebuah parameter untuk sebuah object |
| <pre></pre> | untuk mendefinisikan teks preformatted |
| <progress> | untuk menggambarkan kemajuan tugas |
| <q></q> | untuk mendefinisikan sebuah kutipan singkat |
| <rp></rp> | untuk mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby |
| <rt></rt> | untuk mendefinisikan sebuah penjelasan/pengucapan karakter (untuk tipografi Asia Timur) |
| <ruby></ruby> | untuk mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur) |
| <s></s> | untuk mendefinisikan teks yang sudah tidak benar |
| <samp></samp> | untuk mendefinisikan contoh output dari program komputer |
| <script></script> | agar website kita bisa tampil secara lebih menarik, interaktif dan cerdas |
| <section></section> | untuk mendefinisikan sebuah grup section didalam sebuah dokumen |
| <select></select> | memilih suatu nilai data, biasanya dipakai untuk membuat sebuah combo box / list box / drop down. Dan untuk membungkus tag <option> |
| <small></small> | untuk mendefinisikan teks kecil |
| <source> | untuk mendefinisikan lebih dari satu sumber media untuk elemen media seperti (<video> dan <audio>) |
| <span></span> | biasa digunakan dalam mengelompokkan text |
| <strike></strike> | tag ini tidak didukung pada HTML5, maka gunakan <del> atau <s> sebagai penggantinya pada HTML5 untuk mendefinisikan teks strikethrough ( garis tengah melalui text ) |
| <strong></strong> | untuk memberikan penekanan yang lebih kuat dari tag <em>, hasilnya text bercetak tebal |
| <style></style> | bagian untuk memberi style atau menghias halaman website |
| <sub></sub> | untuk mendefinisikan teks subscripted |
| <summary></summary> | untuk mendefinisikan sebuah judul yang terlihat dalam sebuah <details> element |
| <sup></sup> | untuk mendefinisikan teks superscripted |
| <table></table> | untuk membungkus dan membuat tabel dalam halaman website |
| <tbody></tbody> | untuk membuat body pada jenis tabel komplex. Untuk isinya sama seperti tabel sederhana |
| <td></td> | untuk membuat table kolom/data |
| <textarea></textarea> | mirip dengan textfill. Kalo textfill biasanya hanya satu kolom input saja, sedangkan kalo textarea ini biasanya area kolomnya lebih besar sehingga tulisan yang bisa dinput dan disimpan dalam textarea ini lebih banyak |
| <tfoot></tfoot> | untuk membuat grup isi footer dalam sebuah tabel |
| <tfoot></tfoot> | untuk membuat grup isi footer dalam sebuah tabel |
| <th></th> | untuk membuat header horizontal yang berada di dalam tag <tr></tr>. Di dalam tag <th> ini pada bagian body berisi tag <td> |
| <thead></thead> | untuk head pada jenis tabel komplex |
| <time></time> | untuk mendefinisikan sebuah tanggal atau waktu |
| <title></title> | judul halaman website yang tampil ditab browser |
| <tr></tr> | untuk membuat tabel baris |
| <track></track> | untuk mendefinisikan trek teks untuk elemen media yang (<video> dan <audio>) |
| <track></track> | untuk mendefinisikan trek teks untuk elemen media yang (<video> dan <audio>) |
| <tt></tt> | tag ini tidak didukung pada HTML5, karena itu gunakan CSS sebagai penggantinya pada HTML5 untuk mendefinisikan teletype teks |
| <u></u> | untuk membuat text bercetak garis bawah |
| <ul></ul> | untuk memberi tahu HTML bahwa list yang akan dibuat adalah list tidak terurut |
| <var></var> | Mendefinisikan sebuah variable |
| <video></video> | untuk mendefinisikan sebuah video atau movie |
| <wbr> | untuk mendefinisikan sebuah kemungkinan line-break |
| 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 | ||
Post a Comment for "Kode HTML & CSS"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan