Showing posts with label CSS Font & Teks. Show all posts
Showing posts with label CSS Font & Teks. Show all posts

03/04/2016

CSS Text Shadow (Efek Bayangan untuk Teks)

Properti CSS text shadow digunakan untuk menambah efek shading atau bayangan pada teks. Efek tersebut digunakan untuk menambahkan kreasi bayangan halus sehingga teks akan tampak lebih terangkat dari halaman HTML, atau menjorok kedalam, atau juga untuk menciptakan efek blur/memburam.

text-shadow

Nilai Properti CSS Text Shadow

Efek-efek shading pada CSS Text Shadow dibangun atas 4 (empat) nilai utama: sumbu offset-x, sumbu offset-y, nilai pembentuk efek blur, dan warna shading atau bayangan. Lebih jelasnya perhatikan tabel berikut.
text-shadow: 0px 2px 3px #CCCCCC;
0px sumbu offset-x: horizontal
2px sumbu offset-y: vertical
3px pembentuk karakter bayangan-blur
#CCCCCC warna bayangan

  1. offset-x : Nilai minimal adalah 1 (satu). Jika nilai berupa bilangan positif, bayangan teks akan mengalir ke kanan. Jika nilai berupa bilangan negatif, bayangan teks akan mengalir ke kiri
  2. offset-y : Nilai minimal adalah 1 (satu). Jika nilai berupa bilangan positif, bayangan teks akan mengalir ke bawah. Jika nilai berupa bilangan negatif, bayangan teks akan mengalir ke atas
  3. blur : Jika tidak ditentukan nilainya, maka nilai defaultnya adalah 0 (nol). Semakin besar nilai yang ditentukan, semakin besar pula tingkat keburamannya. Semakin kecil nilai yang ditentukan, semakin kecil pula tingkat keburamannya.
  4. Warna bayangan : Warna bayangan bisa ditentukan dengan warna hexadecimal, RGB, atau yang lain (klik tautan ini: CSS Color). Jika nilai tidak ditentukan, maka warna bayangan akan memiliki nilai yang sama dengan warna teks

Contoh Penerapan Sintaks CSS Text Shadow


Selengkapnya, untuk melihat ragam effek CSS Text Shadow klik tautan berikut Text Shadow Effect
Kembali CSS Font dan Teks

24/03/2016

Properti CSS White Space

Css white-space berfungsi untuk mengatur baris teks di dalam elemen apakah teks akan mengalir melewati batas elemen atau mengisi baris baru tanpa harus melewati batas elemen dan lain sebagainya.


Nilai Properti CSS White Space

  • normal
  • nowrap
  • pre
  • pre-wrap
  • pre-line
  1. normal
    • Ini adalah value default untuk baris teks dimana teks akan membuat baris baru sebelum keluar melebihi batas elemen. Anda tidak perlu menuliskan sintaks apapun untuk value normal.
  2. nowrap
    • Value nowrap pada properti css white-space mendefinisikan bahwa teks akan dibiarkan mengalir dalam satu baris dan tidak terpengaruh oleh batas elemen. Jika teks tetap mengalir dalam satu baris melebihi induk elemen pembungkus utama, maka browser akan menampilkan scroll secara horizontal - kecuali jika anda memotong baris teks dengan tag <br>
  3. pre
    • Value pre pada properti css white-space mendefiniskan baris teks akan ditampilkan sama persis seperti yang anda ketikkan, baik spasi, line break atau paragraf, tapi juga membiarkan teks keluar dari batas elemen
  4. pre-wrap
    • Value pre-wrap pada properti css white-space sedikit hampir sama dengan value pre hanya saja apabila baris teks akan mengalir keluar melebihi batas elemen ia akan membuat baris baru sehingga baris teks tetap berada di dalam area pembungkusnya.
  5. pre-line
    • Jika pada value pre-wrap spasi akan ditampilkan sama persis seperti apa yang anda tulis, maka pada value pre-line jarak setiap per-kata hanya akan menampilkan satu spasi seperti pada umumnya walaupun anda mengetikkan lebih dari satu spasi.

Sintaks CSS White Space

