Trik CSS Pseudo-elements

Hai sobat~saya mau share ilmu CSS lagi nih,tapi tingkat menengah.jadi yang ingin belajar,coba dan usaha dulu sebelum bertanya.tadinya sih saya mau share css yang paling dasar dulu,tapi males karena ga sempet(im sorry=_=v) jelasin'a karena banyak sekali,dan mungkin akan jadi buku.wkwkwkw.kali ini tentang CSS Pseudo - elements?apa itu?CSS pseudo-elemen adalah CSS yang digunakan untuk menambahkan efek khusus pada beberapa seleksi element yang kita inginkan tanpa harus menambahan html.css ini sebenar'a sudah umum dan banyak digunakan web designer yang sering kita lihat sekarang banyak yang ahli menggunakan CSS3 hingga terlihat artisitik.saya juga sudah lama menggunakan ini sih,baru sekarang saya share,karenalagi ada waktu luang~jadi bagi yang ingin belajar,silakan dibaca dari awal :)



Contoh template yang saya terapkan menggunakan trik ini yaitu:

1. Haiyore nyaruko-san
2. Sora no otoshimono
3. Shinobu oshino
4. Green minimalist
5. Fairy tail
6. blog saya sendiri :)

Dan beberapa trik seperti cloud animation,text animation,ribbon menu css3,dll



bagaimana cara menerapkanya?
Mudah saja,yang perlu kita lakukan adalah membuat/mengetik CSS'a sendiri secara manual dengan 4 CSS Pseudo yang akan saya bahas yaitu.

1. :First-line
2. :First-letter
3. :before
4. :after

Saya akan jelaskan satu - persatu,tapi untuk awal penerapanya menggunakan Sintaks dari pseudo-elemen seperti dibawah ini.


.namacss/class:pseudo-elemen

keterangan:
.nama css/class adalah nama css yang terkait dengan Html.
pseudo-element= fungsi yang kita inginkan(:before atau :after atau :first-line atau :first-letter)



Contoh:

Misalkan saya punya HTML dengan nama class

<div class='header'>isi content </div>

lalu nama cssnya

.header {isi css;}


setelah itu saya ingin menambahkan css pseudo :after,maka menjadi

.header:after {isi css;}

#note:
-bukan diganti/tapi ditambahkan!
-Sintask bisa berupa awalan .'titik' atau # 'pagar'
tergantung dari HTML yang akan digunakan ID atau class.
ID = div id
class= div class

mengenai ID dan class,bisa baca di blog teman saya Z-ept.blogspot.com










:First-line
CSS ini berfungsi untuk menambah style khusus untuk baris pertama pada teks.
Bila sobat perhatikan contoh dibawah ini,Baris pertama pada text berwana merah dan text huruf besar semua.kenapa?karena pada css p.css1:first-line saya tambahkan css color:#ff0000 (warna merah) dan small caps(huruf kapital).tapi tidak hanya sebatas itu,kita juga bisa saja memasukan background,text shadow,font-size ataupun border didalam css :first-line,tapi hanya untuk baris pertama penerapanya.tergantung kemauan dan kreatifitas kamu :)

Contoh:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS

p.css1:first-line
{
color:#ff0000;
font-variant:small-caps;
}

HTML

<p class='css1'>Isi text</p>

:first-letter
Seperti nama'a sendiri,Surat/Kata pertama,fungsinya untuk membuat Drop-cap text atau membuat Style pada Huruf pertama di suatu paragraf.CSS inilah yang seringkali digunakan untuk keperluan Tipografi yang bergaya Magazine.

Coba sobat perhatikan contoh dibawah ini,Pada huruf pertama 'L' kenapa text'a berwarna merah dan ukuran text'a besar?
sama sperti tadi,hanya saja saya menambahkan font-size:50px agar ukuran text lebih besar.dan inti'a css:first letter hanya berlaku untuk huruf pertama dalam 1 paragraf.

Contoh:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS

p.css2:first-letter
{
color:#ff0000;
font-size:50px;
}

HTML

<p class='css2'>Isi text</p>

Untuk Contoh lainya kamu bisa lihat langsung di template terbaru saya :
-sora no otoshimono
-shinobu oshinom
-green minimalist
-fairy tail.







