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 nomor px, %, & em buat mengatur ukuran font. Lighter menciptakan font menjadi lebih kurus/ramping. Normal membuat font yg memilki default bold, seperti heading, sebagai font normal. 100-900 angka 100-900 membuat font menjadi lebih tebal, semakin mendekati 900, maka font nya akan sebagai lebih tebal. Bold membuat goresan pena sebagai bold/tebal. Bolder membuat goresan pena lebih tebal berdasarkan default nilai bold yang ada. Font-variant mengatur font sebagai small-caps. Normal value ini menciptakan goresan pena sebagai normal. Small-caps membuat sebuah text sebagai huruf akbar semua, bila sebuah telah menajadi huruf besar , maka alfabet tadi akan sebagai lebih besar dari sebelumnya & tentunya lebih akbar dari huruf yang lain. Font-style membarui font sebagai bercetak miring. Normal membuat font yg mempunyai default italic, menjadi normal. Italic membuat font sebagai miring. Oblique membuat font sebagai miring beberapa derajat kemiringan. Line-height angka px, %, dan em mengatur spasi antar baris. Text Styling color buat memberikan warna dalam goresan pena. Nama warna nama warna dalam bahasa inggris misalnya 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 homogen kiri suatu paragraph. Nilai ini adalah nilai default dari property text-align. Right mengatur rata kanan suatu paragraph. Center mengatur homogen tengah suatu paragraph. Justify mengatur homogen kiri & rata kanan suatu paragraph. Text-indent nomor px dan % menaruh indentasi/jeda pada awal paragraph/text. Text-decoration mengatur dekorasi dalam text. None menghilangkan garis bawah yang ada pada sebuah tulisan. Contohnya seperti menghilangkan garis sebuah link. Karena hasil menurut tag link, secara default menampilkan link tulisan menggunakan garis bawah. Underline memberi garis bawah dalam sebiah goresan pena. Overline memberikan garis di atas sebuah tulisan. Line-through memberi garis melewati text atau memberikan garis di tengah sebuah text. Text-transform mengubah huruf sebagai huruf akbar, alfabet mini atau alfabet modal ( alfabet yg diawali dengan alfabet akbar, lalu diikuti menggunakan alfabet mini ). None menciptakan tulisan agar nir berubah misalnya awalnya. Lowercase merubah atau memaksa tulisan menjadi huruf mini seluruh. Uppercase merubah atau memaksa tulisan sebagai alfabet besar semua. Capitalize merubah atau memaksa goresan pena menjadi huruf capitalize semua, yaitu tulisan dimana setiap awal ucapnya selalu alfabet akbar. Letter-spacing nomor px & % mengatur spasi/jarak/tingkat kerenggangan antar huruf. Word-spacing angka px & % mengatur spasi/jarak antar istilah. Background Styling background-color buat menaruh warna pada background. Nama warna nama rona dalam bahasa inggris misalnya red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll. Sapta hexadecimal nama rona dalam sapta hexadecimal misalnya #fff, #a1c9, #bb2222, #d3bcbc, dll. Rona rgba nama warna rgb seperti rgb( 23, 150, 255 ), rgb( 100, 255, 0), rgb( 59, 230, 170 ). Background-image buat menambahkan atau mengatur gambar yg dipakai buat dijadikan background. Url() digunakan buat memberitahu lokasi gambar yg akan kita gunakan buat background & penulisan URL-nya berlaku nisbi. Background-repeat buat melakukan pengulangan sumbu vertikal dan atau horizontal. Repeat buat melakukan pengulangan baik terhadap sumbu x dan sumbu y background-repeat. Repeat-x untuk melakukan pengulangannya hanya terhadap sumbu x saja. Repeat-y buat melakukan pengulangannya hanya terhadap sumbu y saja. No-repeat buat nir melakukan pengulangan baik terhadap sumbu x atau sumbu y. Dengan menggunakan value ini, kita bisa menggunakan property background-position. Background-position buat mengatur posisi gambar baik secara sumbu horizontal ataupun vertikal. Top left untuk mengatur posisi gambar supaya berada pada posisi atas kiri. Top right buat mengatur posisi gambar agar berada pada posisi atas kanan. Top center buat mengatur posisi gambar supaya berada pada posisi atas tengah. Center left untuk mengatur posisi gambar supaya berada pada posisi tengah kiri. Center center buat mengatur posisi gambar agar berada di posisi tengah tengah. Center right buat mengatur posisi gambar agar berada pada posisi tengah kanan. Buttom left buat mengatur posisi gambar supaya berada pada posisi bawah kiri. Buttom center buat mengatur posisi gambar agar berada pada posisi bawah tengah. Buttom right buat mengatur posisi gambar agar berada di posisi bawah kanan. X% y% % buat mengatur posisi gambar agar berada di posisi sinkron persentasi sumbu x dan y terhadap page website. X-pos y-pos px buat mengatur posisi gambar supaya berada pada posisi sinkron sumbu x & y yg dipengaruhi dengan nomor bersatuan px. Inheritance CSS color inherit supaya elemen anak berdasarkan HTML memilki nilai warna yang sama menggunakan elemen HTML yg dimilki parent-nya font inherit agar elemen anak berdasarkan HTML memilki nilai font yg sama dengan elemen HTML yang dimilki parent-nya letter-spacing inherit agar elemen anak menurut HTML memilki nilai jeda spasi antar huruf yang sama dengan elemen HTML yang dimilki parent-nya line-height inherit agar elemen anak berdasarkan HTML memilki nilai jeda antar baris yang sama dengan elemen HTML yg dimilki parent-nya list-style inherit agar elemen anak berdasarkan HTML memilki nilai style daftar yg sama dengan elemen HTML yg dimilki parent-nya text-align inherit supaya elemen anak dari HTML memilki nilai posisi text yg sama menggunakan elemen HTML yang dimilki parent-nya text-indent inherit supaya elemen anak menurut HTML memilki nilai posisi indentasi text yang sama dengan elemen HTML yang dimilki parent-nya text-transform inherit agar elemen anak menurut HTML memilki nilai perubahan text yang sama dengan elemen HTML yg dimilki parent-nya visibility inherit agar elemen anak berdasarkan HTML memilki nilai visibility yang sama dengan elemen HTML yg dimilki parent-nya white-space inherit supaya elemen anak dari HTML memilki nilai warna yg sama dengan elemen HTML yang dimilki parent-nya Dimensi Website width nomor px, %, in, cm, mm, pt, pc buat mengatur panjang sebuah elemen misalnya div. Height angka px, %, in, cm, mm, pt, pc buat mengatur lebar sebuah elemen seperti div. Display tampilan elemen HTML dalam laman website. Block (default) penerangan lihat pada notes. Inline penjelasan lihat pada notes. Inline-block penerangan lihat pada notes. None penjelasan lihat pada notes. Overflow untuk mengatasi kelebihan konten. Visible nilai atau value default berdasarkan property overflow ini. Tanpa kita harus memberikan property css overflow, maka secara otomatis kelebihan konten yg terdapat akan diperlihatkan. Auto nilai yang kita sanggup berikan pada pada property overflow ini, sebagai akibatnya waktu suatu konten melebihi elemen parent-nya, maka secara otomatis css akan menaruh style scroll pada konten tadi. Namun, jika kontennya mencukupi elemen pembungkusnya, maka scrollnya akan hilang. Hidden nilai yg kita bisa berikan pada property overflow ini, sehingga ketika suatu konten yg diberikan property overflow menggunakan nilai hidden, maka kelebihan konten yang melebihi elemen pembungkusnya akan disembunyikan, sebagai akibatnya kita tidak mampu mengaksesnya. Scroll nilai dari property overflow yang perilakunya hampir seperti dengan nilai auto. Bedanya bila kita memakai nilai property overflow menggunakan value scroll ini, maka baik terdapat kelebihan konten atau tidak ada kelebihan konten yang melebihi elemen parentnya, style scroll akan tetap ada.