Sintaks CSS

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
Contoh Penerapan Sintaks CSS White Space

Kembali ke CSS Font dan Teks

20/03/2016

CSS Text Transform (Konversi Teks dalam Karakter Huruf Besar dan Huruf Kecil)

Pada umumnya, CSS Text Transform digunakan untuk mengatur judul artikel, deskripsi, atau huruf pertama pada baris teks. Nilai dasar (default) dalam sebuah elemen adalah none, artinya selama kita tidak menentukan aturan css teks tranformer, maka efek konversi karakter teks tidak akan muncul, kecuali sebagaimana keadaan penulisannya.

Fungsi CSS Text Transform :: Menentukan Huruf Kapital (Huruf Besar) pada Teks

CSS Text Transform berfungsi untuk mengkonversi karakter teks menjadi huruf besar (kapital) atau huruf kecil di awal kalimat, awal kata, atau seluruh karakter huruf.

Nilai Properti CSS Text Transform

  • none
  • uppercase
  • lowercase
  • cpitalize
  • inherit
  1. none
    • tidak menerapkan gaya konversi teks ke huruf besar dalam bentuk apapun, sehingga teks hanya akan ditampilkan sebagaimana keadaaan penulisannya
  2. uppercase
    • Semua karakter teks dikonversi menjadi huruf besar (kapital)
  3. lowercase
    • Semua karakter teks dikonversi menjadi huruf kecil
  4. capitalize
    • Mengkonversi karakter pertama dari setiap kata dalam kalimat, dan membiarkan karakter sisanya dalam keadaan normal
  5. inherit
    • Konversi teks menjadi huruf besar atau kecil sesuai aturan CSS yang telah ditentukan pada elemen induknya.

Sintaks CSS Text Transform

Sintaks CSS

text-Transform: none;
text-Transform: uppercase;
text-Transform: lowercase;
text-Transform: capitalize;
text-Transform: inherit;
Tag HTML yang Mendukung CSS Text Transform
  • html
  • body
  • div
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • p
  • a
  • b
  • i
  • u
  • abbr
  • acronym
  • address
  • baseFont
  • bdo
  • big
  • blink
  • blockQuote
  • button
  • caption
  • center
  • cite
  • code
  • col
  • colGroup
  • dd
  • del
  • dfn
  • dir
  • dl
  • dt
  • em
  • fieldSet
  • font
  • form
  • input:button
  • input:file
  • input:password
  • input:reset
  • input:search
  • input:submit
  • input:text
  • textArea
  • ins
  • isIndex
  • kbd
  • xmp
  • label
  • legend
  • listing
  • marquee
  • menu
  • nobr
  • ol
  • ul
  • li
  • optGroup
  • option
  • plainText
  • pre
  • q
  • rt
  • ruby
  • s
  • samp
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • table
  • tBody
  • td
  • th
  • tr
  • tt
  • tFoot
  • tHead
  • var
Contoh Penerapan Sintaks CSS Text Transform

Kembali ke CSS Font dan Teks

19/03/2016

CSS Text-Indent (Indentasi baris pertama dalam Paragraf)

Dalam sebuah paragraf (seperti pada fungsi tag HTML <p>), kita dapat menentukan indentasi garis pertama dengan CSS Text Indent. Yaitu memberikan ruang secara horizontal pada barisan pertama sebuah paragraf agar tampak lebih menjorok ke dalam dan membiarkan baris berikutnya dalam keadaan normal (tidak menjorok).

CSS Text Indent
Nilai Properti CSS Text Indent
  1. Lenght
    • Baris pertama yang menjorok ke dalam ditentukan oleh satuan nilai tetap (px, cm, dll)
  2. percentage
    • Besaran nilai ruang yang kosong pada baris pertama merupakan persentase dari lebar elemen blok yang membungkusnya
  3. inherit
    • Yaitu pengaturan indentasi baris paragraf sesuai aturan yang telah ditentukan pada elemen induknya
Sintaks CSS Text Indent

Sintaks CSS

