Pseudo Element Pada Huruf Pertama
Sebuah pseudo-element (pseudo element adalah: salah satu teknik penulisan dalam css) dapat di integrasikan kedalam CSS Style, baik untuk keperluan merubah maupun mendesign sebuah website. Dengan berbagai macam teknik penulisan, Pseudo Element dapat menghasilkan efek yang berbeda-beda. Seperti halnya demonstrasi yang saya hadirkan berikut ini, sebuah implementasi dari Pseudo Element kedalam Huruf Pertama.
Metode ini diciptakan dengan menggunakan fungsi dari pseudo element itu sendiri, dimana huruf pertama dari beberapa kalimat bisa ditata dengan menggunakan beberapa properti, seperti:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if 'float' is 'none')
- text-transform
- line-height
- float
- clear
- dll
Demo :
Berikut ini adalah markup yang saya gunakan untuk membuat Pseudo Element:
<style type="text/css">
#pseudo-element {margin:25px auto 100px auto; width:650px;}
#pseudo-element a {display:block; font-size:50px; color:#000; text-decoration:none; padding:20px; border:1px solid #ddd; float:left;}
#pseudo-element a:first-letter {
font-size:90px; font-family:georgia, serif; font-weight:bold;
color:#c00;
background:#ddd url(http://archivesiugi.googlecode.com/files/point_1.gif) 40px 50px no-repeat ;
letter-spacing:10px;
text-decoration:underline;
vertical-align:top;
text-transform:uppercase;
line-height:100px;
margin:10px -10px;
padding:5px;
border:1px solid #000;
border-color:#c00 #fc0 #0c0 #00c;
border-width:5px 10px 15px 20px;
}
#pseudo-element a:hover {color:#00c;}
#pseudo-element a:hover:first-letter {color:#000; background-position:45px 50px;}
</style>
<div id="pseudo-element">
<a href="#">demonstration</a>
</div>
sumber: cssplay#pseudo-element {margin:25px auto 100px auto; width:650px;}
#pseudo-element a {display:block; font-size:50px; color:#000; text-decoration:none; padding:20px; border:1px solid #ddd; float:left;}
#pseudo-element a:first-letter {
font-size:90px; font-family:georgia, serif; font-weight:bold;
color:#c00;
background:#ddd url(http://archivesiugi.googlecode.com/files/point_1.gif) 40px 50px no-repeat ;
letter-spacing:10px;
text-decoration:underline;
vertical-align:top;
text-transform:uppercase;
line-height:100px;
margin:10px -10px;
padding:5px;
border:1px solid #000;
border-color:#c00 #fc0 #0c0 #00c;
border-width:5px 10px 15px 20px;
}
#pseudo-element a:hover {color:#00c;}
#pseudo-element a:hover:first-letter {color:#000; background-position:45px 50px;}
</style>
<div id="pseudo-element">
<a href="#">demonstration</a>
</div>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon