Sinau Carane Nggawe Caps Inklusial Apik Nggunakake CSS lan Gambar
Katrangan cara nggunakake CSS kanggo nggawe topi awal sing apik kanggo paragraf sampeyan. Ana uga teknik pengganti gambar sing prasaja kanggo nggunakake gambar grafis kanggo tutup awal.
Gaya Dasar Inisial Caps
Ana telung dhasar saka huruf kapital ing dokumen:
- wungu - paling umum, endi huruf kapisan luwih gedhe lan ing baris sing padha karo teks sing saiki.
- dropped - uga nyedhaki umum, endi huruf kapisan luwih gedhe lan diturunake mudhun ing baris pisanan teks. Teks kasebut banjur ngambang ing sakubenge.
- jejer - endi huruf kapisan ana ing salah siji kolom ing sisih liyane teks. Iki luwih umum dicithak tinimbang desain Web.
Kaping kapital utawa tutup kapindho sing misuwur banget. Iku cara sing apik kanggo nyedhiyani tlutuh teks sing sepisan lan mboseni. Lan kanthi sifat CSS: huruf kapisan, sampeyan bisa gampang nemtokake cara nggawe huruf kapisan sing luwih apik.
Nggawe Cap Initial Wikipedia
Kabeh sing perlu dilakoni kanggo nggawe cap dhisikan sing luwih dhuwur diwiwiti kanggo nggawe huruf kapisan saka paragraf luwih gedhe karo huruf pseudo-elemen:
p: first-letter {font-size: 3em; }Nanging akeh browser sing ngerteni yen huruf kapisan luwih gedhe tinimbang sisa teks ing baris, saengga dheweke bisa nggawe pangarah sing padha karo apa sing bakal ditindakake kanggo huruf kapisan, dudu sisa baris. Untunge, iki gampang kanggo ndandani karo unsur-unsur pseudo-elemen lan baris sing paling dhuwur:
p: first-letter {font-size: 3em; } p: first-line {line-height: 1em; }Puter kanthi dhuwur baris ing dokumen sampeyan nganti sampeyan nemokake ukuran sing tepat kanggo teks sampeyan.
Play with Cap Initial
Yen sampeyan ngerti carane nggawe tutup dhisikan, sampeyan bisa nganggo sandhangan sing apik supaya bisa metu. Puter karo werna, werna latar mburi, wates, utawa apa wae sing apik. Gaya sing cukup prasaja kanggo ngowahi warna font lan werna latar mburi kanggo huruf kapisan:
p: first-letter {font-size: 300%; werna latar mburi: # 000; werna: #fff; } p: first-line {line-height: 100%; }Trik liya minangka pusat garis pertama. Iki bisa dadi angel karo CSS, amarga tengah baris teks bisa beda yen tata letak sampeyan fleksibel. Nanging kanthi sawetara dolanan karo nilai-nilai, sampeyan bisa indent baris pisanan sampeyan cukup kanggo nggawe huruf pisanan katon ing tengah. Cukup muter persentase ing indentasi teks nganti katon:
p: first-letter {font-size: 300%; werna latar mburi: # 000; werna: #fff; } p: first-line {line-height: 100%; } p {text-indent: 45% ; }Tutup tutup Inisial sing Hard karo CSS
Kaping dhisikan ing jejer bisa angel kanggo CSS amarga browser beda nggambarake fonts kanthi beda. Idea ing mburi nggawe tutup jejer ing CSS yaiku nggunakake properti indentasi teks ing baris pisanan kanggo nolak (ing sisih kiwa) nilai negatif. Sampeyan uga kudu ngganti wates kiwa paragraf kasebut kanthi sawetara jumlah. Puter nganggo nomer kasebut nganti paragraf katon apik.
p {text-indent: -2.5em; margin-left: 3em; } p: first-letter {font-size: 3em; } p: first-line {line-height: 100%; }Njupuk kapital wiwitan sing apik
Cara paling apik kanggo nggawe tutup dhisikan apik yaiku ngganti font kasebut menyang kulawarga font sing luwih dekoratif. Yen sampeyan nggunakake seri fonts sing diikuti karo font generik , bakal menehi jaminan yen tutup awal sampeyan nuduhake kanthi apik supaya pelanggan bisa ndeleng, tanpa njupuk masalah aksesibilitas lan migunani.
p: first-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Script Brush MT", cursive; } p: first-line {line-height: 100%; }Lan, kaya biasane, sampeyan bisa nggawe kabeh saran iki bebarengan kanggo nggawe tutup dhisikan sing gaya iklan menyang paragraf panjenengan.
Nggunakake Cap Initial Grafis
Yen, sawise kabeh kuwi, sampeyan isih ora seneng kepiye tampilan topi awal, sampeyan bisa nggunakake grafis kanggo nemtokake efek pas sampeyan pengin. Nanging sadurunge sampeyan arep pindhah menyang grafis, sampeyan kudu ngerti kekirangan saka metode iki:
- Pelanggan tanpa gambar ora bakal ndeleng tutup awal, lan ora bisa ndeleng teks sing didhelikake sing diganti gambar. Iki bisa nggawe paragraf ora bisa diakses, utawa paling angel diwaca.
- Gambar tansah nambah wektu download kaca. Yen sampeyan duwe akèh dhisikan, sampeyan bisa ngundhuh wektu sing luwih cepet kanggo ngundhuh apa sing dianggep penting.
- Sawetara browser bakal nampilake huruf sing kapisan lan gambar sing didhelikake - sing bisa nggawe teks paragraf katon ganjil.
- Iku angel banget kanggo ngotomatisasi pilihan iki, amarga sampeyan kudu ngerti persis apa huruf kapisan supaya sampeyan nggunakake grafis sing bener. Dadi, saben paragraf disunting, sampeyan kudu nggawe grafis anyar.
Pisanan, sampeyan kudu nggawe grafis saka huruf kapisan. Aku digunakake Photoshop kanggo nggawe huruf L karo font "Edwardian Script ITC". Aku digawe ageng - ukuran 300pt. Aku banjur ngethok gambar mudhun menyang minimal kothong watara huruf lan nyatet gambar jembaré lan dhuwuré.
Banjur aku nggawe kelas "capL" kanggo paragrafku. Iki ngendi aku nemtokake gambar apa sing arep digunakake, leading (line-height), lan liya-liyane.
Sampeyan kudu nggunakake jembar lan dhuwur gambar kanggo nyetel teks-indent lan padding-ndhuwur paragraf. Kanggo gambar L, aku butuh 95px indent lan 72px padding.
p.capL {line-height: 1em; latar mburi-gambar: url (capL.gif); background-repeat: no-repeat; teks indent: 95px; padding-top: 72px; }Nanging ora kabeh. Yen sampeyan ninggalke ing kono, huruf kapisan bakal digodha ing paragraf - pisanan karo grafis, banjur ing teks kasebut. Dadi, aku nambahake jembar watara unsur pisanan karo kelas "dhisikan" - lan marang browser supaya ora nampilake huruf kasebut:
span.initial {display: none; }Lan grafik banjur katon kanthi bener. Sampeyan bisa muter nganggo tulisan indent ing paragraf kanggo njaluk teks kasebut nganti huruf kasebut, nanging sampeyan pengin ngatonake.