Ketahui Bagaimana Membuat Caps Inisiatif Fancy Menggunakan CSS dan Imej
Ketahui cara menggunakan CSS untuk membuat topi awal mewah untuk perenggan anda. Terdapat juga teknik penggantian imej yang mudah untuk menggunakan imej grafik untuk topi awal anda.
Gaya Asas Caps Awal
Terdapat tiga gaya asas topi awal dalam dokumen:
- dibangkitkan - yang paling biasa, di mana huruf pertama lebih besar dan pada baris yang sama dengan teks semasa.
- jatuh - juga agak biasa, di mana huruf pertama lebih besar dan jatuh di bawah baris pertama teks. Teks berikut kemudian mengapung di sekelilingnya.
- bersebelahan - di mana huruf pertama berada dalam satu lajur bersebelahan sisa teks. Ini lebih biasa di cetak daripada reka bentuk web.
Topi awal atau topi drop sangat biasa. Mereka adalah cara yang baik untuk berpakaian seperti teks panjang dan membosankan. Dan dengan sifat CSS: surat pertama, anda boleh dengan mudah menentukan cara membuat huruf pertama anda lebih menarik.
Buat Cap Permulaan Mudah
Apa yang perlu anda lakukan untuk mencipta cap awal yang dibangkitkan mudah ialah membuat huruf pertama perenggan anda lebih besar dengan huruf pseudo-elemen pertama-huruf:
p: first-letter {font-size: 3em; }Tetapi ramai penyemak imbas melihat bahawa huruf pertama lebih besar daripada teks lain di baris, jadi mereka membuat tajuk yang sama dengan apa yang masuk akal untuk huruf pertama itu, bukan seluruh baris. Untungnya, ini mudah untuk dibaiki dengan elemen pseudo-elemen dan ciri ketinggian baris pertama:
p: first-letter {font-size: 3em; } p: first-line {line-height: 1em; }Main dengan ketinggian baris dalam dokumen anda sehingga anda dapat mencari saiz yang sesuai untuk teks anda.
Main dengan Cap Awal Anda
Sebaik sahaja anda memahami bagaimana untuk membuat topi permulaan, anda boleh berpakaian dalam pakaian mewah untuk membuatnya menonjol. Main dengan warna, warna latar belakang, sempadan, atau apa sahaja yang menyerang minat anda. Gaya yang agak mudah adalah untuk membalikkan warna font dan warna latar anda hanya untuk huruf pertama:
p: huruf pertama {font-size: 300%; warna latar belakang: # 000; warna: #fff; } p: first-line {line-height: 100%; }Satu lagi helah adalah memusatkan garisan pertama. Ini boleh menjadi rumit dengan CSS, kerana tengah baris teks boleh berbeza jika susun atur anda fleksibel. Tetapi dengan beberapa bermain dengan nilai-nilai, anda boleh inden baris pertama anda cukup untuk membuat huruf pertama muncul di tengah. Cuma bermain dengan peratusan pada indentasi teks perenggan sehingga kelihatan betul:
p: huruf pertama {font-size: 300%; warna latar belakang: # 000; warna: #fff; } p: first-line {line-height: 100%; } p {teks-inden: 45% ; }Caps awal bersebelahan keras dengan CSS
Cap awal yang berdekatan boleh menjadi sukar dengan CSS kerana pelayar yang berbeza memaparkan fon berbeza. Idea di sebalik mewujudkan cap bersebelahan dalam CSS adalah menggunakan harta indent teks pada baris pertama untuk menolaknya (ke kiri) nilai negatif. Anda juga perlu menukar margin kiri perenggan tersebut dengan jumlah tertentu. Bermain dengan nombor ini sehingga perenggan kelihatan baik.
p {text-indent: -2.5em; margin-left: 3em; } p: huruf pertama {font-size: 3em; } p: first-line {line-height: 100%; }Mendapatkan Topi Permulaan yang Sangat Suka
Cara terbaik untuk mencipta topi permulaan mewah ialah menukar font untuk keluarga font yang lebih hiasan. Jika anda menggunakan siri fon yang diikuti dengan font generik , ia akan membantu menjamin bahawa cap awal anda menunjukkan dengan baik supaya pelanggan anda dapat melihatnya, tanpa mendapat masalah kebolehaksesan dan kebolehgunaan.
p: first-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Script Brush MT", cursive; } p: first-line {line-height: 100%; }Dan, seperti biasa, anda boleh meletakkan semua cadangan ini bersama-sama untuk mencipta cap awal yang gaya iklan pada perenggan anda.
Menggunakan Cap Permulaan Grafis
Jika, selepas itu, anda masih tidak suka bagaimana topi awal anda melihat halaman, anda boleh menggunakan grafik untuk mendapatkan kesan sebenar yang anda cari. Tetapi sebelum anda memutuskan untuk bergerak terus ke grafik, anda harus mengetahui kelemahan kaedah ini:
- Pelanggan tanpa imej tidak akan melihat topi permulaan, dan mungkin tidak melihat teks tersembunyi yang menggantikan imej itu. Ini boleh menjadikan paragraf itu tidak dapat diakses, atau paling sukar dibaca.
- Imej sentiasa menambah masa muat turun satu halaman. Jika anda mempunyai banyak permulaan awal, anda boleh meningkatkan masa muat turun dengan ketara untuk sesuatu yang banyak orang merasa tidak penting.
- Sesetengah pelayar akan memaparkan kedua-dua huruf pertama tersembunyi dan imej - yang boleh menjadikan teks perenggan kelihatan ganjil.
- Sukar untuk mengautomasikan pilihan ini, kerana anda perlu tahu dengan tepat apa huruf pertama supaya anda menggunakan grafik yang betul. Oleh itu, setiap kali perenggan diedit, anda mungkin perlu membuat grafik baru.
Pertama, anda perlu membuat grafik huruf pertama. Saya menggunakan Photoshop untuk mencipta huruf L dengan font "Edwardian Script ITC". Saya membuatnya besar - saiz 300pt. Saya kemudian memunculkan imej ke bawah dengan minimum di sekeliling surat dan mencatatkan lebar dan ketinggian imej.
Kemudian saya membuat kelas "capL" untuk perenggan saya. Di sinilah saya mentakrifkan imej yang hendak digunakan, yang terkemuka (garis ketinggian), dan sebagainya.
Anda perlu menggunakan lebar dan ketinggian imej untuk menetapkan teks-indent dan padding-atas perenggan itu. Untuk imej L saya, saya memerlukan 95px indent dan 72px padding.
p.capL {line-height: 1em; imej latar belakang: url (capL.gif); ulangi latar belakang: tiada ulang; teks-indent: 95px; padding-top: 72px; }Tetapi itu bukan semua. Jika anda meninggalkannya di sana, maka huruf pertama akan diduplikasi dalam perenggan - pertama dengan grafik, kemudian dalam teks. Oleh itu, saya menambahkan satu rentang di sekeliling elemen pertama dengan kelas "permulaan" - dan memberitahu pelayar untuk tidak memaparkan huruf itu:
span.initial {display: none; }Dan grafik kemudian dipaparkan dengan betul. Anda boleh bermain dengan indent teks pada perenggan untuk mendapatkan teks yang bersesuaian dengan huruf itu, namun anda ingin memaparkannya.