Facebook Page
Translate
Pengikut
Popular Posts
-
Ngaeweb - Hari ini saya akan memberi tahu kalian mengenai cara membuat Bingkai menggunakan CSS. Untuk membuat bingkai, kita bisa memakai ...
Selector Pseudo Elemen
/
0 Comments
NgaeWeb – Hari ini saya akan menjelaskan tentang Selector Pseudo Element.
Css menyediakan tiga Pseudo-elemen yaitu: first-letter, first line dan first child. Dinamakan pseudo-elemen karena sesungguhnya tidak ada elemen ekivalen di dalam HTML. Namun, selector ini di sediakan dengan tujuan untuk memberi efek yang menarik.
Css menyediakan tiga Pseudo-elemen yaitu: first-letter, first line dan first child. Dinamakan pseudo-elemen karena sesungguhnya tidak ada elemen ekivalen di dalam HTML. Namun, selector ini di sediakan dengan tujuan untuk memberi efek yang menarik.
- Pseudo-Elemen first-letter yang berarti karakter pertama.
- Pseudo-Elemen first-line yang berarti baris pertama.
- Pseudo-Elemen first-child yang berarti elemen anak pertama
Contoh cara menggunakan first-letter yang di sebut “Drop Cap”
Maka setiap huruf pertama pada tag <p> akan menjadi drop cap. Perhatikan hasil berikut.
Bagaimana kalau kita ingin agar Drop cap hanya ada di paragraf pertama saja?. kita bisa melakukanya dengan cara di bawah ini.
 |
| Coding untuk membuat Drop Cap |
Dan hasilnya akan seperti ini.
 |
| Drop Cap |
Sekarang kita akan mencoba menggunakan frist line dengan kode seperti ini.
 |
| Kode HTML Frist Line |
Dan kita bisa melihat hasilnya seperti ini.
 |
| Frist Line |
Kita bisa mengetahui bahwa baris pertama dalam paragraf yang terkena efectnya.
Sekarang kita akan belajar mengenai first child. kita hanya akan mengubahnya seperti dibawah ini.
 |
| Koding First Child |
Dan kita akan melihat hasilnya seperti di bawah ini.
 |
| Frist line |
Dari gambar di atas kita bisa mengetahui fungsi dari first-child yaitu semua isi paragraf akan terkena efeknya.
sekian informasi dari saya semoga bermanfaat bagi anda, Ingat satu hal yang saya sampaikan ini lebih baik mempraktekkanya langsung ketimbang hanya membacanya saja. Terimakasi telah berkunjung dan salam NgaeWeb :D.