Notes :

inline

1. Elemen HTML yang secara default nir menambahkan baris baru saat dibentuk.

Dua. Lebar & tinggi elemennya sebanyak konten yg terdapat 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, nir vertikal.

5. Elemen HTML yg mempunyai 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.

Dua. Kita haris ubah secara manual.

Tiga. Perilaku dasarnya sama menggunakan inline, maksudnya apabila kita tambah elemen inline block, makanya hasilnya akan bertambah dibaris yg sama, bukan dibawahnya.

4. Elemen inline block ini sanggup diatur tinggi dan lebarnya.

Block

1. Elemen HTML yang secara default menambahkan baris baru saat dibuat.

Dua. Apabila tidak diatur lebarnya, maka lebar default menurut elemen block akan memenuhi lebar berdasarkan browser / parentnya.

3. Kita bisa mengatur tinggi & lebarnya dari elemen block.

4. Di pada elemen block, kita dapat menyimpan tag menggunakan elemen inline, inline block atau bahkan elemen block lagi.

Lima. Elemen HTML yg mempunyai 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 : berdasarkan atas ke bawah = 180deg, -180deg.

To top : menurut bawah ke atas = 360deg, -360deg.

To right : menurut kiri kekanan = 90deg, -270deg.

To left : menurut kanan kekiri = -90deg, 270deg.

