Perbesar Huruf Pertama Dalam Paragraf


Salah satu permainan tipografi dalam website dan blog adalah dengan memperbesar huruf kapital pertama dalam setiap paragraf atau first letter capital. Tipografi ini dulu populer pada media cetak dengan font-font yang dekoratif. Kita bisa membuat seperti ini untuk blog dan website kita dengan menggunakan CSS selector.

Pada paragraf ini huruf kapital pertama dalam paragraf diperbesar menggunakan CSS selector ::first-letter dalam elemen P. Kode CSS yang menggunakan selector ini hanya akan mempengaruhi huruf pertama dalam paragraf. Bila kode CSS float diaplikasikan font akan memiliki efek seperti “turun” beberapa baris sesuai dengan besar ukuran font yang kita gunakan. Sementara untuk mengatur tinggi huruf kita bisa menggunakan line-height.
Untuk membuat first letter capital seperti yang terlihat pada paragraf ini kita memerlukan kode CSS berikut ini dalam tag <p> :

p::first-letter 
{
font-size: 2.5em;
font-weight: bold;
padding-right: 0.1em;
margin: 0;
float: left;
line-height: 0.9em;
}

Perlu diketahui bahwa parameter di atas bisa memberikan tampilan berbeda untuk font yang berbeda, sehingga bila website atau blog anda menggunakan font lain mungkin kita perlu mengatur line height, font-size supaya huruf kapital tersebut bisa berada pada posisi dan ukuran yang kita inginkan.

Bila kita ingin mengaplikasikan first letter capital hanya pada paragraf tertentu saja kita bisa menggunakan class atau ID, sehingga kode CSSnya diawali dengan :

#id-paragraf::first-letter

atau

.class-paragraf::first-letter

dimana ID atau class tersebut dimasukkan dalam elemen <p> yang ingin kita perbesar huruf pertamanya.

Selain mengubah tampilan huruf pertama, kita juga bisa mengubah tampilan baris pertama saja dari masing-masing paragraf menggunakan selector ::first-line, seperti yang digunakan di paragraf ini, hanya baris pertama saja yang berwarna hijau, berapa pun resolusi layar monitor yang kita gunakan.


Dipublikasikan oleh theangelwing dalam kategori Blogging, Website pada tanggal Sep 03, 2016
Tags : ,


www.000webhost.com