X-Site

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


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.



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:


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


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





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 :)