Fragment: Scrisoarea din text utilizând CSS
Recent am întâmplat să fac o pagină simplă, reprezentativă pentru o bibliotecă raională. Clientul a dorit să vadă paragraful folosind litera principală din titlul fiecăruia. Modalități de a crea scrisori inițiale sunt cunoscute pentru o lungă perioadă de timp și sunt bine stabilite, astfel încât punerea în aplicare a muncii au apărut dificultăți. După terminarea lucrărilor, a decis să nu se arunce în direcția materialului, și reface colecția lor de fragmente pe blog-ul său și în procesul de a spune (reaminti) cititorii dvs. disponibile în prezent, metode eficiente de punere în aplicare a literelor inițiale din text folosind CSS.
Pentru cei care nu sunt destul de subiectul, voi explica ce minune este "Scrisoarea". Letter sau o altă recepție inițială este un astfel de text cu litere mari de design artistic, care este cu siguranță familiar pentru toată lumea de pe suportul de imprimare, este o prima literă mărită, decorat cu miniaturi și ornamente. O astfel de tehnică este pompată remarcabil în tipografia web și este folosită pe scară largă sub diferite forme.
Doar o primă literă mărită a unui paragraf sau a unui singur cuvânt, aceasta este cea mai obișnuită variantă a designului. O soluție mai interesantă, atunci când linia de bază este crescută litere este sub una sau mai multe linii de liniile de bază ale textului principal, și nu este doar un alt personaj la scară mărită, literă, în acest caz, nu iese deasupra blocului de text și face parte din ea, este aliniat la marginea din stânga și raționalizat text.
După cum am scris mai sus, există mai multe moduri diferite de a crea o cădere de picătură.
Prima metodă cu o abordare mai artistică, folosind desene aliniate la stânga. O metodă eficientă și pentru muncă, rezultatul este foarte frumos, dar, în cazul în care scrisoarea este folosită destul de des pe site-ul, pentru fiecare nou, va trebui să pregătească o imagine separat, care vă va fi de acord, nu este foarte comod si practic. Detaliu, această metodă nu va fi luate în considerare, deoarece schema este aceeași ca atunci când se utilizează textul miniatură încorporat.
A doua metodă este mai interesantă, cel puțin pentru mine, folosind proprietățile CSS și pseudo-clase suplimentare. primul copil și: prima literă. De ceva timp, a devenit posibilă crearea literei inițiale nu sub formă de imagine, ci ca un text simplu mărit comparativ cu fontul de bază. Această metodă este în multe privințe bună, nu necesită marcare suplimentară și prezența de imagini, crearea unei litere inițiale este automatizată într-o oarecare măsură. Dar, dezavantajul este că un anumit control este pierdut, iar confuzia poate apărea în timpul utilizării practice direct în înregistrări. Și în browsere ca IE8 și mai jos, ca rezultat al unei "percepții" incorecte a pseudo-claselor de mai sus, se pare că toate paragrafele ulterioare cu etichetă
. va fi afișat cu litera inițială, dar nu este întotdeauna necesar pentru noi))).
În ceea ce privește fontul, puteți conecta un font non-standard, scris de mână cu un ornament, de exemplu, într-un articol și "demo", am folosit standardul "Georgia" fără niciun fel de bibelouri.
Cea de-a treia metodă trebuia probabil să fie pusă pe primul loc, deoarece este o soluție cross-browser testată de ani de zile și absolut. Dat fiind că nu întotdeauna și nu în toate cazurile, aplicarea "Scrisorii" este solicitată și justificată, este mai bine să se utilizeze metoda cu marcări suplimentare. De exemplu, litera inițială a unui paragraf trebuie să fie înfășurată cu o etichetă de span cu o anumită clasă și direct în .css. pentru a atribui proprietățile de care aveți nevoie, formând apariția literei majuscule (dimensiune, culoare, locație etc.). În acest caz, veți obține controlul asupra creării drop-drop-ului exact în locul în care aveți nevoie, adică în acel punct, în care considerați că este necesară existența primei scrisori.
Iată cum va arăta cel mai simplu CSS pentru o scrisoare de cădere, utilizând un container suplimentar:
După cum puteți vedea totul este foarte simplu, vom crea o clasă separată cu un nume mai mult sau mai puțin rezonabil și logic, nu mi-am imaginat prea mult și, de exemplu, am luat numele .firstletter. puteți alege orice altul, principalul lucru este că ar trebui cel puțin într-un fel să indice scopul. Apoi continuați pentru a forma aspectul viitorului Scrisoare, utilizați orice proprietăți CSS3 disponibile până în prezent. Sunt sigur, o mică imaginație și veți obține o mulțime de variante diferite ale "primei litere".
Pentru a scrie o pagină acolo, „scrisoare“, în toată splendoarea ei, rămâne doar litera dorită, în acest caz, scrisoarea inițială a paragrafului, a pus într-un recipient suplimentar, aici, în acest rol, folosește tag-ul . cu o clasă de clasă predefinită = "primul buletin". și totul, paragraful din text va fi clar și mai mult decât specificat.
Cutilizând proprietățile CSS.
Desigur, nimic nou nu a fost descoperit, dar uneori merită să ne amintim de cei vechi uitați. Textul articolului utilizează toate cele trei metode de creare a unui capac în meniu. Sper că acești mici bucăți de cod vor găsi un loc în foile tale de înșelăciune grele pentru munca de zi cu zi.
Sincer, Andrey
Articole similare
Trimiteți-le prietenilor: