Diajar Kumaha mun Jieun caps mimiti fancy Maké Gambar CSS jeung
Diajar kumaha ngagunakeun CSS mun nyieun fancy caps awal pikeun ayat Anjeun. Teu aya Lah a téhnik ngagantian gambar basajan ngagunakeun hiji gambar grafis pikeun cap awal Anjeun.
Styles dasar midang mimiti
Aya tilu gaya dasar midang awal dina dokumen:
- diangkat - paling umum, dimana hurup kahiji nyaéta leuwih badag sarta dina garis sarua salaku teks ayeuna.
- turun - ogé cukup umum, dimana hurup kahiji nyaéta leuwih badag sarta turun ka handap handap garis mimiti tulisan. Téks di handap lajeng floats sabudeureun eta.
- meungkeut - dimana hurup kahiji dina hiji kolom gigireun sesa téks. Ieu leuwih umum di print ti desain Web.
caps awal atanapi caps serelek pisan wawuh. Aranjeunna cara hébat kana pakéan nepi ngawengku disebutkeun panjang jeung membosankan tina téks. Tur kalawan harta CSS: kahiji-hurup, anjeun bisa kalayan gampang nangtukeun kumaha carana sangkan hurup munggaran anjeun fancier.
Jieun Cap mimiti Basajan
Sadaya kudu maneh mun nyieun basajan diangkat cap awal nyaeta nyieun aksara mimiti ayat Anjeun nu leuwih gede dina ukuranana kalawan kahiji-hurup pseudo-unsur:
p: kahiji-hurup {font-ukuran: 3em; }Tapi loba panyungsi ningali yén hurup kahiji nyaéta leuwih badag batan sesa téks dina jalur, jadi sakitu ngarah sarua jeung naon anu make akal pikiran pikeun nu hurup kahiji, teu sesa jalur. Kabeneran, ieu téh gampang pikeun ngalereskeun jeung mimiti-garis pseudo-unsur sarta sipat garis-jangkungna:
p: kahiji-hurup {font-ukuran: 3em; } P: kahiji-garis {garis-jangkungna: 1em; }Maén kalawan jangkungna garis dina dokumen anjeun dugi ka manggihan ukuran katuhu pikeun téks Anjeun.
Maén kalawan Cap mimiti anjeun
Sakali anjeun ngartos kumaha carana nyieun hiji cap awal, anjeun tiasa pakéan eta nepi di baju fancy sangkan eta nangtung kaluar. Maén kalawan kelir, kelir kasang tukang, wates, atawa naon panarajangan fancy Anjeun. Hiji gaya cukup basajan nyaéta ngabalikeun warna warna font jeung latar anjeun ngan keur aksara awal:
p: kahiji-hurup {font-ukuran: 300%; tukang-warna: # 000; Warna: #fff; } P: kahiji-garis {garis-jangkungna: 100%; }trik sejen nyaeta ka pusat garis kahiji. Ieu tiasa tricky kalawan CSS, sakumaha tengah garis téks tiasa béda lamun perenah anjeun fléksibel. Tapi kalawan sababaraha maén sabudeureun jeung nilai, anjeun tiasa indent garis kahiji anjeun cukup nyieun hurup munggaran némbongan janten di tengahna. Ngan maénkeun kalayan persentase dina téks-indent paragraf nepika Sigana katuhu:
p: kahiji-hurup {font-ukuran: 300%; tukang-warna: # 000; Warna: #fff; } P: kahiji-garis {garis-jangkungna: 100%; } P {téks-indent: 45%; }Caps mimiti Wates nyaéta Hard kalawan CSS
caps awal Wates bisa hésé kalayan CSS sabab panyungsi béda mintonkeun fon béda. Gagasan tukangeun nyieun hiji cap meungkeut dina CSS nyaeta ngagunakeun harta téks-indent on garis kahiji nyorong dinya kaluar (ka kénca) a nilai négatip. Anjeun oge bakal perlu ngarobah margin kénca paragraf anu ku sabagian Jumlah. Maén kalawan nomer ieu dugi paragraf Sigana alus.
p {téks-indent: -2.5em; margin-kénca: 3em; } P: kahiji-hurup {font-ukuran: 3em; } P: kahiji-garis {garis-jangkungna: 100%; }Sia midang mimiti Emang fancy
Cara pangalusna pikeun nyieun hiji cap awal fancy nyaeta ngarobih font ka kulawarga font langkung hiasan. Lamun ngagunakeun runtuyan fon dituturkeun ku font generik , bakal mantuan garansi yén cap awal Anjeun mintonkeun ogé jadi konsumén Anjeun tiasa ningali éta, tanpa jadi meunang isu diakses na usability.
p: kahiji-hurup {font-ukuran: 3em; font-kulawarga: "Edwardian Script ITC", "Sikat Script MT", cursive; } P: kahiji-garis {garis-jangkungna: 100%; }Jeung, saperti biasa, anjeun tiasa nempatkeun sagala saran ieu babarengan pikeun nyieun hiji cap awal nu gaya Iklan ayat Anjeun.
Maké Cap mimiti grafis
Lamun, sanggeus kabeh yen, Anjeun masih teu resep kumaha caps awal anjeun neuteup kana kaca, anjeun tiasa Resort ka grafik pikeun meunangkeun éfék pasti nu ditéang. Tapi saencan Anjeun mutuskeun mindahkeun lempeng ka grafik, Anjeun kudu sadar tina drawbacks tina metoda ieu:
- Konsumén tanpa gambar moal ningali cap awal, jeung bisa jadi teu ningali téks disumputkeun yen gambar ieu ngagantikeun. Ieu bisa nyieun paragraf inaccessible, atanapi di pangalusna sesah maca.
- Gambar salawasna nambahan kana waktos undeuran kaca. Lamun geus loba caps awal, anjeun nyata bisa ningkatkeun waktos download pikeun hal loba jalma bakal ngarasa geus kalindih.
- Sababaraha panyungsi bakal nembongkeun duanana disumputkeun hurup kahiji jeung gambar - nu bisa nyieun teks ayat kasampak ganjil.
- Ieu pisan hésé ngajadikeun otomatis pilihan ieu, sabab maneh kudu nyaho kahayang hurup kahiji nyaeta ku kituna anjeun nganggo grafis bener. Ku kituna, unggal waktos ayat ieu diédit, Anjeun bisa jadi kudu nyieun hiji grafis anyar.
Kahiji, anjeun kudu nyieun grafis tina hurup munggaran. I dipaké Photoshop mun nyieun hurup L jeung font "Edwardian Script ITC". Kuring dijieun badag - 300pt dina ukuranana. Kuring lajeng potong gambar handap ka minimum bulistir sabudeureun hurup jeung nyatet lebar gambar jeung jangkungna.
Lajeng abdi dijieun kelas "capL" kanggo ayat kuring. Ieu dimana I nangtukeun naon gambar ngagunakeun, anu ngarah (garis-jangkungna), jeung saterusna.
Anjeun perlu make lebar gambar jeung jangkungna pikeun ngeset ayat urang téks-indent na padding-luhur. Pikeun gambar L kuring, abdi diperlukeun 95px indent na 72px padding.
p.capL {garis-jangkungna: 1em; tukang-gambar: url (capL.gif); tukang-ulang: no-ulang; téks-indent: 95px; padding-luhur: 72px; }Tapi éta teu kabéh. Lamun ninggalkeun eta aya, mangka hurup kahiji bakal duplicated dina ayat - mimiti kalawan grafis, teras dina téks. Ku kituna, abdi ditambahkeun hiji bentang sabudeureun éta unsur kahiji kalayan kelas "mimiti" - na ngawartoskeun browser pikeun henteu nembongkeun surat:
span.initial {tampilan: taya; }Jeung grafis nu lajeng mintonkeun neuleu. Anjeun tiasa maénkeun kalayan téks-indent dina ayat ka meunang téks snugged katuhu nepi ka hurup, kumaha maneh dipilampah ka nembongkeun.