Pelajari Cara Membuat Caps Awal yang Menarik Menggunakan CSS dan Gambar
Pelajari cara menggunakan CSS untuk membuat topi awal yang menarik untuk paragraf Anda. Bahkan ada teknik penggantian gambar sederhana untuk menggunakan gambar grafis untuk topi awal Anda.
Gaya Dasar Topi Awal
Ada tiga gaya dasar topi awal dalam dokumen:
- dibangkitkan - yang paling umum, di mana huruf pertama lebih besar dan pada baris yang sama dengan teks saat ini.
- dijatuhkan - juga cukup umum, di mana huruf pertama lebih besar dan jatuh di bawah baris pertama teks. Teks berikut kemudian mengapung di sekitarnya.
- berdekatan - di mana huruf pertama berada di satu kolom di samping sisa teks. Ini lebih umum di cetak daripada desain Web.
Topi awal atau tutup topi sangat akrab. Mereka adalah cara yang bagus untuk mendandani rentang teks yang panjang dan membosankan. Dan dengan properti CSS: huruf pertama, Anda dapat dengan mudah menentukan bagaimana membuat huruf pertama Anda lebih menarik.
Buat Topi Awal Sederhana
Yang perlu Anda lakukan untuk membuat cap awal yang dinaikkan sederhana adalah dengan membuat huruf pertama paragraf Anda menjadi lebih besar dengan elemen pseudo-huruf pertama:
p: huruf pertama {font-size: 3em; }Tetapi banyak browser melihat bahwa huruf pertama lebih besar daripada teks yang lain pada baris, sehingga mereka membuat yang terdepan sama dengan apa yang masuk akal untuk huruf pertama itu, bukan baris sisanya. Untungnya, ini mudah diperbaiki dengan pseudo-element baris pertama dan properti line-height:
p: huruf pertama {font-size: 3em; } p: baris pertama {line-height: 1em; }Bermain dengan tinggi garis dalam dokumen Anda sampai Anda menemukan ukuran yang tepat untuk teks Anda.
Mainkan dengan Topi Awal Anda
Setelah Anda memahami cara membuat topi awal, Anda bisa mendandaninya dengan pakaian mewah untuk membuatnya menonjol. Bermain dengan warna, warna latar belakang, batas, atau apa pun yang menarik perhatian Anda. Gaya yang cukup sederhana adalah membalik warna font dan warna latar belakang Anda hanya untuk huruf pertama:
p: huruf pertama {font-size: 300%; background-color: # 000; warna: #fff; } p: baris pertama {line-height: 100%; }Trik lain adalah dengan memusatkan baris pertama. Ini bisa rumit dengan CSS, karena garis tengah teks dapat berbeda jika tata letak Anda fleksibel. Tetapi dengan beberapa bermain-main dengan nilai-nilai, Anda dapat membiasakan baris pertama Anda cukup untuk membuat huruf pertama muncul di tengah. Cukup main dengan persentase pada teks-indent paragraf hingga terlihat benar:
p: huruf pertama {font-size: 300%; background-color: # 000; warna: #fff; } p: baris pertama {line-height: 100%; } p {text-indent: 45% ; }Tutup Awal Berdekatan Sulit dengan CSS
Tutup awal yang berdekatan bisa sulit dengan CSS karena browser yang berbeda menampilkan font secara berbeda. Ide di balik pembuatan tutup yang berdekatan dalam CSS adalah menggunakan properti indentasi teks pada baris pertama untuk mendorongnya keluar (ke kiri) nilai negatif. Anda juga perlu mengubah margin kiri paragraf dengan jumlah tertentu. Mainkan angka-angka ini sampai paragraf terlihat bagus.
p {text-indent: -2.5em; margin-left: 3em; } p: huruf pertama {font-size: 3em; } p: baris pertama {line-height: 100%; }Mendapatkan Topi Awal Benar-Benar Mewah
Cara terbaik untuk membuat topi awal yang mewah adalah mengubah font ke font font yang lebih dekoratif. Jika Anda menggunakan serangkaian font yang diikuti oleh font umum , itu akan membantu menjamin bahwa topi awal Anda tampil dengan baik sehingga pelanggan Anda dapat melihatnya, tanpa masuk ke masalah aksesibilitas dan kegunaan.
p: huruf pertama {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", kursif; } p: baris pertama {line-height: 100%; }Dan, seperti biasa, Anda dapat memasukkan semua saran ini bersama-sama untuk membuat cap awal yang gaya iklan ke paragraf Anda.
Menggunakan Cap Awal Grafis
Jika, setelah semua itu, Anda masih tidak suka bagaimana tampilan awal Anda pada halaman, Anda dapat menggunakan grafik untuk mendapatkan efek yang tepat yang Anda cari. Namun sebelum Anda memutuskan untuk langsung ke grafis, Anda harus menyadari kekurangan metode ini:
- Pelanggan tanpa gambar tidak akan melihat tutup awal, dan mungkin tidak melihat teks tersembunyi yang menggantikan gambar. Ini dapat membuat paragraf tidak dapat diakses, atau paling sulit dibaca.
- Gambar selalu menambah waktu pengunduhan halaman. Jika Anda memiliki banyak topi awal, Anda dapat secara signifikan meningkatkan waktu unduh untuk sesuatu yang dirasakan banyak orang tidak signifikan.
- Beberapa browser akan menampilkan huruf pertama yang disembunyikan dan gambar - yang dapat membuat teks paragraf terlihat aneh.
- Sangat sulit untuk mengotomatiskan opsi ini, karena Anda harus tahu persis huruf pertama apa yang Anda gunakan untuk menggunakan grafik yang benar. Jadi, setiap kali paragraf diedit, Anda mungkin perlu membuat grafik baru.
Pertama, Anda perlu membuat grafik huruf pertama. Saya menggunakan Photoshop untuk membuat huruf L dengan font "Edwardian Script ITC". Saya membuatnya besar - ukuran 300pt. Saya kemudian memotong gambar ke minimal di sekitar huruf dan mencatat lebar dan tinggi gambar.
Lalu saya membuat kelas "capL" untuk paragraf saya. Di sinilah saya mendefinisikan gambar apa yang digunakan, leading (garis-tinggi), dan sebagainya.
Anda perlu menggunakan lebar dan tinggi gambar untuk mengatur teks-indentasi paragraf dan padding-top. Untuk gambar L saya, saya membutuhkan 95px indent dan 72px padding.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: no-repeat; text-indent: 95px; padding-top: 72px; }Tapi bukan itu saja. Jika Anda meninggalkannya di sana, maka huruf pertama akan diduplikasi di paragraf - pertama dengan grafik, lalu di dalam teks. Jadi, saya menambahkan rentang di sekitar elemen pertama dengan kelas "awal" - dan memberi tahu browser untuk tidak menampilkan huruf itu:
span.initial {display: none; }Dan grafiknya kemudian ditampilkan dengan benar. Anda dapat bermain dengan teks-indent pada paragraf untuk mendapatkan teks yang tepat sampai ke huruf, namun Anda ingin menampilkannya.