Mengenal CSS Pseudo Element

CSS Pseudo Element bisa diartikan sebagai Elemen/Tag dalam artian "Boongan". Karena dengan menambahkan pseudo elemen seolah-olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style.
Pseudo Element dikelompokkan menjadi dua bagian yaitu :

1. CSS Pseudo Element :before dan :after
Pseudo element ini akan menambahkan content sebelum (:before) atau sesudah element (:after). Misalnya saya mempunyai sebuah tag h1 :

<h1>Datang Di Blog</h1>

Lalu dalam CSS tsb saya tambahkan Pseudo element :before dan mengisi kontennya dengan kata "Selamat" :

h1:before {
    content : "Selamat ";
}

Jika anda lihat hasilnya akan melihat kata “Selamat ” ditambahkan sebelum isi dari h1. Namun jika anda coba melihat tab html, anda tidak akan menemukan teks “Selamat” dalam kode html. Itulah mengapa disebut dengan pseudo element karena memang seperti ada element padahal tidak ada.



Begitu juga dengan :after, namun berbeda posisi penempatannya. Saya tambahkan juga pseudo element :after pada contoh di atas.

h1:after{
    content : " Saya";
}

2. :first-letter dan :first-line

Berbeda dengan :before dan :after yang fungsinya untuk menyisipkan content. :first-letter dan :first-line seolah-olah memberikan tag extra pada huruf pertama (first-letter) atau pada baris pertama (first-line).

Penggunaan :first-letter biasanya untuk membuat efek dropcap (itu loh huruf pertama yang lebih besar yang sering ditemui di koran-koran).

Berikut ini contoh penggunaan first-letter pada sebuah paragraf :

p:first-letter{
 font-size : 300%;
 font-family: "Monotype Corsiva";
     float : left;
     margin-right : 20px;
}

Berbeda dengan pseudo element sebelumnya, property yang bisa diterapkan pada :first-letter dibatasi pada :

• font properties
• ‘text-decoration’
• ‘text-transform’
• ‘letter-spacing’
• ‘word-spacing’
• ‘line-height’
• ‘float’
• ‘vertical-align’ (only if ‘float’ is ‘none’)
• margin properties
• padding properties
• border properties
• color property
• background properties

Sedangkan untuk property yang bisa diterapkan pada :first-line dibatasi pada :

• font properties
• color property
• background properties
• ‘word-spacing’
• ‘letter-spacing’
• ‘text-decoration’
• ‘vertical-align’
• ‘text-transform’
• ‘line-height’

CSS PSEUDO ELEMENT DALAM CSS3

Ada sedikit perubahan dalam spesifikasi CSS3, yakni setiap pseudo element harus menggunakan double colon atau titik duanya ditulis dua kali seperti ::before, ::after.

Ini dimaksudkan untuk membedakan antara pseudo class dengan pseudo element. Tapi merujuk pada kompatibilitas dengan browser lama seperti IE7 yang menggunakan spec CSS2 maka penggunaan single colon sudah cukup mengingat browser modern mampu mendeteksinya sebagai pseudo element secara otomatis.

IMPLEMENTASI DALAM DESAIN WEB

Banyak sekali implementasi yang dapat anda lakukan dengan bantuan pseuso element ini, seperti membuat
efek shadow
, efek callout (balon suara), tooltip,
menambahkan efek clip
dan masih banyak lagi tergantung dari kreatifitas yang anda miliki.

Sekian...

Sumber: http://www.ariona.net/mengenal-lebih-dalam-css-pseudo-element/

Dedi  Friday, February 27, 2015 

Tips Blogger