Aflați cum să utilizați CSS a creaextravagant majuscule inițiale 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 majusculelor inițiale
Există trei stiluri de bază de majuscule inițiale în documente:
- Ridicat - cea mai comună, unde prima literă este mai mare și pe aceeași linie cu textul curent.
- Scăzut - de asemenea, destul de frecvent, în cazul în care prima literă este mai mare și coborât sub prima linie de text. Următorul text plutește în jurul său.
- Adiacent - unde prima literă se află într-o coloană lângă restul textului. Acest lucru este mai frecvent în tipărire decât în designul web.
Capacele inițiale sau capacele de cădere sunt foarte familiare. Acestea sunt o modalitate excelentă de a te îmbrăca cu întinderi lungi și plictisitoare de text. Și cu proprietatea CSS: prima literă, puteți defini cu ușurință cum să vă faceți primele litere mai îndrăznețe.
Creați un capac inițial simplu
Tot ce trebuie să faceți pentru a crea o limită inițială simplă ridicată este să faceți ca prima literă a paragrafului să fie mai mare cu pseudo-elementul din prima literă:
p: prima literă {font-size: 3em; }
Dar multe browsere vezi că prima literă este mai mare decât restul textului de pe linie, astfel încât acestea să conducă egal cu ceea ce ar avea sens pentru acea primă literă, nu pentru restul liniei. Din fericire, acest lucru este ușor de remediat cu pseudo-elementul din prima linie și proprietatea înălțimea liniei:
p: prima literă {font-size: 3em; }
p: prima linie {linie-înălțime: 1em; }
Joacă cu înălțimea liniei din document până când găsești dimensiunea potrivită pentru textul tău.
Joacă-te cu capacul tău 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-l face să iasă în evidență. Joacă-te cu culorile, culorile de fundal, marginile sau orice altceva ți se pare. Un stil destul de simplu este să inversați culorile fontului și ale culorii de fundal doar pentru prima literă:
p: prima literă {
dimensiunea fontului: 300%;
culoare de fundal: # 000;
culoare: #fff;
}
p: prima linie {linia-înălțime: 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, cu unii jucând în jurul valorilor, puteți indenta prima dvs. linie suficient pentru a face ca prima literă să pară a fi în mijloc. Jucați doar cu procentul de pe liniuța de text a paragrafului până când arată corect:
p: prima literă {
dimensiunea fontului: 300%;
culoare de fundal: # 000;
culoare: #fff;
}
p: prima linie {linia-înălțime: 100%; }
p {text-indent: 45%; }
Capacele inițiale adiacente sunt dificile cu CSS
Limitele inițiale adiacente pot fi dificile cu CSS, deoarece diferitele browsere afișează fonturile diferit. Ideea din spatele creării unei limită adiacente în CSS este de a folosi proprietatea text-indent pe prima linie pentru a o împinge afară (spre stânga) o valoare negativă. De asemenea, va trebui să modificați marginea din stânga a acelui paragraf cu o anumită sumă. Joacă-te cu aceste numere până când paragraful arată bine.
p {
text-indent: -2.5em;
margine-stânga: 3em;
}
p: prima literă {font-size: 3em; }
p: prima linie {linia-înălțime: 100%; }
Obținerea capacelor inițiale cu adevărat fanteziste
Cel mai bun mod de a crea un capac inițial elegant este să schimbați fontul într-o familie de fonturi mai decorativă. Dacă utilizați un serie de fonturi urmat de un font generic, va ajuta la garantarea faptului că limita dvs. inițială arată bine, astfel încât clienții dvs. să o poată vedea, fără a intra în probleme de accesibilitate și utilizare.
p: prima literă {
dimensiunea fontului: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursiv;
}
p: prima linie {linia-înălțime: 100%; }
Și, ca de obicei, puteți pune toate aceste sugestii împreună pentru a crea o limită inițială care să asigure stilul anunțurilor pentru paragraful dvs.
Utilizarea unui capac inițial grafic
Dacă, după toate acestea, încă nu îți place cum arată majusculele tale inițiale pe pagină, poți recurge la grafică pentru a obține efectul exact pe care îl cauți. Dar, înainte de a vă decide să treceți direct la grafică, ar trebui să fiți conștienți de dezavantajele acestei metode:
- Clienții fără imagini nu vor vedea limita inițială și este posibil să nu vadă textul ascuns pe care îl înlocuiește imaginea. Acest lucru poate face paragraful inaccesibil sau, în cel mai bun caz, dificil de citit.
- Imaginile se adaugă întotdeauna la timpul de descărcare al unei pagini. Dacă aveți o mulțime de limitări inițiale, puteți crește semnificativ timpul de descărcare pentru ceea ce mulți oameni consideră că este nesemnificativ.
- Unele browsere vor afișa atât prima literă ascunsă, cât și imaginea care pot face ca textul paragrafului să pară ciudat.
- Este foarte greu să automatizați această opțiune, deoarece trebuie să știți exact care este prima literă, astfel încât să utilizați graficul corect. Deci, de fiecare dată când paragraful este editat, poate fi necesar să creați o 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 uriașă - 300pt în dimensiune. Apoi, am decupat imaginea până la minim în jurul literei și am observat lățimea și înălțimea imaginii.
Apoi am creat o clasă „capL” pentru paragraful nostru. Aici definim ce imagine să folosim, linia principală (înălțimea liniei) și așa mai departe.
Trebuie să utilizați lățimea și înălțimea imaginii pentru a seta liniuța textului și partea de sus a paragrafului. Pentru imaginea noastră L, aveam nevoie de o liniuță de 95 px și o umplutură de 72 px.
p.capL {
înălțimea liniei: 1em;
imagine de fundal: url (capL.gif);
background-repeat: no-repeat;
text-indent: 95px;
tapițerie: 72px;
}
Dar asta nu este tot. Dacă o lăsați acolo, atunci prima literă va fi duplicată în paragraf, mai întâi cu graficul, apoi în text. Așa că am adăugat un interval în jurul primului element cu clasa „inițială” și i-am spus browserului să nu afișeze litera respectivă:
span.initial {display: none; }
Apoi, graficul se afișează corect. Puteți să vă jucați cu liniuța de text de pe paragraf pentru a obține textul strâns până la literă, oricum doriți să fie afișat.