Resume Update

Sunday, August 30, 2015

Properti CSS Font Family

8/30/2015

Ibaratnya seperti ikan, hewan yang satu ini memiliki banyak jenis dan semua jenis ikan itu tetap dinamai dengan ikan atau keluarga ikan apapun bentuk dan warnanya. Demikian juga dengan font, ia memiliki banyak jenis dan semua jenis font itu juga tetap dinamai dengan font atau keluarga font, dalam dunia desain dikenal dengan font-family. Kita dapat mengatur jenis font apa yang akan ditampilkan dalam sebuah halaman web dengan properti font-family.
Secara garis besar, nilai dari font-family dikelompokkan menjadi dua bagian

Family Name
Generic Family

Jika kita menetapkan Family Name, maka sebaiknya kita juga menambahkan Generic Family di akhir penulisan properti font-family mengingat adanya kemungkinan jenis font yang kita pilih tidak bisa ditampilkan karena tidak tersedia dalam sistem komputer kita. Oleh karena itu, jika font tersebut benar-benar tidak ditemukan, maka browser akan menggunakan standar font-nya masing-masing yaitu Generic Family.

Family Name

Family Name adalah kelompok font yang memilki jenis serupa seperti Trebuchet MS Normal, Trebuchet MS Bold, dan Trebuchet MS Italic. Jenis font ini biasa kita temui ketika kita membuat dokumen dalam office word atau aplikasi sejenis.

Generic Family

Generic Family adalah jenis font standar yang dipersiapkan sebagai pengganti jika font-family yang kita pilih tidak tersedia/terinstal dalam sistem komputer kita. Berikut ini adalah lima jenis Generic Family dengan deskripsi singkat

Serif
Jenis font ini memiliki detail tebal dan tipis pada setiap tepinya.
Sans-Serif
Jenis font ini sifatnya lurus tegak ke atas pada tiap tepinya. Untuk resolusi layar yang lebih kecil, font ini sangat cocok karena akan mudah dibaca.
Cursive
jenis font ini memiliki efek tulis tangan sehinga cocok untuk gambar atau judul website.
Fantasy
Jenis font ini memiliki tipe yang hampir sama dengan cursive namun akan lebih sempurna bila kita menggunakan browser Internet Explorer.
Monospace
Jenis font ini memiliki lebar yang sama pada setiap karakternya sehingga lebih cocok untuk penulisan kode karena efeknya seperti hasil dari mesin ketik.

Sintaks CSS

Sintaks CSS Font-Family

p {
   font-family: value (nama font);
  }

Value dari properti font-family diisi dengan nama font yang kita tentukan
Apapun jenis family name yang kita tentukan sebaiknya diakhiri dengan generic family
Pisahkan dengan tanda koma , antara satu font dengan font yang lain
Jenis font yang terdiri lebih dari satu kata harus diapit dengan tanda petik ganda (double quotes) " " kecuali yang sudah terpisah dengan tanda strip, seperti sans-serif

Contoh

p {
   font-family: "Times New Roman", Times, serif;
  }

Kombinasi Font Family

Di bawah ini merupakan kombinasi font family berdasarkan generik famili.

Serif

font-family	Normal	Bold
Georgia, serif	Teks Normal	Teks Tebal.
"Times New Roman", Times, serif	Teks Normal.	Teks Tebal.
"Palatino Linotype", Palatino, "Book Antiqua", serif	Teks Normal.	Teks Tebal.

Sans-Serif

font-family	Normal	Bold
Arial, Helvetica, sans-serif	Teks Normal.	Teks Tebal.
"Arial Black", Gadget, sans-serif	Teks Normal.	Teks Tebal.
Impact, Charcoal, sans-serif	Teks Normal.	Teks Tebal.
Tahoma, Geneva, sans-serif	Teks Normal.	Teks Tebal.
"Trebuchet MS", Helvetica, sans-serif	Teks Normal.	Teks Tebal.
Verdana, Geneva, sans-serif	Teks Normal.	Teks Tebal.

Monospace

font-family	Normal	Bold
Courier, monospace	Teks Normal.	Teks Tebal.
"Courier New", Courier, monospace	Teks Normal.	Teks Tebal.
"Lucida Console", Monaco, monospace	Teks Normal.	Teks Tebal.

Cursive

font-family	Normal	Bold
"Comic Sans MS", cursive	Teks Normal.	Teks Tebal.
"Courier New", Courier, monospace	Teks Normal.	Teks Tebal.
"Lucida Console", Monaco, monospace	Teks Normal.	Teks Tebal.

CSS Color - Menentukan Warna Teks, Background, dan Properti Lain

8/30/2015

Warna (color) dalam CSS sedikitnya didefiniskan melalui empat metode, yaitu Hexadecimal, Color Names, RGB & RGBA, dan HSL & HSLA, (nama warna). Keempat metode tersebut mampu menghasilkan warna yang sama dengan katakunci nilai yang berbeda. Mungkin pada awal pengembangan website Hexadecimal, dan Color Names (nama warna) sudah ada terlebih dahulu daripada RGB & RGBA, HSL & HSLA. Jika kita sudah mendapatkan katakunci nilai dari warna yang kita harapkan menggunakan salah satu metode di atas, maka kita tinggal menerapkannya dalam sintaks CSS. Tapi sebelum itu, kita akan membahas terlebih dahulu keempat metode tersebut.

