Property CSS
Pengantar
CSS umumnya digunakan untuk mengatur dan mengkelompokan property-property yang bisa di implementasi di setiap elemen menjadi satu class, Sehingga dapat mempermudah pengaturan tata letak, property elemen, dsb.Beberapa property css yang biasa digunakan:
vertical-align
Digunakan Untuk mengatur perataan vertical
list-style-type
Digunakan untuk mengatur simbol untuk ordered/unorderedlist| Keyword | Hasil |
|---|---|
| none | |
| disc(default dari unorderedlist) | |
| circle | |
| square | |
| decimal(default dari orderedlist) | 1,2,3,4,5,.... |
| decimal-leading-zero | 01,02,03,04,05,.... |
| lower-alpha | a,b,c,d,... |
| upper-alpha | A,B,C,D,... |
| lower-latin | a,b,c,d,...(sama dengan lower-alpha) |
| upper-latin | A,B,C,D,...(sama dengan upper-alpha) |
| lower-roman | i,ii,iii,iv,..... |
| upper-roman | I,II,III,IV,.... |
| lower-greek | α, β, γ, δ, ε, στ,.... |
list-style-position
Digunakan untuk mengatur peletakan posisi simbol list. Terdiri dari 3 jenis- Outside
- Inside
- Inherit
- Satu
- Dua
- Tiga
- Empat
- Lima
- Enam
list-style-image
Digunakan untuk menggantikan simbol list yang sudah ada pada html dengan gambar. File gambar yang direkomendasikan umumnya berekstensi .icoContoh :
- List 1
- List 2
- List 3
color dan background color
- color -> digunakan untuk mengatur warna tulisan
- background-color -> digunakan untuk megubah warna latar belakang dari html.
opacity
digunakan untuk mengatur tingkat ke-tranparan. value hanya bernilai 0 s/d 1 saja. Contoh:pseudo-class selector
Digunakan untuk mendefinisikan status khusus bagi element selector. Cara kerja nya seperti event. Misalnya, ketika link diklik maka tulisan akan berubah menjadi warna merah, atau ketika kursor mouse digerakan mengarah pada suatu objek maka objek tersebut akan menjadi besar, dsb.Umumnya ada 2 jenis pseudo-class selector yaitu :
-
Link pseudo-class
:link Untuk menerapkan style apa yang diberikan pada link ketika link belum diklik :visisted Untuk menerapkan style apa yang diberikan pada link ketika link sudah diklik - User action pseudo-class
-
:focus diterapkan ketika element dipilih dan siap untuk diinput :hover diterapkan ketika pointer mouse berada di atas element :active diterapkan ketika element(seperti link atau button) sudah diklik dan sedang menjalankan proses
Pseudo-element Selector
Mendefinisikan style untuk bagian tertentu dari elemen.Terdiri dari :
- Huruf Awal & Baris Pertama
- Style sebelum dan sesudah.
Menambah Gambar Latar Belakang
Property yang umum digunakan untuk menambah latar belakang atau background antara lain:- background
-
background-image
Values:- url(lokasi gambar)
- none
- inherit
-
background-repeat
Values- repeat
- repeat-x
- repeat-y
- no-repeat
- inherit
-
background-position
Values : length measurement | percentage | left | center | right | top | bottom | inherit -
background-attachment
Values : scroll | fixed | local (new in CSS3) | inherit
-
background-attachment : scroll;
Ketika kita men-scroll tulisan ke bawah atau keatas, gambar background juga ikut berpindah sesuai dengan scroll -
background-attachment : fixed;
Kebalikan dari scroll. Ketika kita men-scroll ke bawah maupun ke atas, gambar latar belakang posisinya akan tetap.
-
background-attachment : scroll;
Poperty yang ada pada background
| background
values : background-color background-image background-repeat background- attachment background-position | inherit |
Gradient
Merupakan transisi dari warna yanng satu ke warna yang lainnya. Dapat diterapkan pada : background-image, border-image, dan list-style-imageAda 2 tipe gradient pada Html, yaitu :
- Linear gradient -> perubahan warna sepanjang garis, dari ujung sebuah elemen ke elemen lainnya.
- Radial gradient -> perubahan warna dari sebuah titik dalam bentuk lingkaran atau elips.
| #stylinear{ background-image : linear-gradient(left, red,orange,yellow,lime,green,blue);} |
Radial Gradient Perubahan warna dari pusat ke daerah sekeliling dalam bentuk lingkaran. Bentuk radial biasanya dimulai dari titik tengah yang membentuk elips.
| #styradial{ background-image : radial-gradient(#e66465, #9198e5)} |
Box Model
Setiap elemen HTML (block dan inline ) memiliki kotak, sehingga bisa menginplementasikan property width, height, padding, border, dan margin.
Overflow
Overflow Berfungsi ketika ukuran elemen terlalu kecil untuk membuat konten. Kita bisa mengaturnya dengan overflow agar konten terlihat rapi.
|
padding
Untuk mengatur jarak antara konten dengan border.
border-style property
Digunakan untuk mengatur jenis border untuk suatu elemen
|
||||||||
border-color property
Digunakan untuk mengganti warna border. Property border bisa kita bagi menjadi beberapa bagian yaitu:- border-top-color -> digunakan untuk mengubah warna bagian atas border
- border-right-color -> digunakan untuk mengubah warna bagian kanan border
- border-left-color -> digunakan untuk mengubah warna bagian kiri border
- border-right-color -> digunakan untuk mengubah warna bagian bawah border
- border-color -> untuk mengubah keseluruhan wana sisi border
margin property
Digunakan untuk mengatur letak elemen. Margin ini membanding kan ukuran berdasarkan layar, yang artinya terkadang ketika di komputer kita posisinya sudah pas, tetapi belum tentu pas pada komputer orang lain.Contoh:
display property
Fungsi property CSS Display adalah untuk menentukan bagaimana suatu elemen ditampilkan. Fungsi property CSS Display ini hampir mirip dengan property CSS Visibility, kedua-duanya memiliki fungsi untuk menyembunyikan suatu elemen. Selain untuk menyembunyikan suatu elemen fungsi property CSS Display ini mempunyai fungsi lainnya yaitu untuk membuat suatu Tag yang betipe block menjadi tidak bertipe block, atau sebaliknya membuat Tag yang tidak bertipe block menjadi Tag yang bertipe block.SUMBER : https://www.dumetschool.com/blog/Fungsi-Property-CSS-Display
Contoh:
box-shadow property
CSS Box Shadow adalah suatu deklarasi bagaimana menciptakan efek bayangan suatu area sama seperti hal-nya dengan CSS Border Radius, CSS Box Shadow memiliki Properti disetiap Pramban yang dipergunakan dan memiliki fungsi menciptakan efek bayangan keluar dan kedalam dari objek area, yaitu :- -webkit-box-shadow (Properti Safari dan Chrome)
- -moz-box-shadow (Properti Modzilla Firefox)
- box-shadow (Properti W3C)
SUMBER : http://wongwayang.blogspot.com/2013/02/css-box-shadow.html
Contoh:
float property
Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling banyak di perlukan. floaat berfungsi untuk mengatur letak element secara horizontal. ada empat value yang bisa digunakn untuk property float, yaitu left, rigth inherit dan none.Salah satu contoh penggunaan float yang paling sering di temukan ketika adalah ketika kita ingin membuat gambar potingan website yang terletak di bagian sampng tulisan konten.
SUMBER : https://www.malasngoding.com/belajar-css-menggunakan-float-css/
relative positioning
Posisi elemen tetap mengikuti alur dokumen, hampir sama dengan value static. Yang menjadi perbedaan yaitu, value top, bottom, left, right akan berfungsi. Pengaturan posisi pada suatu elemen menggunakan value tersebut akan “mendorong” elemen tersebut ke arah yang diinginkan. jadiproperti relative ini bergantung pada posisi elemen yang ada diatas / elemen sebelumnya.SUMBER : https://belajarkoding.net/perbedaan-css-position-static-relative-absolute-fixed-dan-inherit/ Contoh:
absolute positioning
Elemen akan dihilangkan / dicabut dari alur dokumen, dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu dengan elemen yang diberikan properti absolute). Apabila element yang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebutSUMBER : https://belajarkoding.net/perbedaan-css-position-static-relative-absolute-fixed-dan-inherit/ Contoh:
CSS Transition
- Sebelumnya efek animasi hanya dapat dilakukan oleh tools flash atau java script
- CSS TRANSITION telah dapat membuat efek yaitu menghaluskan perubahan dari setiap state ke state lainnya
- ADa 4 hal yang perlu dilihat yaitu :
- Transition Property -> berisikan property css
- Transition Duration -> durasi yang didbutuhkan untuk menyelasaikan animasi(satuan s atau ms)
- Transition Timing Function -> TIpe Transisi
- Transition Delay -> durasi untuk memulai animasi
|
|
||||||||||||||||||||
|
|
||||||||||||||||||||
0 komentar:
Posting Komentar