To left top : menurut bawah kanan ke kiri atas = -45deg, 315deg ( diagonal ).

To left bottom : dari kanan atas ke kiri bawah = -135deg, 225deg ( diagonal ).

To right top : menurut kiri bawah ke arah kanan atas = 45deg, -315deg ( diagonal ).

To right bottom : menurut kiri atas ke arah kanan bawah = 135deg, -225deg ( diagonal ).

Notes :

1. Untuk rona kita mampu menggunakan name's color, hexadecimal, rgba, atau hsla juga 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 merupakan jeda berdasarkan pusat gradient ke sudut terdekat elemen.

2. Closest-side merupakan jarak berdasarkan sentra gradient ke sisi terdekat elemen.

Tiga. Farthest-corner jarak berdasarkan sentra gradient ke sudut terjauh dari element.

4. Farthest-side merupakan jarak berdasarkan pusat gradient ke sisi terjauh elemen.

Position:

1. Memakai angka dengan satu px atau persen.

2. Menggunakan keyword buat masing-masing sumbu vertikal dan horizontal :

- vertikal (position-x): left, right, center

- horizontal (position-y): top, bottom, center

Notes :

1. Untuk rona kita mampu menggunakan name's color, hexadecimal, rgba, atau hsla juga 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 : berdasarkan atas ke bawah = 180deg, -180deg.

To top : menurut bawah ke atas = 360deg, -360deg.

To right : menurut kiri kekanan = 90deg, -270deg.

To left : menurut kanan kekiri = -90deg, 270deg.

To left top : menurut bawah kanan ke kiri atas = -45deg, 315deg ( diagonal ).

To left bottom : dari kanan atas ke kiri bawah = -135deg, 225deg ( diagonal ).

To right top : menurut kiri bawah ke arah kanan atas = 45deg, -315deg ( diagonal ).

To right bottom : menurut kiri atas ke arah kanan bawah = 135deg, -225deg ( diagonal ).

Notes :

1. Untuk rona kita mampu menggunakan name's color, hexadecimal, rgba, atau hsla juga kombinasi dari keempatnya.

Tipe:

1. Circle

2. Ellipse

Range:

1. Closest-corner merupakan jeda berdasarkan pusat gradient ke sudut terdekat elemen.

2. Closest-side merupakan jarak berdasarkan sentra gradient ke sisi terdekat elemen.

Tiga. Farthest-corner jarak berdasarkan sentra gradient ke sudut terjauh dari element.

4. Farthest-side merupakan jarak berdasarkan pusat gradient ke sisi terjauh elemen.

Position:

1. Memakai angka dengan satu px atau persen.

2. Menggunakan keyword buat masing-masing sumbu vertikal dan horizontal :

- vertikal (position-x): left, right, center

- horizontal (position-y): top, bottom, center

Notes :