text-indent: 80px; (lenght)
text-indent: 3%; (percentage)
text-indent: inherit;
Tag HTML yang Mendukung CSS Text Indent
  • body
  • html
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • address
  • blockQuote
  • button
  • caption
  • center
  • dd
  • dir
  • div
  • dl
  • dt,
  • fieldSet,
  • form,
  • input:button,
  • input:reset,
  • input:submit,
  • isIndex
  • legend
  • ol
  • ul
  • li
  • listing
  • marquee
  • menu
  • p
  • plainText
  • xmp
  • pre
  • table
  • td
  • th
  • tr
  • textArea
Contoh Penerapan Sintaks CSS Text Indent

08/03/2016

CSS Text Decoration (Dekorasi Garis Teks)


CSS Text Decoration digunakan untuk garis dekorasi teks pada sebuah elemen dengan model garis bawah, garis atas, garis tengah atau menambahkan efek teks berkedip. Pada level CSS3, kita dapat menentukan warna garis dan beberapa gaya garis seperti garis normal, garis putus-putus, dan garis titik.
Nilai Properti CSS Text Decoration
  • none
  • underline
  • overline
  • line-through
  • blink
  1. none
    • Ini adalah nilai awal, artinya dengan menerapkan nilai none sama dengan tidak menentukan gaya apapun
  2. underline
    • garis ditempatkan di bawah teks
  3. overline
    • Garis ditempatkan di atas teks.
  4. line-through
    • Garis ditempatkan di tengah teks
  5. blink
    • Efek teks berkedip, yaitu hilang dan timbul secara bergantian. Nilai blink ini, pada level CSS3 sudah digantikan dengan CSS Animation.
Sintaks CSS Text Decoration

Sintaks CSS

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
Pada level CSS3, meskipun tidak didukung oleh sebagian browser, ada beberapa properti pendukung seperti
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
namun tetap saja properti text-decoration mampu mewakli ke-tiga properti pendukung tersebut dengan contoh penulisan sintaks seperti berikut

Sintaks CSS

text-decoration: underline solid #FFF000;
Tag HTML yang Mendukung CSS Text Decoration
  • a
  • abbr
  • acronym
  • address
  • b
  • baseFont
  • bdo
  • big
  • blink
  • blockQuote
  • body
  • button
  • caption
  • center
  • cite
  • code
  • col
  • colGroup
  • dd
  • del
  • dfn
  • dir
  • div
  • dl
  • dt
  • em
  • fieldSet
  • font
  • form
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • html
  • i
  • input:button
  • input:file
  • input:password
  • input:reset
  • input:search
  • input:submit
  • input:text
  • ins
  • isIndex
  • kbd
  • label
  • legend
  • li
  • listing
  • marquee
  • menu
  • nobr
  • ol
  • optGroup
  • option
  • p
  • plainText
  • pre
  • q
  • rt
  • ruby
  • s
  • samp
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • table
  • tBody
  • td
  • textArea
  • tFoot
  • th
  • tHead
  • tr
  • tt
  • u
  • ul
  • var
  • xmp
Contoh Penerapan Sintaks CSS Text Decoration

03/03/2016

CSS Text Align (Perataan Teks)

align
CSS Text Align digunakan untuk mengatur perataan baris teks secara horizontal (dalam elemen pembungkusnya) dari arah/ posisi yang kita tentukan.
Nilai Properti CSS Text Align
  • left
  • right
  • center
  • start
  • end
  • justfy
  • inherit
  1. left
    • Rata kiri, berarti barisan teks pertama kedua ketiga dan seterusnya akan mengalir rata sejajar dari sisi kiri ke kanan (rata sejajar hanya bagian kiri dari barisan teks saja)
  2. right
    • Rata kanan, berarti barisan teks pertama kedua ketiga dan seterusnya akan mengalir rata sejajar dari sisi kanan ke kiri (rata sejajar hanya bagian kanan dari barisan teks saja)
  3. center
    • rata tengah, berarti barisan teks akan mengalir dari titik paling tengah.
  4. start
    • Posisi teks sejajar dengan arah teks dimana teks dimulai. Artinya, sama dengan nilai left, ketika teks berjalan dari kiri ke kanan dan sama dengan nilai right, ketika teks berjalan dari kanan ke kiri.
  5. end
    • Posisi teks sejajar dengan arah teks dimana teks berakhir. Artinya, sama dengan nilai right, ketika teks berjalan dari kiri ke kanan dan sama dengan nilai left, ketika teks berjalan dari kanan ke kiri.
  6. justfy
    • Rata kanan dan kiri, berarti barisan teks pertama kedua ketiga dan seterusnya akan mengalir rata sejajar dari sisi kanan dan kirinya. Dalam kondisi ini, browser akan memberikan spasi diantara kata-kata untuk melakukan perataan baris teks baik sisi kiri maupun kanan.
  7. inherit
    • Format perataan baris teks mengikuti format induk elemen.