Hexadecimal

Hexadecimal Color adalah kode warna yang ditentukan dengan menggunakan format 6 atau 3 karakter dari angka 0 sampai 9 dan huruf dari A sampai F yang dimulai dengan tanda pagar # , contoh #FF4F72 akan menghasilkan warna ini dan #00AABB akan menghasilkan warna ini .
Untuk penerapannya sintaks CSS bisa ditulis seperti berikut

Contoh

 #elemen {color: #FF4F72; background: #00AABB}

Sebagai catatan, jika kita mendapati diantara digit kode yang enam itu terdiri dari huruf atau angka yang sama pada dua digit pertama, kedua, dan ketiganya maka kita bisa meringkas kodenya menjadi tiga digit, contoh #00AABB bisa diringkas menjadi #0AB contoh #FF4F72. Tentu saja hal itu tidak akan bekerja jika pada dua digit pertama, kedua, dan ketiganya ada huruf atau angka yang berbeda. Itu semua terjadi dikarenakan konstruksi kode Hexadecimal Color bekerja seperti RGB (lihat sub bahasan RGB) dimana dua digit pertama untuk red, dua digit kedua untuk green dan dua digit terakhir untuk blue. Oleh karena itu jika dikonversi, digit "0" ekivalen dengan numeral heksadesimal "00", "A" ekivalen dengan "AA", "B" ekivalen dengan "BB", secara keseluruhan "0AB" ekivalen dengan #00AABB.
Selengkapnya untuk mendapatkan kode warna heksadesimal bisa dilihat di bagian ini.

RGB & RGBA

RGB Color adalah singkatan dari Red, Green, dan Blue. Huruf "A" diakhir berarti Alpha yang berfungsi untuk membuat warna transpaaran. Kode warna RGB memang terdiri dari 3 kategori warna: merah, hijau, dan biru dimana ketiga warna itu merupakan warna dasar cahaya layar yang dipancarkan. Sementara untuk menghasilkan warna lain dengan cara mengkombinaksikan ketiga warna dasar tersebut.

Nilai-nilai yang terdapat pada tiap-tiap entitas RGB ditentukan dalam angka desimal mulai 0 sampai 255. Angka terendah (0) akan menghasilkan warna gelap dan angka tertinggi (255) akan menghasilkan warna terang. Logikanya jika kita ingin menentukan warna gelap, misalnya hitam pekat, maka nilai dari tiap entitas RGB harus sama-sama "0", R = 0, G = 0, B = 0. Sebaliknya jika kita menginginkan warna putih terang, maka nilai yang dibutuhkan dari tiap-tiap entitas RGB adalah "255". Selain menggunakan angka desimal bisa juga menggunakan persentase dari 0% (hitam) sampai 100% (putih). Perlu diketahui, pada dasarnya, seperti yang sudah saya utarakan di atas, dikarenakan RGB adalah warna dasar cahaya layar, bisa dikatakan warna hitam adalah warna tanpa cahaya (bayangkan mati lampu), sehingga nilai dari tiap-tiap entitas RGB adalah nol.

Sintaks CSS

selektor {properti: rgb(255, 0, 0)}

Catatan

Nilai entitas dibungkus dalam tanda kurung
Setiap nilai dipisahkan dengan tanda koma, kecuali nilai terakhir

Sementara untuk menghasilkan warna transparan kita harus menggunakan selektor rgba, huruf a berarti alphaa. Nilai dari entitas alpha juga ditentukan dengan angka desimal dari 0 sampai 1. Angka terendah (0) akan menghasilkan warna yang benar-benar transparan bahkan sampai tak terlihat dan angka tertinggi (1) akan mengembalikan warna yang sebenarnya, diantara kedua nilai tersebut kita dapat menentukan nilai 0,1 - 0,2, - 0,3 dst.

Sintaks CSS

selektor {properti: rgba(255, 50, 0, 0,3)}

Secara keseluruhan contoh penerapannya bisa dilihat di bawah ini

Contoh

#main {background-color: rgba(255, 50, 0, 0,3); color: rgb(0, 0, 0)}

Bersambung lagi ya :)

Thursday, August 27, 2015

Properti dan NIlai CSS untuk Teks dan Font

8/27/2015

Ada banyak varian dalam menentukan gaya CSS font dan teks, seperti jenis font apa yang akan kita gunakan, memberi warna teks, bentuk teks apakah akan dibuat normal, miring, ataukah bergaris bawah, ketebalan bentuk teks, atau menentukan besar dan kecilnya teks dan seterusnya. Dengan sentuhan CSS tersebut gaya font dan teks bisa kita sesuaikan dengan kebutuhan kita sehingga tampilan artikel pada web tidak terkesan monoton dan membosankan. Karena itu pada bagian ini kita akan mengetahui bagaimana CSS melakukan hal-hal tersebut dengan properti berserta nilainya (value). Saya telah merangkum properti CSS font dan teks pada tabel di bawah ini, sementara nilai (value) dari masing-masing property tersebut akan kita uraikan satu persatu pada bagiannya masing-masing.