1. Untuk rona kita mampu menggunakan name's color, hexadecimal, rgba, atau hsla juga kombinasi dari keempatnya.

Dua. Untuk warna kita mampu menggunakan color stop untuk mengatur bobot gradasi pada akhir warna dengan persentasi yang diinginkan, contoh : orange 30%. Vendor Prefixes -webkit- vendor-prefixes yang dipakai buat google chrome, safari, dan opera versi terkini. -moz- vendor-prefixes yg digunakan untuk mozila firefox. -ms- vendor-prefixes yg dipakai buat internet explorer. -o- vendor-prefixes yg digunakan buat opera versi terdahulu. Filter filter berfungsi buat dipakai menaruh pengaruh visual pada gambar, background atau border. Blur px buat menaruh dampak mengaburkan atau remang-remang. Nilainya berisi angka 0 hingga nilai nir terbatas. Brightness nomor , % buat mengatur gelap dan terangnya suatu gambar. Untuk type brightness nilai defaultnya adalah 100% yang berarti sama dengan 1. Jadi kita mampu menggunakan nilai 1%, 10%, 50%, 100%, 200%, ... & tidak terhingga . Atau kita pula bisa menggunakan 0, 1, 1.Dua, dua, 3, 4, 4.6, 5, ... & tak terhingga. Contrast nomor , % digunakan buat memberikan dan menampilkan pengaruh yg tidak sama berdasarkan gambar aslinya. Saturate angka, % buat mengatur taraf intensitas suatu warna atau nilai kejenuhannya. Grayscale angka, % buat menaruh efek ke abu-abuan. Sepia angka, % memberikan impak sama seperty grayscale, namun efek grayscale-nya menunjuk ke arah warna coklat tua kekuning-kuningan. Hue-rotate ( deg ) deg merotasi roda rona. Invert nomor , % buat menaruh efek misalnya negatif film. Opacity angka, % buat mengatur transparansi elemen HTML. Drop-shadow ( sama seperti box shadow ) buat menaruh bayangan dalam elemen HTML. Penerangan lihat box-shadow, namun drop-shadow nir mengenal inset dan spread. Pseudo Element content isi property " " string adalah value property CSS content dalam bentuk string, bisa berupa tulisan atau entitas unicode yg umumnya digunakan buat icon/glyph url() berisi gambar open quote buat membuka quote close quote buat menutup quote Transform transform buat memanipulasi bentuk, berukuran, & posisi suatu elemen HTML. Scale(nomor ) buat memperbesar dan memperkecil ukuran suatu elemen HTML baik secara horizontal dan vertikal menggunakan proporsi yang sama. ScaleX(nomor ) buat memperbesar dan memperkecil ukuran suatu elemen HTML secara horizontal saja. ScaleY(angka) buat memperbesar & memperkecil berukuran suatu elemen HTML secara vertikal saja. Rotate(deg) deg buat merotasi sebuah elemen HTML dengan sumbu pusatnya ada pada titik paling tengah. RotateX(deg) deg buat merotasi sebuah elemen HTML dengan sumbu pusatnya terdapat ditengah secara horizontal. Ibaratnya kalo kertas bujursangkar dilipat menjadi dua bagian sama homogen, garis lipatannya adalah sumbunya. RotateY(deg) deg buat merotasi sebuah elemen HTML dengan sumbu pusatnya terdapat ditengah secara vertikal. Ibaratnya kalo kertas bujursangkar dilipat menjadi dua bagian yang sama homogen, garis lipatannya adalah sumbunya. Skew(deg) deg buat menciptakan elemen HTML sebagai cenderung miring/condong secara horizontal. Nilai positif akan menciptakan condong/miring ke kiri. Nilai negatif akan membuat sebuah elemen condong / miring ke kanan. Skew = skewX skewX(deg) deg buat membuat elemen HTML sebagai 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 buat menciptakan elemen HTML sebagai cenderung miring/condong secara vertikal. Nilai positif akan menciptakan 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 buat mengganti posisi suatu elemen HTML sama seperti fungsi property CSS position absolute menggunakan menggunakan property left bila kita beri nilai positif. Hasil dari nilai translate(px) = translateX(px) bila bernilai positif. TranslateX(px) px buat mengubah posisi suatu elemen HTML secara horizontal. Hasil berdasarkan nilai translate(px) = translateX(px) apabila bernilai positif. Fungsi translateX(px) sama misalnya menggunakan property CSS position absolute dengan memakai property CSS left dan right. TranslateY(px) px buat mengubah posisi suatu elemen HTML secara vertikal. Fungsi translateY(px) sama misalnya menggunakan property CSS position absolute menggunakan memakai property CSS top & bottom. Transition transition memiliki fungsi yang memungkinkan kita dapat mengganti & memodifikasi secara halus elemen HTML dengan nilai berdasarkan properti CSS yang diberikan dalam elemen HTML tadi. Durasi parameter harus yg ditulis dalam baris kode property CSS3 transition. Durasi dipakai buat memilih berapa usang suatu elemen HTML berubah dari keadaan awal ke keadaan akhir. Durasi bisa ditulis menggunakan nomor yg memiliki satuan s / ms. S sama menggunakan second, sedangkan ms sama menggunakan millisecond atau seperseribu dtk. Property buat menentukan property apa saja yg akan diberikan transition. Value ini apabila ada diletakkan sebelum durasi. Ada 5 jenis valuenya:

1. All : merupakan parameter default. Artinya bila tidak dituliskan pada baris kode property CSS3 transition, maka akan berperilaku memberi transition dalam semua property yg terdapat pada keadaan akhir. Atau kita jua mampu menuliskan all sebelum parameter durasi, buat menekankan bahwa kita akan memberikan transition dalam property CSS3 pada 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 jua mampu menulisakan menggunakan nilai none yang artinya nir terdapat property CSS dalam keadaan akhir yang perlu ditransisikan. Fungsi transisi / timing function: buat menentukan jenis konvoi apa yang akan dilakukan saat terjadi transition ease nilai default dari parameter timing function. Artinya apabila kita tidak menentukan jenis nilai timing function yg terjadi saat transition, maka yang akan berlaku timing function jenis ease. Ease-in jenis timing function dimana konvoi awalnya pelan, makin lama makin cepat. Ease-out jenis timing function dimana pergerakan awalnya cepat, makin usang makin lambat. Ease-in-out jenis timing function dimana pergerakannya adalah 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 sanggup atur menggunakan menggunakan sebuah kurva yang sanggup membentuk sebuah persamaan. Delay parameter optional dalam property CSS3 transition yang kegunaannya buat memberikan ketika tunggu sebelum menjalankan sebuah transition. Satuan yang digunakan sama seperti menggunakan durasi. Jadi kalau pada satu baris kode, terdapat dua durasi. Durasi yang terdapat pada depan pasti durasi buat melakukan transisi, sedangkan durasi yg selanjutnya atau terdapat dibelakang adalah buat delay. Animation animation mempunyai fungsi yang memungkinkan kita dapat mengganti dan memodifikasi secara halus elemen HTML dengan nilai dari properti CSS yg diberikan dalam elemen HTML tadi. Animation-name merupakan parameter yang harus diisi menjadi nilai berdasarkan property CSS3 animation ini. Untuk anugerah nama bebas, berasal sesuai & sama dengan penggunaan nama dalam @keyframes. Animation-duration parameter wajib yang ditulis dalam baris kode property CSS3 animation. Durasi dipakai buat menentukan berapa usang suatu elemen HTML berubah pada beberapa keadaan menurut awal sampai keadaan akhir. Durasi mampu ditulis menggunakan angka yang memiliki satuan s / ms. S sama dengan second, sedangkan ms sama dengan millisecond atau seperseribu dtk. Animation-timing-function: buat menentukan jenis konvoi apa yg akan dilakukan ketika terjadi animasi. Ease nilai default menurut parameter timing function. Artinya bila kita tidak memilih jenis nilai timing function yg terjadi saat transition, maka yg akan berlaku timing function jenis ease. Ease-in jenis timing function dimana konvoi awalnya pelan, makin usang makin cepat. Ease-out jenis timing function dimana konvoi awalnya cepat, makin lama makin lambat. Ease-in-out jenis timing function dimana pergerakannya adalah kombinasi ease-in dan ease-out. Linear jenis timing function dimana konvoi mengatur kecepatannya seimbang searah garis lurus. Cubic-bezier(w, x, y, z) jenis timing function dimana arah pergerakkannya kita sanggup atur dengan memakai sebuah kurva yang sanggup membuat sebuah persamaan. Animation-delay parameter optional pada property CSS3 transition yg fungsinya buat memberikan ketika tunggu sebelum menjalankan sebuah transition. Satuan yg dipakai sama seperti dengan durasi. Jadi kalau pada satu baris kode, ada 2 durasi. Durasi yg terdapat pada depan niscaya durasi buat melakukan transisi, sedangkan durasi yg selanjutnya adalah buat delay. Satuannya kita mampu pakai s ( second ) & ms ( millisecond ). Jadi waktu kita ingin menggunakan 2 durasi ini, perhatikan perhitungan waktunya. Animation-iteration-count buat memilih berapa kali pengulangan. Kita sanggup memakai angka atau keyword menggunakan nilai ?Infinite? Apabila animasi yang ingin dilakukan terus menerus berulang. Defaultnya 1x pengulangan, jika kita tidak memilih berapa jumlah iteration count-nya. Kita mampu menggunakan angka 1, dua, tiga, 4, 10, ? & tak terhingga atau nilai menggunakan keyword infinite buat berkreasi menggunakan menggunakan property CSS3 animation ini. Animation-direction: parameter buat mengatur arah pergerakan animasi. Jika kita tidak menentukan parameter nilai tadi, maka nilai yang berlaku buat parameter ini adalah normal, yg merupakan akan bergerak berdasarkan awal ke akhir. Normal nilai default menurut parameter direction ini, arah pergerakannya berdasarkan awal ke akhir. Reverse nilai yg arah pergerakan animasinya menurut akhir ke awal. Nilai parameter reverse merupakan kebalikan dari nilai normal, menjadi nilai defaultnya. Alternate nilai yang arah pergerakannya merupakan kombinasi atau berganti-ganti, akan tetapi arah jalan pergerakannya permanen menurut posisi awal. Jadi pergerakannya dari awal ke akhir, lalu berdasarkan akhir ke awal, kemudian dari awal ke akhir, dan berganti-ganti seperti itu terus hingga berapa banyak nilai parameter iteration-count yang dipengaruhi. Pergerakan dengan kombinasi ini merupakan konvoi 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 berdasarkan akhir ke awal, lalu berdasarkan awal ke akhir, kemudian berdasarkan akhir ke awal, dan berganti-ganti misalnya itu terus sampai berapa poly nilai parameter iteration-count yg ditentukan. Animation-fill-mode: parameter buat menentukan akhir berdasarkan animasi terjadi. Jika nir dipengaruhi maka nilai defaultnya adalah none, yg merupakan animasi berakhir pada posisi awal. None nilai default dari parameter fill mode dimana animasi akan berakhir dalam posisi awal. Forwards nilai dari fill mode dimana animasi akan berakhir dalam posisi akhir animasi. Jadi apabila kita nir ingin animasinya pribadi loncat ke awal, kita sanggup memakai nilai forwards buat parameter fill-mode. Backwards nilai menurut fill mode dimana animasi akan berakhir pada posisi awal. Both nilai fill mode dimana animasi akan berakhir dalam posisi akhir ulangan baik itu di awal atau di akhir animation-play-state: untuk menentukan jalan atau tidaknya suatu animasi running default animasi yg terjadi bila nilai parameter tidak ditentukan, maka nilainya merupakan running sebagai akibatnya animasi jalan secara otomatis paused animasi nir akan jalan

CSS Dasar

Part 1

Pengenalan CSS

CSS Dasar

Part 2

Anatomi CSS

CSS Dasar

Part tiga

Penempatan File CSS

CSS Dasar

Part 4

CSS Font Styling