Sintaks CSS Text Align

Sintaks CSS

text-align: left;
text-align: right;
text-align: center;
text-align: justfy;
text-align: start;
text-align: end;
text-align: inherit;
Tag HTML yang Mendukung CSS Text Align
  • html
  • body
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • address
  • blockQuote
  • caption
  • center
  • col
  • colGroup
  • dd
  • dir
  • div
  • dl
  • dt
  • fieldSet
  • form
  • isIndex
  • legend
  • listing
  • marquee
  • menu
  • ol
  • ul
  • li
  • p
  • plainText
  • pre
  • xmp
  • table
  • td
  • textArea
  • th
  • tr
Contoh Penerapan Sintaks CSS Text Align
Kembali ke CSS Font dan Teks

28/02/2016

Properti CSS Word Spacing (Jarak Per-Kata)

no-image
Properti CSS Word Spacing berfungsi untuk menentukan jarak dengan memberikan ruang spasi antar satu kata dengan kata yang lain agar tampak lebih renggang atau lebih rapat. Perbedaannya dengan Properti CSS Letter Spacing adalah CSS Word Spacing mengatur jarak per-kata, sementara CSS Letter Spacing mengatur jarak antar huruf yang ada di dalam teks.
Nilai/value CSS Word Spacing
  1. normal
    • Ruang spasi per-kata dalam kondisi normal seperti yang didefinisikan browser
  2. lenght
    • Dengan menentukan nilai pada tipe ukuran lenght, kita dapat menentukan jarak yang lebih lebar atau justru lebih sempit (dengan nilai negatif) pada ruang spasi antar kata dengan kata yang lain
  3. inherit
    • Nilai inherit mengambil nilai yang sama dengan induk elemen
Sintaks CSS

Sintaks

#uup {word-spacing: nilai/value}
Tag HTML yang Mendukung CSS Word Spacing
  • html
  • body
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • a
  • abbr
  • acronym
  • address
  • b
  • baseFont
  • bdo
  • big
  • blink
  • button
  • caption
  • center
  • cite
  • code
  • col
  • colGroup
  • dd
  • del
  • dfn
  • dir
  • div
  • dl
  • dt
  • em
  • fieldSet
  • font
  • form
  • p
  • i
  • u
  • span
  • blockQuote
  • input:button
  • input:file
  • input:password
  • input:reset
  • input:search
  • input:submit
  • input:text
  • ins
  • isIndex
  • kbd
  • label
  • legend
  • listing
  • marquee
  • menu
  • nobr
  • ol
  • ul
  • li
  • optGroup
  • option
  • plainText
  • pre
  • q
  • rt
  • ruby
  • s
  • xmp
  • samp
  • select
  • small
  • strike
  • strong
  • sub
  • sup
  • table
  • tBody
  • textArea
  • tFoot
  • th
  • tHead
  • td
  • tr
  • tt
  • var
Contoh Penerapan Sintaks CSS
Untuk mempermudah pemahaman kita, berikut ini saya sertakan contoh penggunaan sintak CSS Word Spacing
Kembali ke CSS Font dan Teks

31/01/2016

Properti CSS Letter-Spacing (Jarak Antar Teks)

Browser biasanya memiliki peraturan dasar dalam menentukan jarak atau spasi antara karakter teks berdasarkan jenis font. Namun kita dapat merubah peraturan standar browser dengan menggunakan CSS Letter Spacing. Namun tentu saja kita harus tetap memperhatikan kenyamanan pembaca.

