Naučite se ustvariti lahkotne začetne možnosti z uporabo CSS in slik
Več o tem, kako uporabljati CSS, da ustvarite fancy začetne zgornje meje za svoje odstavke. Obstaja tudi preprosta tehnika zamenjave slike, da uporabite grafično podobo za vaš začetni pokrovček.
Osnovni slogi začetnih zgodb
V dokumentih so trije osnovni načini začetnih omejitev:
- dvignjen - najpogostejši, kjer je prva črka večja in v isti vrstici kot trenutno besedilo.
- padla - prav tako precej pogosta, kjer je prva črka večja in padla pod prvo vrstico besedila. Naslednje besedilo nato plava okoli njega.
- sosednje - kjer je prva črka v drugem stolpcu poleg preostalega besedila. To je bolj pogosto v tiskani obliki od spletnega oblikovanja.
Začetni pokrovi ali kapice za kapo so zelo znani. So odličen način za obleko drugače dolgo in dolgočasno razpon besedila. In s svojo lastnostjo CSS: prvo črko, lahko preprosto določite, kako narediti prve črke fancier.
Ustvarite preprost začetni pokrovček
Vse, kar morate narediti, da ustvarite preprosto postavljeno začetno kapico, je, da prva črka vašega odstavka naredite večjo po velikosti s psevdo-elementom iz prve črke:
p: prva črka {font-size: 3em; }Toda mnogi brskalniki vidijo, da je prva črka večja od preostalega besedila na liniji, tako da vodijo enako temu, kar bi bilo smiselno za to prvo črko in ne preostanek vrstice. Na srečo je to enostavno popraviti s prvotnim pseudo-elementom in lastnostjo linijske višine:
p: prva črka {font-size: 3em; } p: prva vrstica {line-height: 1em; }Igrajte z višino črt v dokumentu, dokler ne najdete ustrezne velikosti za vaše besedilo.
Igraj se s svojim začetnim pokrovom
Ko boste razumeli, kako ustvariti začetno kapo, ga lahko oblečeš v modnih oblačilih, da bi se izognili. Igrajte z barvami, barvami ozadja, mejami ali karkoli. Precej preprost slog je obrniti barve vaše pisave in barve ozadja samo za prvo črko:
p: prva črka {font-size: 300%; barva ozadja: # 000; barva: #fff; } p: prva vrstica {line-height: 100%; }Drug trik je centriranje prve vrstice. To je lahko težavno s CSS, saj je lahko sredina besedilne črte drugačna, če je postavitev prilagodljiva. Toda z nekaterimi, ki se igrajo z vrednostmi, lahko svojo prvo vrstico zapišete dovolj, da se zdi, da je prvo črko na sredini. Igrajte samo z odstotkom na besedilu alinee odstavka, dokler ne izgleda pravilno:
p: prva črka {font-size: 300%; barva ozadja: # 000; barva: #fff; } p: prva vrstica {line-height: 100%; } p {besedilna alinea: 45% ; }Sosednji začetni pokrovi so težki s CSS
Sosednje začetne zgornje meje so lahko težke s CSS, ker različni brskalniki drugače prikazujejo pisave. Ideja za ustvarjanje sosednje zgornje meje v CSS je, da v prvi vrstici uporabite lastnost besedilne razdalje, da jo potisnete (na levo) negativno. Prav tako boste morali spremeniti levi rob tega odstavka za nekaj zneska. Igrajte s temi številkami, dokler odstavek ne izgleda dobro.
p {besedilo-indent: -2,5em; margin-left: 3em; } p: prva črka {font-size: 3em; } p: prva vrstica {line-height: 100%; }Getting Fancy Začetni Caps
Najboljši način za ustvarjanje fancy začetne kapice je, da spremenite pisavo v bolj dekorativno družino pisav. Če uporabljate vrsto pisav, ki ji sledi splošna pisava , bo to zagotovilo, da bo vaš začetni pokrov dobro prikazan, da bodo vaše stranke videli, ne da bi pri tem prišli do težav z dostopnostjo in uporabnostjo.
p: prva črka {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: prva vrstica {line-height: 100%; }In, kot ponavadi, lahko vse te predloge skupaj ustvarite, da ustvarite začetno omejitev, s katero se oglasi slogijo v vašem odstavku.
Uporaba grafičnega začetnega pokrova
Če po vsem tem še vedno ne marate, kako so vaše začetne kape na strani, lahko uporabite grafiko, da dobite natančen učinek, ki ga iščete. Toda preden se odločite, da se premaknete naravnost v grafiko, se morate zavedati pomanjkljivosti te metode:
- Stranke brez slik ne bodo videli začetnega pokrovčka in morda ne bodo videli skritega besedila, ki ga slika zamenja. To lahko naredi odstavek nedostopen ali v najboljšem primeru težko prebrati.
- Slike vedno dodajate v čas prenosa strani. Če imate veliko začetnih zgornjih mej, lahko znatno povečate čas prenosa za nekaj, za kar se zdi, da je veliko ljudi nepomembno.
- Nekateri brskalniki bodo prikazali tako skrito prvo črko kot sliko, kar lahko besedilo besedila odstavka izgleda čudno.
- To možnost je zelo težko avtomatizirati, saj morate natančno vedeti, kaj je prvo črko, tako da uporabite pravilno grafiko. Torej, vsakič, ko uredite odstavek, boste morda morali ustvariti novo grafiko.
Najprej morate ustvariti grafiko prve črke. Sem uporabil Photoshop, da ustvarim črko L s pisavo "Edwardian Script ITC". Naredil sem veliko - velikost 300 pt. Nato sem obrezal sliko do najmanjše mere okoli črke in opazil širino in višino slike.
Potem sem za svoj odstavek ustvaril razred "capL". Tu določim, katero sliko naj uporabim, vodilno (višina linije) in tako naprej.
Uporabiti morate širino in višino slike, da nastavite besedilo-indent in zgornji del. Za mojo L-sliko sem potreboval 95-pik razlicico in 72-kratno prilogo.
p.capL {line-height: 1em; ozadje-slika: url (capL.gif); ozadje-ponavljajoče: brez ponavljanja; besedilo-indent: 95px; padding-top: 72px; }Toda to ni vse. Če ga pustite tam, bo prvo črko podvojilo v odstavku - najprej z grafiko, nato pa v besedilu. Torej sem dodal razpon okrog prvega elementa z razredom »začetni« - in povedal brskalniku, da te črke ne prikaže:
span.initial {display: none; }Grafika se nato pravilno prikaže. Lahko se predvajate z besedilom v odstavku, da bi dobili besedilo do črke, vendar želite, da se prikaže.