Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 TEKNIK BARU CSS3: BAHAGIAN 2 |
| August 25, 2009 Posted by: Fauzie |
:first-child pseudo-class
First-child pseudo-class ini membantu "highlighting" perenggan sesuatu artikel. Dalam contoh yang ditunjukkan di bawah ini satu perenggan telah diasingkan dengan diwarnakan dengan warna merah. Sila lihat screenshot di bawah.
Walau pun sesuatu perenggan boleh diwarnakan dengan cara lain, tetapi cari menggunakan kod-kod CSS in lebih praktikal dan mudah. Dengan menggunakan satu kelompok kod CSS sahaja, kita boleh "highlight" perenggan dengan mudah.
Contoh: "live demo"
To produce multilevel navigation, we can edit the example we saw
To produce multilevel navigation, we can edit the example we saw in the previous figure, adding a nested list and styling the colors, borders, and link properties of the new list’s items:
The perfect way to display subnavigation within a navigation system is to create a sublist within a list.
The two levels of navigation will be easy to understand when they’re marked
To produce multilevel navigation, we can edit the example we saw in the previous figure, adding a nested list and styling the colors, borders, and link properties of the new list’s items:
Kod CSS dan HTML untuk contoh di atas adalah seperti berikut:
<html>
<head>
<style type="text/css">
p:first-child {
font-weight: 700;
color:red;
}
</style>
</head>
<body>
To produce multilevel navigation, we can edit the example we saw
<p>The perfect way to display subnavigation within a navigation system is to create a sublist within a list.</p><p> The two levels of navigation will be easy to understand when they’re marked </p>
To produce multilevel navigation, we can edit the example we saw in the previous figure, adding a nested list and styling the colors, borders, and link properties of the new list’s items:
</body>
</html>
<head>
<style type="text/css">
p:first-child {
font-weight: 700;
color:red;
}
</style>
</head>
<body>
To produce multilevel navigation, we can edit the example we saw
<p>The perfect way to display subnavigation within a navigation system is to create a sublist within a list.</p><p> The two levels of navigation will be easy to understand when they’re marked </p>
To produce multilevel navigation, we can edit the example we saw in the previous figure, adding a nested list and styling the colors, borders, and link properties of the new list’s items:
</body>
</html>
Kod berwarna maroon adalah kod CSS dan yang berwarna biru ialah kod HTML.
:first-line pseudo-element
Kita gunakan first-line pseudo-element ini ialah untuk "highlight" barisan pertama sesuatu teks yang mana elementnya telah dipilih. Di bawah ini ialah "live demo" dimana ayat barisan pertama diwarnakan dengan warna merah.
Contoh: "live demo"
Lorem ipsum dolor sit,
consectetuer adipiscing.
Di bawah ini ialah kod-kod CSS dan HTML
<html>
<head>
<style type="text/css">
p:first-line {
font-weight: 700;
color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, </p>
consectetuer adipiscing.
</body>
</html>
<head>
<style type="text/css">
p:first-line {
font-weight: 700;
color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, </p>
consectetuer adipiscing.
</body>
</html>
:first-letter pseudo-element
First-letter pseudo-element membolehkan anda menggunakan CSS untuk memberi effek huruf bersaiz besar untuk huruf pertama (first letter) bagi sesuatu element yang telah dipilih. Dalam contoh screen shot di bawah ini huruf pertama bagi setiap perenggan telah dibesarkan dengan kod CSS seperti di bawahnya.
 |
<html>
<head>
<style type="text/css">
p:first-letter {
font-size: 2em;
color:red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, consectetuer adipiscing.Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p></body>
</html>
<head>
<style type="text/css">
p:first-letter {
font-size: 2em;
color:red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, consectetuer adipiscing.Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p></body>
</html>
:target pseudo-class
Target pseudo-class berguna untuk menarik perhatian pembaca ke arah sesuatu bahagian rencana yang mempunyai ayat atau fakta penting.
Dalam contoh di bawah ini, sila anda klik "Klik di sini untuk ke Focus Area" dan anda akan dapati ayat dalam target akan berada dalam kotak yang mempunyai border berwarna merah.
Di bawah ini ialah kod-kod yang saya gunakan untuk membuat contoh "focus area" seperti di "live demo" berikut.
<html>
<head>
<style type="text/css">
p#focusarea:target {
width: 200px;
padding:10px;
border: 1px solid red;
background-color: yellow;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
</head>
<body>
<a href="#focusarea">Klik di sini untuk ke Focus Area</a><br/>
Ini adalah "live demo" untuk "target pseudo-class yang mana apabila anda klik ayat dia atas, anda akan dibawa ke bahagian atau ayat-ayat yang difokus.<br/>
<p id="focusarea"><span style="color:#000;">Ayat-ayat dalam ruang ini adalah ayat-ayat yang ditarget apabila anda klik arahan di atas.</span></p>
Ini hanyalah salah satu experiment dalam penggunaan CSS3 dalam web design.</div>
</body>
</html>
<head>
<style type="text/css">
p#focusarea:target {
width: 200px;
padding:10px;
border: 1px solid red;
background-color: yellow;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
</head>
<body>
<a href="#focusarea">Klik di sini untuk ke Focus Area</a><br/>
Ini adalah "live demo" untuk "target pseudo-class yang mana apabila anda klik ayat dia atas, anda akan dibawa ke bahagian atau ayat-ayat yang difokus.<br/>
<p id="focusarea"><span style="color:#000;">Ayat-ayat dalam ruang ini adalah ayat-ayat yang ditarget apabila anda klik arahan di atas.</span></p>
Ini hanyalah salah satu experiment dalam penggunaan CSS3 dalam web design.</div>
</body>
</html>
Contoh: "live demo"
Klik di sini untuk ke Focus Area
Ini adalah "live demo" untuk "target pseudo-class yang mana apabila anda klik ayat dia atas, anda akan dibawa ke bahagian atau ayat-ayat yang difokus.
Ini hanyalah salah satu experiment dalam penggunaan CSS3 dalam web design.
Ini adalah "live demo" untuk "target pseudo-class yang mana apabila anda klik ayat dia atas, anda akan dibawa ke bahagian atau ayat-ayat yang difokus.
Ayat-ayat dalam ruang ini adalah ayat-ayat yang ditarget apabila anda klik arahan di atas.
Ini hanyalah salah satu experiment dalam penggunaan CSS3 dalam web design.