Fungsi CSS Letter Spacing :: Mengatur Jarak atau Spasi Antar Teks

CSS Letter Spacing berfungsi untuk mengatur jarak / spasi antar satu huruf dengan huruf yang lain. CSS Letter Spacing digunakan untuk gaya penulisan huruf (biasanya untuk penulisan judul) agar jarak / spasi masing-masing huruf tampak lebih rapat dan atau justru tampak lebih renggang.
CSS Letter Spacing Nilai/Value CSS Letter Spacing
  1. normal
  2. ukuran Lenght (panjang) (px, pt, em, dll)
  3. inherit
Nilai positif akan menghasilkan jarak / spasi antar huruf menjadi lebih renggang sementara nilai negatif akan menghasilkan jarak / spasi antar huruf menjadi lebih rapat.
Contoh Sintaks CSS Letter Spacing

Sintaks CSS

span {letter-spacing: normal}
span {letter-spacing: 3px}
span {letter-spacing: inherit}
Contoh Penerapan CSS Letter Spacing Di bawah ini saya sertakan contoh penggunaan CSS Letter Spacing dari dua kriteria nilai. Tag span menggunakan nilai positif sementara tag div menggunakan nilai negatif.

Kembali ke CSS Font dan Teks

19/01/2016

Properti CSS Line Height

Sebuah halaman web yang memiliki paragraf yang telalu panjang dengan banyak teks seringkali membuat pembaca merasa kurang nyaman karena memang secara default browser hanya memiliki nilai tinggi baris yang sedikit sempit. Oleh karena itu CSS Line Height membantu sebuah paragraf dengan banyak baris teks agar lebih mudah dibaca.

Fungsi CSS Line Heigt :: Mengatur Jarak / Spasi Baris atas dan Baris Bawah dalam Paragraf

CSS Line Height berfungsi untuk mengatur tinggi baris dalam sebuah paragraf, yaitu jarak (spasi) antara baris atas dan baris bawah. Artinya, Jika semakin besar nilai yang ditentukan, maka jarak antara baris atas dan baris bawah paragraf akan semakin tampak berjauhan. Sebaliknya, jika semakin kecil nilai yang ditentukan, maka jarak antara baris atas dan baris bawah paragraf akan semakin tampak berdekatan.
CSS Line Height
Contoh Penulisan Sintaks CSS Line Height

Sintaks CSS

line-height: (value/nilai)

Nilai untuk Properti CSS Line Height

  1. normal
  2. lenght , px
  3. nomor
  4. persen, %
  5. inherit
Contoh Penerapan CSS Line Height

03/01/2016

Properti CSS Font Size (Ukuran Font)

no-image
Properti CSS Font Size digunakan untuk menentukan ukuran tinggi dan besaran sebuah font ketika ditampilkan dalam browser. Nilai dari font size itu sendiri memiliki bermacam-macam unit, setiap masing-masing unit nilai tersebut memiliki sejarah pengembangan dan fungsinya sendiri. Kesemua unit nilai tersebut sedikitnya terbagi dalam dua kategori, unit relative dan unit absolute

