Forum, Blogger, diskusi, ilmu, berbagi, blogging, sharing, ide, inspirasi Kamu Forum

Kamis, 11 November 2010

Dasar-dasar CSS #5

Ini adalah seri terakhir dari Seri Dasar-dasar CSS. Sebelumnya silakan baca edisi terdahulu:

Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Dasar-dasar CSS #4

Pada edisi terakhir ini akan dijelaskan tentang beberapa properti yang belum dibahas, penyingkatan CSS yang biasanya digunakan untuk kompresi, dan penggunaan keterangan !important.

1. Beberapa Properti

Pertama-tama kita akan membahas tentang beberapa properti yang belum dibahas. Yaitu:

1. cursor yaitu untuk kursor/penunjuk mouse. Valuenya yaitu:
  • crosshair: yaitu gambar pointer yang berbentuk seperti tanda plus.
  • text: yaitu gambar pointer yang kalau seperti pada microsoft word (berbentuk seperti pointer teks).
  • wait: yaitu gambar jam pasir seperti kalau loading program.
  • default: yaitu gambar pointer biasa (panah).
  • help: yaitu gambar pointer dengan tanda tanya (seperti pernah diaplikasikan untuk trik membuat help/keterangan).
  • n-resize: yt gambar kursor yang seperti untuk memperlebar/memperkecil suatu objek (seperti pada paint). Arahnya menghadap ke utara.
  • ne-resize: sama seperti n-resize tetapi arahnya menghadap ke timur laut.
  • e-resize: arahnya menghadap ke timur.
  • se-resize: arahnya menghadap ke tenggara.
  • s-resize: bentuknya sama seperti n-resize.
  • sw-resize: bentuknya sama seperti ne-resize.
  • w-resize: bentuknya sama seperti e-resize.
  • nw-resize: sama dengan se-resize.
  • none: tidak memakai kursor.
  • url('URLGAMBARCURSOR'): cursor memakai gambar (ganti URLGAMBARCURSOR dengan URL gambar cursor yang diinginkan). (Baca juga: Cara Membuat Custom Cursor)
2. list-style: Tampilan daftar. Ada 3 properti untuk tampilan daftar.
  • list-style-position: Posisi tampilan daftar. Nilainya inside untuk didalam dan outside: untuk diluar.
  • list-style-type: Bentuk bullet. Nilainya:
    • disc: tampilan bullet seperti bentuk bulat penuh.
    • square: tampilan bentuk kotak.
    • circle: bentuk bulat tetapi hanya outsidenya.
    • decimal: berbentuk angka (1, 2, 3, dst. seperti penggunaan tag <ol>).
    • upper-roman: berbentuk angka romawi dengan huruf besar (I, II, III, dst.)
    • lower-roman: berbentuk angka romawi dengan huruf kecil (i, ii, iii, dst.)
    • upper-alpha: berbentuk alfabet dengan huruf besar (A, B, C, dst.)
    • lower-alpha: berbentuk alfabet dengan huruf kecil (a, b, c, dst.)
    • none: tidak memakai bullet
  • list-style-image: url('URLGAMBARBULLET'): Gambar bullet. Ganti URLGAMBARBULLET dengan URL dari gambar bullet yang diinginkan.
3. overflow: kondisi jika isi konten melewati batas width/height yang telah ditentukan. Misalnya width ditentukan 100px dan height 100px tetapi ternyata melewati batas tersebut. Nah, nilai dari overflow ini adalah:
  • visible: yaitu isi konten yang melewati batas tetap ditampilkan.
  • hidden: yaitu isi konten yang melewati batas tidak ditampilkan sehingga yang ditampilkan hanya teks yang masih berada didalam batasnya.
  • auto: yaitu jika kelebihan maka akan ditampilkan scroll-nya. Jika tidak ya maka tidak.
  • scroll: yaitu baik kelebihan ataupun tidak maka akan tetap ditampilkan scrollnya, tetapi jika tidak kelebihan maka scrollnya nonaktif.
4. opacity: yaitu transparansi objek. Biasanya diikuti dengan properti filter: Alpha(Opacity=x, FinishOpacity=y); Dengan ketentuan x = nilai yang ditentukan properti opacity (1 = padat/tdk transparan, 0 = tidak kelihatan, antara 0 s/d 1 = transparan) dan y = 100x dari nilai x. Misal:
body{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}
Berikut contoh penggunaan properti diatas.
<html>
<head>
<title>Belajar CSS - Part 5</title>
<style>
<!--
body{
cursor: crosshair;
}
.class1{
list-style-position: inside;
list-style-type: square;
}
.class2{
list-style-position: inside;
list-style-image: url('http://forum.plurk-id.org/Smileys/default/47d20905d017c396d67b4a30c9ac9b10.png');
}
#id1{
width:200;
height:200;
overflow:hidden;
}
#id2{
width:200;
height:200;
overflow:auto;
}
#id3{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}
-->
</style>
</head>
<body>
<ul class="class1">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul class="class2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Buat file seperti contoh diatas dengan notepad lalu save as dengan nama dasar dasar css 5 properti.html dan ganti dropdown Save As Type dengan All Files lalu save dan buka di browser. Kira-kira hasilnya seperti ini.
2. Penyingkatan CSS

Ternyata nggak cuma SMS aja yang disingkat. (goodluck) CSS pun bisa disingkat. Penyingkatan dilakukan supaya lebih cepat diload. Ada beberapa macam penyingkatan.

1. Penyingkatan properti.

Beberapa properti yang bisa disingkat:
  • font
  • border
  • background (image)
  • margin
  • padding
Penyingkatan font