:First-line dan:first-letter
Jika ingin menggabungkan 2 fungsi,kamu tinggal memasukan nama css yang sama agar berfungsi pada suatu paragraf tersebut.
Maka hasilnya bisa dilihat pada contoh dibawah ini.


Contoh:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS

p.css3:first-letter
{
color:#ff0000;
font-size:50px;
}
p.css3:first-line
{
color:#ff0000;
font-variant:small-caps;
}

HTML

<p class='css3'>Isi text</p>

:before
CSS ini fungsinya digunakan untuk memasukkan beberapa konten CSS sebelum konten dari elemen utama.
CSS ini pula sekarang sedang pupuler dikalangan web designer yang tergila" dengan CSS3 karena fungsinya untuk menambahkan elemen CSS yang terpisah dengan elemen pertama,jadi penggunakan css ini tidak perlu menambahkan kode html baru,cukup menyamakan nama css dengan nama html yang sudah ada.untuk lebih jelasnya ,pertama saya ambil contoh kotak untuk elemen pertama dari 30 trik menarik yang sudah saya posting sebelumnya.


Dibawah ini adalah css kotak biasa.

Kotak

HTML

<div class='kotak1'>kotak</p>

CSS

.kotak1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

Tapi setelah saya menambahkan css .kotak1:before

CSS

.kotak1:before
{
content:"";
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:
#00C4FD;
width: 80px;
height: 80px;
text-align: center;
position: absolute;
margin-left: 145px;
border: 7px solid
white;
margin-top: -25px;
}

Hasilnya menjadi seperti dibawah ini.

Kotak

kenapa bisa ada lingkaran di sebelah kotaknya? itu karena saya menambahkan beberapa lagi css pada .kotak1:before dengan panjang dan lebar 80 px,border radius,dan border/garis pinggir sebesar 7px.

#Note: menambahkan .kotak1:before{ bukan berati mengganti/menimpa css .kotak1{ (css utama)
#kalau CSS utama tidak ada,maka CSS .kotak:before tidak akan muncul.

dan kenapa di CSS itu saya menambahkan position absolute?karena jika tidak elemen css'a akan berada didalam kotak tersebut,jadi css position:absolute lah yang berfungsi agar elemen pseudo :before posisinya menjadi tidak terpaku/tergantung lagi pada css.kotak1(element utama)untuk posisinya bisa menggunakan margin atau dengan css posisi top,bottom,left,right.

jika saya tidak menggunakan posisi absolute,maka hasilnya akan menjadi seperti dibawah ini:

Kotak

Element css pseudo :before akan fix didalam elemen kotak tesebut.






:after
CSS ini fungsinya sama saja dengan :before,fungsinya digunakan untuk memasukkan beberapa konten CSS setelah konten dari elemen utama.

Teorinya,kalau yang :before posisinya ada diatas elemen utama,sedangkan posisi :after ada dibawah elemen utama.

Urutan:
1. :before
2. main element
3. :after


CSS

namacss:after {

:before dan :after
Lalu apakah kedua fungsi css ini bisa digunakan bersamaan pada suatu element?tentu saja bisa,yang perlu kamu lakukan hanya menyamakan class name html yang akan dijadikan element utama.

Misalkan tadi saya mempunyai kotak 1

Kotak

Lalu saya tambahkan css .kotak1:after dan hasilnya menjadi seperti dibawah ini:

Kotak

menggunakan css pseudo after dan before bukan hanya sekedar buat element bulat dan kotak loh?selai kita bisa menambahkan border dan background,kita juga dapa menggantinya dengan gambar,cara'a menambahkan url pada background,dan sesuaikan dengan ukurannya.dan juga apakah sobat perhatikan template" saya seperti green minimlist dan fairy tail?kenapa pada posting style'a bisa seperti itu?rahasianya saya menggunakan css ini dengan menambahkan Segitiga diatas posting,dan mengatur'a sehinggan terliaht unik.segitiga'a darimana? ada di postingan saya 30 trik menarik css 3



Nah,segini dulu tutorial dasar" CSS tingkat menengah dari saya~
semoga bermanfaat,dan saya harapkan anda jangan cuma baca,copy paste lalu dicoba,tapi pahami fungsi"nya! agar mudah dipahami oleh diri kalian sendiri,dan tidak tergantung pada saya truz nanya ini itu.Selamat belajar :)