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.
  • 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.







Artikel Lainnya

Tidak ada komentar:

Diberdayakan oleh Blogger.

Facebook Page

Ngae Web

Translate

Pengikut

Popular Posts