Blog EntryCSS tutorial: fun with fontsJun 9, '06 11:25 PM
for everyone

Diganti jenisnya: udah.
Diganti ukurannya: udah.
Bisa diapain lagi ya, font-font ini?

Berikut ini adalah beberapa perintah formatting font yang gue tau. Mungkin ada juga yang lainnya, kalo ada yang kelewat, tolong kasih tau gue ya…!

Font-style: bisa diisi dengan "normal" atau "italic"*.
Contoh penggunaan, dikombinasikan dengan perintah mengubah jenis dan ukuran huruf yang udah pernah kita bahas sebelumnya:

b {
font-family: verdana;
font-size: 1em;
font-style: normal;
}

Font-variant: bisa diisi dengan "normal" atau "small-caps". Buat yang belum familiar dengan istilah "small-caps", ini adalah tipe penulisan di mana nggak ada huruf kecil yang muncul. Seluruh huruf yang ditampilkan adalah huruf kapital, cuma beda ukurannya doang.Di awal kalimat akan muncul huruf kapital berukuran besar, sedangkan sisanya huruf kapital yang kecilan dikit.
Bingung?
Hm…gimana kalo elo coba sendiri bikin CSS dengan font-variant small-caps? Penulisan perintahnya adalah sebagai berikut:

h1 {
font-variant: small-caps;
}


Font-weight: adalah seberapa bold; atau seberapa tebal; font yang akan kita pake. Lo bisa pake satuan angka, atau tulisan.
Kalo elo mau pake satuan angka, rangenya mulai dari 100 (yang paling tipis) hingga 900 (yang paling tebel). Font yang 'normal' punya font-weight 400, sedangkan tingkat 'bold' yang selama ini sering kita liat punya font-weight 600. Gue udah coba, nomer yang dipake untuk menentukan font-weight ini hanya mengenal nuansa per 100 poin. Jadi kalo lo masukin nilai 435 (misalnya), nggak akan ngaruh di tampilan akhir nanti. Dengan demikian hanya ada 9 derajat ketebalan font yang mungkin ditampilkan. Selain itu perlu dicatat bahwa nggak semua font menyiapkan diri untuk menampilkan 9 derajat ketebalan, jadi jangan heran kalo pas lo coba nanti ada beberapa font yang cuek nggak bergeming saat lo masukin font-weight tertentu.
Cara lainnya untuk menentukan font-weight adalah dengan nulis, "normal" atau "bold".
Contoh penggunaan perintah font-weight ini adalah sebagai berikut:

-Dengan satuan angka:

body {
font-weight: 600;
}

-Dengan tulisan:

body {
font-weight: bold;
}

Text-decoration: ya… dekorasi penghias tulisan… bisa diisi dengan:
· "underline" (garis bawah)
· "overline" (garis di atas font)
· "line-through" (garis tengah /coret)
· "blink" (kedip)
Khusus untuk yang blink, gue coba di Firefox muncul, di IE nggak muncul. Nggak tau ya kalo pake browser yang lainnya. Memang begitulah sifat para browser itu, suka kurang kompak satu dengan lainnya. Dan sebagai himbauan dari gue pribadi, tolong penggunaan fungsi 'blink' ini agak sedikit direm ya… jangan dipake untuk elemen <body> misalnya; karena nanti seluruh halaman web lo akan kedip-kedip bikin senewen. Kan pusing orang liatnya.
Contoh penggunaan text-decoration:

i {
text-decoration: underline;
}

Color: last but not least, memformat warna.
Untuk memformat warna, cukup dengan perintah "color" aja. Untuk warna-warna dasar, bisa dengan ditulis namanya seperti ini:

body {
color: red;
}

Sayangnya cuma ada 16 nama warna yang setau gue bisa dikenali oleh perintah CSS, yaitu:

  1. aqua
  2. black
  3. blue
  4. fuchsia
  5. gray
  6. green
  7. lime
  8. maroon
  9. navy
  10. olive
  11. purple
  12. red
  13. silver
  14. teal
  15. white
  16. yellow

Jadi kalo elo kepingin bikin warna yang di luar warna dasar seperti ijo kendondong, abu-abu bulu monyet, merah bengep atau ungu busuk, lo harus bikin campuran sendiri berdasarkan hex-code.
Contoh penggunaannya seperti ini:

body {
color: #ff0000;
}

Kode warna #ff0000 itu adalah kode untuk warna merah, jadi baik lo masukkan perintah "color: red" maupun "color: #ff0000" hasilnya akan sama.
Lebih lanjut tentang hexcode bisa diklik di journal gue yang ini.

Latihan:
Coba buat CSS yang melibatkan seluruh perintah format font yang dibahas di sini. Coba kombinasikan masing-masing perintahnya untuk ngeliat perbedaan-perbedaan yang ditimbulkannya.

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS

*sebenernya selain 2 pilihan itu, ada lagi yang namanya "oblique". Tapi fon-style oblique ini nampak mirip banget dengan font yang italic, jadi kayaknya nggak terlalu penting untuk dipikirin.


Iklan baris:


25 CommentsChronological   Reverse   Threaded
Comment deleted at the request of the author.
iyasnih wrote on Jun 9, '06
tutorial flash dong gung...
mbot wrote on Jun 9, '06
iyasnih said
tutorial flash dong gung...
iya sabar ya... mau selesaiin serial css ini sampe tuntas dulu (sampe penerapannya di MP) baru mulai serial lainnya.
tapi flash yang gue buat selama ini juga flas bohong2an kok, krn bikinnya pake program swish (versi 'dummy'nya macromedia flash).... hehehe...
menhariq wrote on Jun 9, '06
tutorial "how to get a girl in 10 days" dong.. mwahahahaha.. :p
mbot wrote on Jun 9, '06
tutorial "how to get a girl in 10 days" dong.. mwahahahaha.. :p
"how to get"-nya sih gampang... "how to keep"-nya tuh yang repot :-)
menhariq wrote on Jun 10, '06
mbot said
"how to keep"-nya tuh yang repot :-)
tinggal taro di kulkas aja..

*kan katanya love is like a box of chocolate*

jadi biar ga cair.. taro di kulkas.. :p
variel wrote on Jun 10, '06
kalo gitu dinaikin deh gung "how to get a girls in 30 days" kayak pilem indo yang pernah naik daun dulu
mbot wrote on Jun 10, '06, edited on Jun 10, '06
tinggal taro di kulkas aja..

*kan katanya love is like a box of chocolate*

jadi biar ga cair.. taro di kulkas.. :p
tapi katanya para penggemar coklat sejati, penyimpanan coklat yang baik dan benar tuh bukan di kulkas melainkan di suhu kamar. Soalnya kalo di kulkas coklatnya suka jadi keras dan berbintik putih. Pokoknya turun deh kualitasnya.

*kok jadi ngomongin coklat*
mbot wrote on Jun 10, '06
variel said
kalo gitu dinaikin deh gung "how to get a girls in 30 days" kayak pilem indo yang pernah naik daun dulu
gimana kalo "how to get 30 girls in a day", menantang kan...
adrianliem wrote on Jun 10, '06
lho css ga mengenali deepskyblue dan ivory ya?
Comment deleted at the request of the author.
mbot wrote on Jun 10, '06
lho css ga mengenali deepskyblue dan ivory ya?
eh iya... barusan gue coba, bisa ding...! thanks inputnya.
adrianliem wrote on Jun 10, '06
sip sama2 ^^
kyllian wrote on Jun 10, '06, edited on Jun 10, '06
Makasih, 'Gung...aku link yahhh....
Comment deleted at the request of the author.
shaylendra wrote on Jun 10, '06
belajar dikit...dikit..
nambah ilmu
mbot wrote on Jun 10, '06
kyllian said
Makasih, 'Gung...aku link yahhh....
makasih juga udah dilink...:-)
mbot wrote on Jun 10, '06
belajar dikit...dikit..
nambah ilmu
senang bisa berbagi ilmu :-)
hestiwening wrote on Jun 11, '06
wah baru liat... jng sampe ketinggalan neh... makasih yach mas Agung... aku link juga ah kaya mbak Nita hehehehe
mbot wrote on Jun 11, '06
wah baru liat... jng sampe ketinggalan neh... makasih yach mas Agung... aku link juga ah kaya mbak Nita hehehehe
terima kasih ya, di-link :-)
andhiny wrote on Jun 11, '06
Weleh, yang kemarin aja belum dipraktikin jee... udah ada yang baru.. Makasih ya..
OOT: coklat yang keras kan enak tho?nggak kalah menantang dengan how to get girls in 30 days...:p~
gedembem wrote on Jun 11, '06
Coba aaaaaaaaaaaah.............................
emmaheo wrote on Oct 15, '06
Makasih Mas, aku pelajari dulu...
sek4rat wrote on May 21, '07
thanks ya ilmunya, aq masih bingung mo diapain mp q...hhehehe
saskiasyaf wrote on Sep 26
thanks ya....
Add a Comment
   

Gold Account





This is my Google PageRankâ?¢ - SmE Rank free service Powered by Scriptme
KampungBlog.com - Kumpulan Blog-Blog Indonesia
' /
Mau dikabari via e-mail kalo ada posting baru? Klik di sini

Yang terbaru dari
Planet Holiday
Tour & Travel


pernah baca ini?

Silakan teriak di sini:



tracker
© 2008 Multiply, Inc.    About · Blog · Terms · Privacy · Corp Info · Contact Us · Help

Modified from Mediterranean by John Whittet.
Originally on the CSS Zen Garden.
Used and Modified with permission from the author.