Belajar Mengenal "Pseudo Element" !!
untuk artikel kali ini kita akan mengenal dasar-dasar Pseudo Element (Elemen Semu). Pada CSS Tutorial pada web W3C yang sebagian orang mungkin akan sulit memahami apalagi yang kurang memahami bahasa inggris.Kesempatan ini saya akan memberikan beberapa dasar-dasar mudah cara kerja pseudo element dalam bahasa indonesia.
1. First-Line (Pseudo Element)
Menentukan garis pertama yang berbeda.
contoh
p:first-line{color:#ff3300;
font-variant:small-caps;
}hasilnya:2.First-Letter (Pseudo Element)lihat perbedaan garis pertama dan garis kedua. garis pertama dengan:firs-line.
dan garis kedua tidak akan mengandung selector pseudo.
menentukan carakter huruf pertama yang berbeda.
Contoh
p:first-letter
{
color:#ff3300;
font-size:xx-large;
}
3.Jika di gabungkan antaraLihat pada awal kalimat yang mempunyai karakter lebih besar dari lainnya dan itu menggunakan :ferst-letter element pseudo.
:first-line dan :first-letter.dan penggunaan css nya seperti ini.
p:first-line{
color:#0000ff;
font-variant:small-caps;
}
p:first-letter
{
color:#ff3300;
font-size:xx-large;
}Hasilnya:4.CSS - :Before ElementsYang terjadi bila kita melakukan kombinasi pada kedua pseudo elemen tersebut.
maka hasilnya akan seperti pada kalimat ini pada garis pertama
Masukan content sebeleum elemen .
Contoh:
h1:before {content:url(smiley.gif);}hasilnya:5.CSS - :After ElementsCSS TUTS HEADING
:beforepseudo element tempatkan content sebelum elemen
Masukan Content setelah elemen.
Contoh
h1:after {content:url(smiley.gif);}hasilnya:Di atas dasar-dasar penggunaan pseudo elemen. dan dengan pseudo elemen kita dapat membuat macam-macam style yang unik dan menarik. mungkin di antara kalian akan banyak yang lebih memahami tentang pseudo ini dan mudah untuk belajar. nah berikut tabel penjelasan atribut pseudo element yang terdapat pada template.CSS TUTS HEADING
:afterpseudo element tempatkan content seteleh elemen
Tabel Penjelasan pseudo elements.
| Seleksi | Contoh | Penjelasan Contoh |
|---|---|---|
| :link | a:link | Pengaturan link yang belum dikunjungi |
| :visited | a:visited | Pengaturan link yang sudah dikunjungi |
| :active | a:active | Memilih link aktif |
| :hover | a:hover | Memilih link pada saat mengarahkan mouse |
| :focus | input:focus | Memilih elemen input yang memiliki fokus |
| :first-letter | p:first-letter | Memilih huruf pertama dari setiap elemen <p> |
| :first-line | p:first-line | Memilih baris pertama dari setiap elemen <p> |
| :first-child | p:first-child | Memilih elemen <p> setiap yang merupakan elemen pertama dari elemen induk. |
| :before | p:before | Memasukkan konten sebelum setiap elemen <p> |
| :after | p:after | Memasukkan konten setelah setiap elemen <p> |
| :lang(language) | p:lang(it) | Memilih setiap elemen <p> dengan nilai atribut lang mulai dengan "it" |
catatan : agar semua pseudo element bisa bekerja dengan baik,maka browser yang anda gunakan harus selalu update dan mendukung atribut CSS
semoga artikel ini bisa bermanfaat dan berguna bagi anda yang sedang memodifikasi template.terutama bagi anda pengguna layanan blogger. selamat berkreasi.
0 komentar:
Posting Komentar