Sintaks penyingkatannya seperti ini.
font: font-weight font-size font-family;
Misal:
font: bold 24px Verdana,Helvetica;
Ket:

Yang perlu diperhatikan, untuk penulisan font-family terutama yang merupakan font generik, diantara font-font generik jangan ada spasi.

Penyingkatan border

Sintaks:
border: border-style border-width border-color;
Misal:
border: solid 1px #CCC;
Ket:

Untuk mendefinisikan border hanya untuk border atas, kanan, bawah, maupun kiri, maka gunakan ,code>border-top, border-right, border-bottom, border-left ketimbang hanya border saja (pada bagian properti).

Penyingkatan background

Sintaks:
border: url('URLGAMBAR') background-repeat position-x position-y;
Ket:

Ganti URLGAMBAR dengan URL background.

position-x adalah posisi horizontal, sedangkan position-y adalah posisi vertikal. Misal:
border: url('http://i49.tinypic.com/2qmqcmc.jpg') repeat-y left 100px;
Penyingkatan Margin/Padding

Untuk margin/padding ada beberapa kondisi.

1. Jika kondisinya nilai margin/padding semua sama, maka sintaksnya: margin/padding: nilai_seluruhnya; Misal: margin: 10px; (nilai margin atas/bawah/kanan/kiri = 10px)
2. Jika nilai beda semua, maka sintaksnya: margin/padding: nilai_atas nilai_kanan nilai_bawah nilai_kiri; Misal: padding: 3px 4px 5px 6px; (3px padding atas, 4px kanan, 5px bawah, 6px kiri)
3. Jika nilai margin/padding atas dan bawah sama, dan juga nilai kiri/kanan juga sama, maka sintaksnya: margin/padding: nilai_atas nilai_kanan; Misal: margin: 5px 10px; (margin atas/bawah 5px, kana/kiri 10px)

2. Penyingkatan tag/class/id.


Jika ada 2 ID yang mempunyai properti sama, maka disingkat saja.

Misal
#id1{
color:#CCC;
width:200px;
}
.class1{
color:#FFF;
width:200px;
}
Maka disingkat jadi:
#id1, .class1{
width:200px;
}
#id1{
color:#CCC;
}
.class1{
color:#FFF;
}
Contoh penggunaan penyingkatan:
<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>
<!--
.class1{
background:url('http://forum.plurk-id.org/Smileys/default/idiot.gif') no-repeat 30px 10px;
border:solid 3px green;
font: lighter 16px Arial,Tahoma,Verdana;
}
#id1{
width:150;
}
#id2{
width:100;
}
#id1, #id2{
height:200;
overflow:auto;
}
-->
</style>
</head>
<body>
<div class="class1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Lalu hasil eksekusi di browser akan seperti ini.
3. Penggunaan !important

Keterangan !important digunakan untuk menerangkan pentingnya suatu properti, sehingga properti tersebut yang didahulukan. Sintaksnya seperti ini.
selector{
properti:value; !important
}
Saya jelaskan dulu. Begini. Jika ada selector yang sama dengan property sama tetapi value yang berbeda, maka value yang disebutkan terakhir akan diprioritaskan. Misal:
#id1{
color:blue;
}
#id1{
color:green;
}
Maka #id1 akan berwarna hijau, karena dituliskan terakhir. Lain cerita dengan yang ini.
#id1{
color:blue; !important
}
#id1{
color:green;
}
Maka #id1 akan berwarna biru. Nah, kalau yang ini?
#id1{
color:blue;
}
#id1{
color:green; !important
}
Ya pasti berwarna hijau lah, orang disebutinnya terakhir, pake !important lagee... (lmao) (haha)

Nah, kalo yang ini?
#id1{
color:blue; !important
}
#id1{
color:green; !important
}
Ya sama kayak yang tadi: ijo! (haha)

!important ini sangat berguna untuk anda yang suka mengoprek CSS, misalnya dalam penggunaan layout Plurk atau Multiply. Dimana mungkin sudah disetting duluan CSS-nya oleh pembuat situs. Jadi jika gagal berubah layoutnya padahal sintaks kodenya sudah bener, maka bisa gunakan !important ini.

Berikut contoh penggunaannya.
<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>
<!--
#id1{
color:blue;
}
#id1{
color:green;
}
#id2{
border: solid 5px grey; !important
}
#id2{
border: solid 1px grey;
}
#id3{
background-color:#CCCCCC;
}
#id3{
background-color:yellow; !important
}
#id4{
width:300px; !important
}
#id4{
width:350px; !important
}
-->
</style>
</head>
<body>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Berikut hasil eksekusinya di browser.
Akhirnya serial Dasar-dasar CSS habis juga. Memang lumayan panjang yang edisi #5 tetapi semoga bermanfaat. Dan tetap stay tune di Gudang Ilmu... (goodluck)


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



7 komentar:

Media Nusantara mengatakan...

salam kenal .
makasih yaa ka .
nambah wawasan banget .

Tour Travel mengatakan...

thanks infonya, bisa dicoba neh

Car Air Freshener mengatakan...

hallo !! .
lumayan nii buat nambah wawasan .
makasih yaa .

Sports Shoes mengatakan...

wahh .
ilmu baru nii .
makasih yaa .
insya allah bermanfaat .

TRIK SULAP ANGKA mengatakan...

Wah, bisa belajar CSS di sini nih.


Salam.

Tutorial Blog mengatakan...

wah keren,,,aku jadi bisa belajar CSS nih,,
nice post...
lamkenal...

Nama Bayi mengatakan...

seru nee .
bisa belajar tentang web disini .

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.