Unit Relative
Unit relative adalah unit yang besaran nilainya akan menghasilkan ukuran yang tidak tetap dan tergantung pada beberapa hal seperti nilai yang ditentukan pada elemen induk, ukuran lebar viewport, ukruan tinggi viewport (layar area konten pada browser diluar toolbars, tab, address box atau lainnya), dll.
Berikut ini gambaran singkat dari unit relative
Nilai Deskripsi
% Relatif terhadap nilai yang telah ditentukan pada elemen induk
em Relatif terhadap nilai yang telah ditentukan pada elemen induk (dua kali lebih besar
rem Relatif terhadap ukuran elemen utama(HTML)
Kata Kunci xx-small, x-small, small, medium, large, x-large, xx-large
vw Relatif terhadap 1/100 ukuran lebar viewport
vh Relatif terhadap 1/100 ukurang tinggi viewport
vmin Relatif terhadap 1/100 ukuran terkecil viewport(lebar/tinggi)
vmax Relatif terhadap 1/100 ukuran terbesar viewport(lebar/tinggi)

Contoh penulisan CSS Font Size unit relatif adalah seperti berikut
#elemen {font-size: 1em}

Sebagai catatan, apabilai kita tidak menentukan nilai CSS font-size pada sebuah dokumen HTML, ada nilai default yang digunakan oleh kebanyakan browser untuk menentukan ukuran font pada tag < body > dan < HTML >, yaitu 100%, artinya 100% = 1em = 1rem = 16px = 12pt.

Nilai Absholute
Nilai absholute adalah nilai-nilai yang didasarkan pada ukuran media printing dan tidak terpengaruh oleh kondisi css tag induk elemen HTML (parent) atau viewport.
Nilai Deskripsi
px Satuan pixel titik layar, 1px = 1/96 dari 1in
mm Satuan milimet
cm Satuan centimeter, 1cm = 10mm
di satuan inchi, 1di = 2,54cm
pt satuan point, 1pt = 1,72 inchi
pc Satuan pica, 1pc = 12pont

kembali ke CSS Font dan Teks

30/12/2015

Properti CSS Font Weight

no-image
Ketebalan huruf sangat diperlukan untuk menandai bebrapa kata atau kalimat yang dirasa penting, seperti judul artikel, sub judul, isitilah2 asing, dan lain sebagainya. Beberapa jenis Font biasanya memiliki variant ketebalan karakter teks pada level normal, sedang, tebal, dan sangat tebal. Namun, jenis font yang lain tidak memiliki variant ketebalan karakter teks pada level tertentu. Tingkat ketebalan karakter teks tersebut didefinisikan dengan nilai dari 100, 200, 300, hingga 900.

Fungsi Css Font Weight :: Mengatur Ketebalan Karakter Teks / Huruf

Properti CSS Font Weight digunakan untuk menentukan ketebalan huruf. Nilai dari font weight umumnya adalah normal dan bold. Seperti pada umumnya, nilai normal berarti ketebalan huruf masih berada dalam kategori normal, sedangkan bold akan menciptakan efek huruf yang lebih tebal dari pada nilai normal.
Nilai Properti CSS Font Weight Di samping nilai normal dan bold, terdapat nilai-nilai lain untuk properti CSS Font-Weight, di bawah ini nilai untuk font weight secara lengkap :

Nilai dengan Kata Kunci
  1. normal
  2. bold
  3. bolder
  4. lighter
Nilai dengan Angka
  1. 100
  2. 200
  3. 300
  4. 400
  5. 500
  6. 600
  7. 700
  8. 800
  9. 900
Contoh Sintaks CSS Font Weight

Sintaks CSS Font Weight

span {font-weight: normal}
span {font-weight: bold}
span {font-weight: bolder}
span {font-weight: lighter}
span {font-weight: 400}
Sebagai catatan, nilai dengan kata kunci normal setara dengan nilai angka 400, sedangkan nilai dengan kata kunci bold setara dengan nilai angka 700.

Efek ketebalan font dengan nilai angka-angka di atas akan terlihat jika sebuah font benar-benar meliki versi ketebalan pada masing-masing rentang nilai 100 - 900. Namun jika font tidak memilikinya, maka browser hanya akan menampilkan versi normal untuk nilai angka maksimal 400, untuk nilai yang lebih besar dari 400, browser akan menampilkan versi bold. Font standar seperti Times New Roman, Arial, Tahoma, Georgia, dll tidak memiliki versi ketebalan selain di nilai angka 400 dan 700.
Contoh Penerapan Sintaks CSS Font Weight Di bawah ini, saya sertakan contoh penggunaan CSS Font Weight menggunakan font Open Sans yang saya ambil dari google font dengan model penulisan Eksternal CSS.

27/12/2015

Properti CSS Font Style (Gaya Normal - Miring)

no-image
Dibutuhkan gaya khusus untuk beberapa kata atau kalimat yang ingin kita tekankan di atas halaman. Dengan properti CSS Font Style, teks akan ditampilkan dengan dua gaya: Italic dan obligue, sehingga dengan gaya tersebut beberapa kata atau kalimat yang kita tekankan memiliki karakter khusus dari kata atau kalimat yang lain.

Fungsi CSS Font-Style ::Menampilkan gaya huruf miring

Properti CSS Font Style digunakan untuk menentukan gaya teks apakah akan ditampilkan dengan model miring ataukah normal.
Untuk jenis font yang tidak memiliki varian italic dan oblique, maka browser akan tetap menampilkan gaya tersebut secara artifisial. Hanya saja, efek yang muncul tidak sebaik font yang benar-benar memiliki variant italic dan oblique. Nilai Properti CSS Font Style
  • normal
  • italic
  • oblique
  • inherit
  1. Normal
    • normal adalah nilai default (dasar), dan memberikan efek karakter tegak. nilai normal bisa digunakan untuk memastikan efek huruf tegak pada anak elemen HTML yang induk elemen HTML-nya menerapkan efek italic atau oblique
  2. Italic (miring)
    • Sebagian besar jenis font memiliki versi karakter khusus gaya italic. Jikan nilai italic ditentukan pada properti font-style maka browser akan menampilkan versi karakter italic pada font tersebut.
  3. Oblique (miring)
    • Secara visual memang tidak begitu tampak jelas perbedaan antara italic dan oblique. Namun, nilai oblique bisa disebut sebagai nilai italic buatan. Sebab, browser akan memaksa font untuk ditampilkan dalam keadaan miring meskipun jenis font yang digunkan tidak memiliki versi italic.
  4. Inherit
    • Nilai ini mewarisi gaya font style yang ditentukan pada induk elemen
Contoh Sintaks CSS Font Style

Sintaks CSS

span {font-style: normal}
span {font-style: italic}
span {font-style: oblique}
span {font-style: inherit}
Contoh Penarapan CSS Font Style
kembali ke CSS Font dan Teks

20/07/2015

Properti CSS Font Family

Font memiliki banyak jenis dan semua jenis font itu dinamai dengan font family atau keluarga font, kalau boleh saya ibaratkan, font itu 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. Karena itu kita dapat mengatur jenis font apakah yang akan ditampilkan dalam sebuah halaman web menggunakan properti font-family.
Secara garis besar, nilai dari font-family dikelompokkan menjadi dua bagian
  1. Family Name
  2. 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
  1. Serif
    Jenis font ini memiliki detail tebal dan tipis pada setiap tepinya.
  2. 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.
  3. Cursive
    jenis font ini memiliki efek tulis tangan sehinga cocok untuk gambar atau judul website.
  4. Fantasy
    Jenis font ini memiliki tipe yang hampir sama dengan cursive namun akan lebih sempurna bila kita menggunakan browser Internet Explorer.
  5. 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);
  } 
  1. Value dari properti font-family diisi dengan nama font yang kita tentukan
  2. Apapun jenis family name yang kita tentukan sebaiknya diakhiri dengan generic family
  3. Pisahkan dengan tanda koma , antara satu font dengan font yang lain
  4. 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.

kembali ke CSS Font dan Teks

17/07/2015

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

Warna (color) dalam CSS sedikitnya didefiniskan melalui empat metode, yaitu
  1. Hexadecimal
  2. Color Names
  3. RGB & RGBA
  4. HSL & HSLA

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. Tentu saja hal itu tidak akan bekerja jika pada dua digit pertama, kedua, dan ketiganya ada huruf atau angka yang berbeda, contoh #FF4F72. Hal itu 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
  1. Nilai entitas dibungkus dalam tanda kurung
  2. 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 :)

16/07/2015

Properti dan NIlai CSS untuk Teks dan Font

no-image
Ada banyak varian dalam menentukan gaya CSS untuk font dan teks, misalnya jenis font dan warna teks apakah yang akan kita gunakan, apakah bentuk teks akan dibuat normal, miring, tebal, ataukah bergaris bawah, juga menentukan besar dan kecilnya teks dan seterusnya. Dengan sentuhan CSS, 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.