Aflați cum puteți crea capace fantezice inițiale utilizând CSS și imagini
Aflați cum să utilizați CSS pentru a crea capace originale fanteziste pentru paragrafele dvs. Există chiar și o tehnică simplă de înlocuire a imaginii pentru a utiliza o imagine grafică pentru capacul inițial.
Stiluri de bază ale capacelor inițiale
Există trei stiluri de bază ale capacelor inițiale în documente:
- ridicată - cea mai obișnuită, unde prima literă este mai mare și pe aceeași linie cu textul curent.
- a scăzut - de asemenea destul de comună, unde prima literă este mai mare și a scăzut sub prima linie de text. Următorul text plutește în jurul acestuia.
- adiacente - în cazul în care prima literă se află într-o singură coloană de lângă restul textului. Acest lucru este mai frecvent în imprimare decât designul Web.
Capacele inițiale sau capacele de picături sunt foarte familiare. Ele sunt o modalitate foarte bună de a îmbrăca spanioanele lungi și plictisitoare de text. Și cu proprietatea CSS: prima literă, poți defini cu ușurință cum să-ți faci primii tale prieteni.
Creați un cap inițial simplu
Tot ce trebuie să faceți pentru a crea un cap inițial simplu ridicat este să faceți prima literă a paragrafului dvs. mai mare în dimensiune cu pseudo-elementul de literă de primă litera:
p: prima literă {font-size: 3em; }Multe browsere văd că prima literă este mai mare decât restul textului de pe linie, astfel încât acestea să facă conducerea egală cu ceea ce ar avea sens pentru acea primă literă, nu pentru restul liniei. Din fericire, acest lucru este ușor de rezolvat cu pseudo-elementul de primă linie și proprietatea înălțimii liniei:
p: prima literă {font-size: 3em; } p: prima linie {line-height: 1em; }Redați cu înălțimea liniei în documentul dvs. până când găsiți dimensiunea potrivită pentru textul dvs.
Jucați cu capul inițial
Odată ce ați înțeles cum să creați un capac inițial, îl puteți îmbrăca în haine de lux pentru a face să iasă în evidență. Redați-vă culorile, culorile de fundal, granițele sau orice vă lovește. Un stil destul de simplu este de a inversa culorile fontului și culorii de fundal doar pentru prima literă:
p: prima literă {font-size: 300%; fundal-culoare: # 000; culoare: #fff; } p: prima linie {line-height: 100%; }Un alt truc este de a centra prima linie. Acest lucru poate fi dificil cu CSS, deoarece mijlocul liniei de text poate fi diferit dacă aspectul dvs. este flexibil. Dar, când unii joacă în jurul valorii de valori, puteți să vă indentați prima linie suficient pentru a face prima literă să pară în mijloc. Doar jucați cu procentul pe textul liniuței paragrafului până când acesta pare drept:
p: prima literă {font-size: 300%; fundal-culoare: # 000; culoare: #fff; } p: prima linie {line-height: 100%; } p {text-indent: 45% ; }Capacele inițiale adiacente sunt greu cu CSS
Capacele originale adiacente pot fi dificile cu CSS deoarece diferitele browsere afișează fonturile în mod diferit. Ideea din spatele creării unui capac adiacent în CSS este de a folosi proprietatea text-liniuță pe prima linie pentru ao împinge (în stânga) o valoare negativă. De asemenea, va trebui să modificați marja din stânga a paragrafului respectiv cu o anumită sumă. Jucați cu aceste numere până când paragraful arată bine.
p {text-indent: -2,5 sem; margin-stânga: 3em; } p: prima literă {font-size: 3em; } p: prima linie {line-height: 100%; }Noțiuni de bază Fancy inițială Caps
Cea mai bună modalitate de a crea un cap inițial fantezist este de a schimba fontul într-o familie de fonturi mai decorative. Dacă utilizați o serie de fonturi, urmată de un font generic , aceasta va garanta faptul că plafonul dvs. inițial se arată bine, astfel încât clienții dvs. să poată vedea acest lucru, fără a se confrunta cu probleme de accesibilitate și de utilizare.
p: prima literă {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: prima linie {line-height: 100%; }Și, ca de obicei, puteți pune împreună toate aceste sugestii pentru a crea un plafon inițial pe care stilul anunțurilor îl aplică paragrafului dvs.
Utilizând un cap inițial grafic
Dacă, după toate acestea, tot nu vă place cum arată capacele inițiale ale paginii, puteți recurge la grafică pentru a obține efectul exact pe care îl căutați. Dar înainte de a vă decide să vă deplasați direct la grafică, ar trebui să fiți conștienți de dezavantajele acestei metode:
- Clienții fără imagini nu vor vedea capacul inițial și pot să nu vadă textul ascuns pe care îl înlocuiește imaginea. Acest lucru poate face paragraful inaccesibil sau, cel mai bine, dificil de citit.
- Imaginile adaugă întotdeauna timpul de descărcare al unei pagini. Dacă aveți o mulțime de capace inițiale, puteți crește semnificativ timpul de descărcare pentru ceea ce mulți oameni s-ar simți nesemnificativ.
- Unele browsere vor afișa atât prima literă ascunsă cât și imaginea - ceea ce poate face paragraful să pară ciudat.
- Este foarte greu să automatizezi această opțiune, deoarece trebuie să știi exact ce este prima literă, astfel încât să folosești graficul corect. Deci, de fiecare dată când paragraful este editat, poate fi necesar să creați un nou grafic.
În primul rând, trebuie să creați graficul primei litere. Am folosit Photoshop pentru a crea litera L cu fontul "Edwardian Script ITC". Am făcut-o imensă - 300 de picioare în dimensiune. Apoi am decupat imaginea până la minimul gol în jurul literei și am observat lățimea și înălțimea imaginii.
Apoi am creat o clasă "capL" pentru paragraful meu. Aici definesc ce imagine să folosească, cea mai importantă (înălțimea liniei) și așa mai departe.
Trebuie să utilizați lățimea și înălțimea imaginii pentru a seta paragraful textului și linia de umplutură. Pentru imaginea L, am avut nevoie de 95px indent și 72px.
p.capL {linie-înălțime: 1em; fundal-imagine: url (capL.gif); background-repeat: nu-repeta; text-indent: 95px; padding-top: 72px; }Dar asta nu este tot. Dacă lăsați-o acolo, prima literă va fi duplicată în paragraf - mai întâi cu graficul, apoi cu textul. Așadar, am adăugat un interval în jurul primului element cu clasa "inițială" - și i-am spus browserului să nu afișeze acea literă:
span.initial {display: none; }Iar graficul se afișează corect. Puteți juca cu textul liniuței de pe paragraf pentru a obține textul fixat până la literă, totuși doriți să fie afișat.