Modalități de subliniere în CSS. Linie de împărțire sub forma unui val pe stilul de subliniere css Css

Proprietatea CSS text-decoration este responsabilă pentru decorarea textului în termeni de subliniere. Puteți face o subliniere inferioară sau superioară. Puteți, de asemenea, să ștergeți textul sau să aplicați toate subliniile simultan.

Sintaxa text-decor CSS

...text-decor: niciunul|subliniat|supraliniere|linie prin linie|moştenire; ...

niciunul - text fără decor
subliniere - subliniere
overline - subliniere
line-through - text barat
clipește - text intermitent (se recomandă să nu folosiți această valoare)

Puteți specifica mai multe valori. De exemplu

text-decor : subliniere supralinie ;

Cum se schimbă stilul și culoarea sublinierii

Pentru a schimba stilul de subliniere, există o proprietate specială text-decoration-style :

stil-decor-text: solid|dublu|punct|liniat|unduit;

solid - subliniat solid
dublu - dublu linie
punctat - linie punctata
dashed - linie întreruptă
ondulat - linie ondulată

Pentru a schimba culoarea sublinierii, utilizați proprietatea text-decoration-color:

text-decor-style : culoare ;

culoarea poate lua valori sub formă de RGB, nume de culori (vezi codurile și numele culorilor html pentru site)

Notă

Din păcate, proprietățile text-decoration-style și text-decoration-color nu sunt acceptate de aproape toate browserele (este deja 2016).

Exemple cu caractere de subliniere

Exemplul 1: liniuță simplă

Text simplu. Sublinia Sublinia

Text simplu.

Sublinia

Superioară și subliniere

Exemplul 2: text barat

Text simplu. Text barat

Cam asa arata pe pagina:

Text simplu. Text barat

Exemplul 3. Schimbarea culorii și a tipului de subliniere

Text simplu.

Cam asa arata pe pagina:

Text simplu.
Subliniere roșie cu linie punctată

Notă

Dacă nu vedeți nicio modificare în ultimul exemplu, puteți încerca să utilizați metoda dovedită folosind proprietatea border-bottom:

chenar-jos: 1px datat rosu;

Pentru a accesa text-decor din JavaScript, trebuie să scrieți următoarea construcție:

object.style.textDecoration ="VALOARE "

Există o grămadă căi diferite subliniind designul. Poate vă amintiți articolul lui Marcin Vichari „Crafting link underlines” pe Medium. Dezvoltatorii Medium nu încearcă să facă nimic nebunesc, ei vor doar să creeze linie frumoasa sub text.

Aceasta este cea mai simplă subliniere, dar are marimea corectași nu se suprapune extensiilor de litere. Și este cu siguranță mai bun decât liniuța de subliniere implicită în majoritatea browserelor. Medium a trebuit să facă față provocărilor pentru a-și atinge stilul pe web. Doi ani mai târziu, încă ne este greu să creăm subliniere frumoase.

Goluri

Ce este în neregulă cu decorarea textului obișnuită: subliniere? Într-un scenariu ideal, sublinierea ar trebui să facă următoarele:

poziție sub linia de bază;
săriți înștiințări;
schimbați culoarea, grosimea și stilul liniei;
lucrul cu text cu mai multe linii;
lucrați pe orice fundal.

Cred că toate acestea sunt cerințe rezonabile, dar din câte știu, nu există o modalitate intuitivă de a realiza acest lucru folosind CSS.

Abordari

Deci, care sunt aceste moduri diferite prin care putem implementa sublinierea pe web?

Iată cele pe care le iau în considerare:

text-decor;
margine-de jos ;
cutie-umbra ;
imagine de fundal ;
filtre SVG;
Underline.js(pânză);
text-decor-* .

Să ne uităm la aceste metode una câte una și să vorbim despre avantajele și dezavantajele fiecăreia dintre ele.

text-decor

Decorarea textului este cel mai evident mod de a sublinia textul. Aplicați o proprietate și este suficient. La dimensiuni mici de font, acest lucru poate arăta bine, dar măriți dimensiunea fontului și sublinierea începe să pară ciudată.

Cea mai mare problemă cu decorarea textului este lipsa personalizării. Sunteți limitat la culoarea și dimensiunea fontului textului și nu există nicio modalitate între browsere de a schimba acest lucru. Vom vorbi despre asta mai în detaliu mai târziu.

ușor de folosit;
poziționat sub linia de bază;
omite înștiințările în mod implicit în Safari și iOS;
accentuează textul cu mai multe linii;
funcționează pe orice fundal.

nu omite subsolurile în toate celelalte browsere;
nu vă permite să schimbați culoarea, grosimea sau stilul liniei.

chenar-de jos

border-bottom atinge un echilibru bun între simplitate și personalizare. Această abordare folosește vechea proprietate CSS a marginii, ceea ce înseamnă că puteți schimba cu ușurință culoarea, grosimea și stilul.

Așa arată chenarul de jos pentru elementele inline.

Principalul dezavantaj este distanța sublinierii față de text; este complet sub înștiințări. Puteți remedia acest lucru setând elementele la blocare în linie și scăzând înălțimea liniei , dar apoi veți pierde capacitatea de a încheia text. Bun pentru linii individuale, dar nu este potrivit în altă parte.

În plus, putem folosi text-shadow pentru a ascunde porțiunea de linie de lângă elementele inline, simulând acest lucru folosind aceeași culoare ca fundalul. Adică, această tehnică funcționează doar pe un fundal simplu de o singură culoare, fără degrade, modele sau imagini.

Pe acest moment Folosim deja până la patru proprietăți pentru a proiecta o linie. Este mult mai multă muncă decât adăugarea de text-decor.

poate sări peste înștiințări folosind text-shadow ;
poate schimba culoarea, greutatea și stilul liniei;
vă permite să utilizați tranziții și animații de culoare și îndrăzneală;
funcționează cu text cu mai multe linii, cu excepția cazului în care se aplică blocarea inline;
Funcționează pe orice fundal atâta timp cât nu utilizați text-shadow .

Poziționat prea jos și mișcat într-un mod dificil;
multe proprietăți suplimentare sunt folosite pentru operatiune adecvata;
atunci când utilizați text-shadow, evidențierea textului arată urât.

cutie-umbră

box-shadow desenează un indice folosind două umbre interioare: unul creează un dreptunghi, iar al doilea ascunde o parte din acesta. Aceasta înseamnă că aveți nevoie de un fundal de culoare solidă pentru ca acest lucru să funcționeze.

Puteți folosi același truc cu text-shadow pentru a completa golurile dintre subliniere și înștiințări. Dar dacă culoarea sublinierii este diferită de culoarea textului - sau este suficient de subțire - linia nu se va ciocni cu înștiințări la fel de mult ca și cu decorarea textului .

vă permite să schimbați culoarea și grosimea liniei;
funcționează cu text cu mai multe linii.

nu vă permite să schimbați stilul de subliniere;
Nu funcționează pe niciun fundal.

imagine de fundal

Metoda imaginii de fundal este cea mai apropiată de ceea ce ne dorim și are cele mai puține dezavantaje. Ideea este să folosiți gradient liniar și poziție de fundal pentru a crea o imagine care se repetă sub linii de text.

Pentru ca această abordare să funcționeze, textul trebuie să fie în afișaj standard: inline; .

Următoarea opțiune nu face fără gradient liniar, pentru efecte puteți adăuga propria imagine de fundal.

poate fi poziționat sub linia de bază;
poate sări peste elementele de referință folosind text-shadow ;
lucrează cu imagini personalizate;
împachetează mai multe rânduri de text;
Funcționează pe orice fundal atâta timp cât nu utilizați text-shadow .

Dimensiunea imaginii poate varia în funcție de rezoluția ecranului, browser și mărire.

filtre SVG

M-am jucat destul de mult cu această metodă. Puteți crea un filtru de linie SVG care desenează o linie și apoi extinde textul pentru a masca partea din linie care dorim să fie transparentă. Apoi puteți da filtrului un id și să-l faceți referire în CSS ceva de genul filtrului: url('#svg-underline') .

Avantajul acestei abordări este că transparența este obținută fără a utiliza text-shadow , ceea ce înseamnă că lăsăm înștiințările să apară pe orice fundal, inclusiv degrade și imagini de fundal! Acest lucru funcționează doar pe o singură linie de text, așa că rețineți asta.

Iată cum arată în Chrome și Firefox:

Suportul în IE, Edge și Safari este problematic. Este dificil să testați suportul pentru filtrul SVG în CSS. Puteți utiliza directiva @supports cu filter , dar aceasta va verifica doar funcționalitatea referinței filtrului, nu funcționalitatea filtrului în sine. Încercările mele s-au încheiat cu o determinare plictisitoare a capacităților browserului; acesta este un dezavantaj notabil al metodei.

poate fi poziționat sub linia de bază;
poate sări peste elementele de extensie;
permite modificări ale culorii liniei, grosimii și stilului;
funcționează pe orice fundal.

nu funcționează cu text cu mai multe linii;
nu funcționează în IE, Edge și Safari, dar puteți folosi text-decor ca o rezervă, arată decent în Safari.

Underline.js (pânză)

Underline.js este fascinant. Mi se pare impresionant ceea ce Wenting Zhang a realizat cu stăpânirea JavaScript-ului și atenția la detalii. Dacă nu ați văzut demonstrația tehnologică Underline.js, nu mai citiți și acordați-i un minut. Există, de asemenea, o discuție de nouă minute de la ea despre cum funcționează, dar o voi păstra scurt: sublinierea este desenată folosind elemente

În ciuda numelui captivant, Underline.js este doar o demonstrație tehnică. Aceasta înseamnă că nu îl puteți conecta la proiect fără a schimba codul.

M-am gândit să menționez asta ca o dovadă a conceptului că

Noi proprietăți de decorare a textului

Vă amintiți că am promis că voi vorbi mai mult despre decorarea textului. A sosit timpul.

Această proprietate funcționează excelent singură, dar puteți adăuga câteva proprietăți experimentale pentru a o modifica aspect subliniere.

text-decor-culoare
text-decor-sărire
text-decor-stil

Dar nu fi prea entuziasmat... Suportul pentru browser este ca întotdeauna. Așa merge.

text-decor-culoare

Proprietatea text-decoration-color vă permite să schimbați culoarea sublinierii separat de culoarea textului. Suportul pentru această proprietate este mai bun decât v-ați aștepta - funcționează în Firefox și cu prefixul în Safari. Iată problema: dacă aveți înștiințări, Safari va pune o subliniere deasupra textului.

text-decor-sărire

Proprietatea text-decoration-skip permite omiterea înștiințărilor în textul subliniat.

Această proprietate nu este standard și funcționează în prezent numai în Safari, cu prefixul -webkit-. Safari activează această proprietate în mod implicit, astfel încât înștiințările nu sunt întotdeauna șterse.

Dacă utilizați Normalize, vă rugăm să rețineți că ultimele versiuni dezactivați această proprietate de dragul unui comportament consecvent al browserului. Și dacă doriți ca sublinierea să nu afecteze înștiințările, trebuie să o activați manual.

text-decor-stil

Proprietatea în stil text-decor oferă aceleași opțiuni de stil ca și proprietatea în stil chenar, cu adăugarea unui stil ondulat.

Iată o listă cu valorile disponibile:

întreruptă
punctat
dubla
solid

În prezent, proprietatea text-decoration-style funcționează numai în Firefox, iată o captură de ecran din ea:

Ce lipsește

Seria de proprietăți text-decorare-* este mult mai intuitiv de utilizat decât celelalte Proprietăți CSS pentru subliniere. Dar dacă aruncăm o privire mai atentă, nu există suficiente modalități de a seta grosimea sau poziția liniei pentru a ne satisface nevoile.

După câteva cercetări, am mai găsit câteva proprietăți:

text-subliniere-lățime
text-subliniere-poziție

Acestea par a fi primele schițe ale CSS, dar nu au fost niciodată implementate în browsere din cauza lipsei de interes.

concluzii

Deci, care este cel mai bun mod de a sublinia?

Pentru text mic, recomand să utilizați text-decoration cu adăugarea optimistă text-decoration-skip . Pare puțin neplăcut în majoritatea browserelor, dar sublinierea a fost întotdeauna așa în browsere și oamenii pur și simplu nu vor observa. În plus, există întotdeauna șansa ca, dacă ai răbdare, acea subliniere să arate bine într-o zi, fără ca tu să fii nevoit să schimbi nimic așa cum fac browserele.

Pentru textul corpului este logic să folosiți imaginea de fundal. Această abordare funcționează, arată grozav și există mixuri Sass pentru ea. În principiu, puteți sări peste text-shadow dacă sublinierea este subțire sau o culoare diferită de text.

Pentru rânduri individuale de text, utilizați chenar-jos împreună cu orice proprietăți suplimentare.

Și dacă aveți nevoie de înștiințări care să apară pe un fundal cu gradient sau imagine, încercați să utilizați filtre SVG. Sau pur și simplu evitați să folosiți caractere de subliniere.

În viitor, când suportul pentru browser se va îmbunătăți, singurul răspuns va fi setul de proprietăți text-decoration-*.

De asemenea, recomand să aruncați o privire la articolul lui Benjamin Woodroffe CSS Underlines Suck, care abordează aceleași probleme.

De la autor: Stilizarea sublinierii linkurilor este destul de complicată și tot uit care metodă este cea mai bună în ce situație. Din fericire, John Jameson ne va ajuta să înțelegem rapid acest lucru în articolul său.

Există multe moduri de a stila sublinierile. S-ar putea să vă amintiți articolul „Crearea sublinierii linkurilor pe mediu”. Medium nu a încercat să facă nimic ieșit din comun, au vrut doar să creeze subliniere atractive în text.

Sublinii subțiri, negre, cu spații în jurul literelor cu înștiințări de jos – lucrare de Marcine Witchery din articolul Crearea de subliniere a linkurilor pe mediu.

O subliniere standard bună, care are, de asemenea marime bunași omite literele mici. Mult mai bine decât implicit majoritatea browserelor. După cum se dovedește, Medium s-a confruntat cu o mulțime de provocări pe parcurs. Și chiar și doi ani mai târziu, stilul bun subliniat încă provoacă o mulțime de probleme.

Goluri

De ce nu folosiți doar text-decor: subliniați? Dacă vorbim despre un scenariu ideal, sublinierea ar trebui:

să fie situat sub linia de bază;

sări peste litere mici;

schimba culoarea, grosimea și stilurile;

mergi la linie nouă;

lucrați cu orice fundal.

Cred că este absolut posibil pentru noi să cerem toate aceste lucruri de la subliniere, dar din câte știu, nu există o modalitate intuitivă de a face toate aceste lucruri în CSS.

Abordari

Deci, ce metode avem la dispoziție pentru a sublinia textul? Mi-am amintit următoarele:

text-decor;

imagine de fundal;

filtre SVG;

Underline.js(pânză);

text-decor-*

Să parcurgem întreaga listă și să luăm în considerare toate avantajele și dezavantajele fiecărei abordări.

proprietate text-decor

Proprietatea text-decorare este cea mai simplă modalitate de a sublinia textul. Trebuie să aplicați o singură proprietate. Pe text mic, o astfel de linie va arăta bine, dar dacă măriți dimensiunea fontului, va arăta ciudat.

Cea mai mare problemă cu proprietatea text-decor este lipsa personalizării. Linia folosește culoarea și dimensiunea fontului textului căruia i se aplică și nu există nicio modalitate între browsere de a schimba stilurile. Vom vorbi mai în detaliu despre această proprietate puțin mai târziu.

pro

ușor de folosit;

situat sub linia de bază;

omite descendenții în mod implicit în Safari și iOS;

sare la o nouă linie;

funcționează cu orice fundal.

Minusuri

nu omite descendenții de litere în alte browsere;

Culoarea, grosimea și stilurile nu pot fi modificate.

proprietate de margine de jos

Proprietatea de la marginea de jos este un echilibru bun între viteză și personalizare. Această abordare folosește dovedit cadre CSS, ceea ce înseamnă că puteți schimba cu ușurință culorile, grosimile și stilurile. Iată cum arată proprietatea border-bottom pe elementele inline:

Cel mai mare dezavantaj este cât de departe este sublinierea de text. Sublinierea este situată sub descendentele literelor. Această problemă poate fi rezolvată dacă faceți elementul inline-block și reduceți înălțimea liniei, dar apoi pierdeți capacitatea de a sări la linii noi. Bun pentru linii simple, dar nu mai mult.

De asemenea, puteți utiliza text-shadow pentru a ascunde părți ale liniei din jurul texturilor de jos. În acest caz, va trebui să imitați culoarea de fundal, ceea ce înseamnă că metoda funcționează doar pe fundaluri uniforme. Gradientele și imaginile nu vor funcționa.

În prezent, există 4 proprietăți pentru sublinierea stilului. Mult mai bine decât doar decorarea textului.

pro

puteți folosi proprietatea de tranziție și puteți anima culoarea și grosimea;

sare la linii noi în mod implicit dacă elementul nu este bloc în linie;

Minusuri

linia este situată foarte departe și este greu de mutat;

trebuie folosite prea multe proprietăți inutile pentru ca sublinierea să arate bine;

Evidențierea slabă a textului când utilizați text-shadow.

proprietate box-shadow

Proprietatea box-shadow desenează o subliniere folosind două umbre interioare: una care creează dreptunghiul și una care îl ascunde. Aceasta înseamnă că pentru ca metoda să funcționeze corect, este nevoie de un fundal uniform.

Același truc cu umbră de text poate fi folosit pentru a simula sărirea peste cuvintele de jos ale literelor. Dacă culoarea liniei este diferită de text sau este suficient de subțire, atunci nu ar trebui să existe probleme, așa cum este cazul cu decorarea textului.

pro

poate fi plasat sub linia de bază;

puteți sări peste înștiințări folosind text-shadow;

puteți schimba culoarea și grosimea;

sare la linii noi.

Minusuri

stilurile nu pot fi schimbate;

Nu funcționează cu toate mediile.

proprietatea imaginii de fundal

Proprietatea background-image ne rezolvă cel mai bine problemele noastre și are foarte puține dezavantaje. Ideea este că creați o imagine folosind gradient liniar și poziție de fundal care se repetă pe o axă orizontală de-a lungul liniilor de text. Elementul trebuie să fie afișat: inline;.

Demo-ul de mai jos nu folosește gradient liniar. Pentru a crea un efect cool, puteți folosi propria imagine.

pro

poate fi poziționat sub linia de bază;

puteți sări peste înștiințările de jos folosind text-shadow;

puteți schimba culoarea, grosimea (chiar și cu jumătate de pixel) și stilurile;

lucrează cu imagini personalizate;

sare la linii noi;

funcționează cu orice fundal atâta timp cât nu utilizați text-shadow.

Minusuri

Dimensiunea imaginii poate varia în funcție de rezoluție, browser și nivelul de zoom.

filtre SVG

Aceasta este metoda cu care m-am jucat. Puteți crea un element de filtru SVG în linie care va desena linia și va extinde textul pentru a masca părțile liniei care ar trebui să fie transparente. Filtrului i se poate da un id și poate fi referit în CSS folosind filtrul: url(‘#svg-underline’).

Ceea ce este grozav este că filtrul adaugă transparență fără a se baza pe text-shadow. Aceasta înseamnă că puteți sări peste baloanele cu litere pe orice fundal, inclusiv degrade și imagini! Exemplul de mai jos funcționează doar cu o singură linie de text, așa că aveți grijă.

Și așa arată în Chrome și Firefox:

Există probleme de asistență în IE, Edge și Safari. Este dificil să testați suportul pentru filtrele SVG în CSS. Puteți folosi regula @supports pe filtru, dar aceasta va verifica doar dacă linkul în sine funcționează și nu dacă filtrul este aplicat sau nu. Metoda mea este destul de dură pentru browsere, așa că fiți de două ori atenți.

pro

situat sub linia de bază;

omite liderii de jos;

Puteți schimba culoarea, grosimea și stilurile;

funcționează pe orice fundal.

Minusuri

nu sare la linii noi;

nu funcționează în IE, Edge și Safari, dar puteți specifica decorarea textului ca alternativă. Sublinierea în Safari arată grozav singure.

Underline.js (pânză)

Underline.js este o bibliotecă uimitoare. Sunt impresionat de ceea ce Wenting Zhang a putut face cu JS și de atenția la detalii. Dacă nu ați văzut încă demonstrația tehnologică Underline.js, opriți-vă un minut și aruncați o privire. Există un discurs minunat de nouă minute online despre principiile muncii, vă voi repeta rapid acum. Sublinierea sunt desenate cu folosind pânza. O abordare complet nouă, care funcționează surprinzător de bine.

În ciuda numelui atractiv, acesta este doar o demonstrație tehnică. Adică, nu veți putea introduce imediat biblioteca în proiect fără o grămadă de modificări.

Această bibliotecă merită menționată doar ca dovadă de concept. Canvas are potențialul de a crea evidențieri frumoase, interactive, dar va trebui să scrieți cod JS suplimentar pentru ca acesta să funcționeze corect.

Proprietăți text-decor-*

Îți amintești când am spus că vom intra în mai multe detalii despre ceva mai târziu? Acum hai să facem asta. Proprietatea text-decor funcționează bine singură, dar putem adăuga câteva proprietăți experimentale pentru valoare adăugată. cea mai buna vedere:

text-decor-culoare

text-decor-sărire

text-decor-stil

Nu vă bucurați din timp, știți despre suportul pentru browser.

proprietate text-decorare-culoare

Proprietatea text-decoration-color vă permite să schimbați culoarea sublinierii separat de culoarea textului. Proprietatea are chiar și un suport bun pentru browser. Funcționează în Firefox și este prefixat în Safari. Există un dezavantaj - dacă nu ștergeți linia din jurul înștiințărilor, în Safari se va afla deasupra textului. Firefox:

proprietate text-decorare-skip

Proprietatea text-decoration-skip este responsabilă pentru omiterea baloanelor de subsol în textul subliniat.

Proprietatea nu este standard și în prezent funcționează numai în Safari. Pentru a lucra în alte browsere, trebuie să utilizați prefixul –webkit-. În Safari, această proprietate este activată în mod implicit, motiv pentru care subliniază săriți subsolurile chiar și pe site-urile unde această proprietate nu este specificată.

Dacă utilizați Normalize, trebuie să știți că versiunile recente dezactivează proprietatea să funcționeze normal în toate browserele. Dacă doriți să recuperați acele subliniere aproape magice, trebuie să activați această proprietate.

proprietate de stil text-decor

Proprietatea text-decorare-stil oferă același set de subliniere ca proprietatea în stil chenar, dar adaugă și un nou aspect - ondulat. Valori posibile:

Momentan, proprietatea text-decorare-stil funcționează numai în Firefox, mai jos este o captură de ecran:

Set de subliniere monocromatice Arata asemanator?

Ce s-a întâmplat?

Proprietățile text-decoration-* sunt mai intuitive decât alte proprietăți pentru stilizarea subliniilor. Cu toate acestea, dacă aruncați o privire diferită asupra cerințelor pe care le-am prezentat mai devreme, veți observa că folosind aceste proprietăți nu puteți modifica grosimea și poziția. După câteva cercetări, am găsit aceste două proprietăți:

text-subliniere-lățime

text-subliniere-poziție

Se pare că aceste proprietăți au fost aruncate versiunea timpurie CSS din cauza lipsei de interes pentru ele. Nu au fost folosite niciodată. Hei, nu e vina mea.

concluzii

Deci, care este cel mai bun mod de a sublinia textul? Totul depinde de diverși factori.

Pentru text mic, recomand să utilizați text-decoration și proprietatea experimentală text-decoration-skip, în speranța că va funcționa. În majoritatea browserelor arată așa, dar așa a fost întotdeauna și oamenii nu i-au acordat atenție. Dacă ai suficientă răbdare, sunt șanse ca în curând toate subliniatele tale să arate bine fără să fii nevoit să schimbi nimic.

Pentru textul corpului, utilizați imaginea de fundal. Metoda funcționează, arată frumos și există mixuri Sass pentru ea. Dacă sublinierea este subțire sau culoarea este diferită de text, probabil că puteți sări peste metoda text-shadow. Pentru textul pe o singură linie, utilizați marginea de jos și orice alte proprietăți.

Și pentru a sări peste înștiințările de litere pe fundaluri sau imagini în gradient, încercați să utilizați un filtru SVG. Sau pur și simplu nu amestecați astfel de fundaluri cu subliniere. În viitor, când suportul pentru browser se va îmbunătăți, va fi posibil să se utilizeze proprietățile text-decoration-*.

Există multe în diverse moduri a stabilit Sublinierea textului CSS. Dacă vorbim despre un scenariu ideal, sublinierea ar trebui să îndeplinească următoarele condiții:

Situat sub linia de bază a liniei;
Nu intrați în contact direct cu părțile literelor care ies sub linia de bază;
Ar trebui să fie posibil să se schimbe culoarea, grosimea și stilul sublinierii;
Sublinierea ar trebui să continue după încheierea textului;
Sublinierea ar trebui să funcționeze pe orice fundal.

Toate acestea sunt destul de evidente. Dar din câte știu, nu există nicio modalitate de a realiza toate acestea folosind CSS.

Abordari

Modalități de subliniere a textului pe Internet:

text-decor;
margine-de jos ;
cutie-umbra ;
imagine de fundal ;
Filtre SVG;
Underline.js (pânză);
text-decor-* .

Să le privim unul câte unul și să vorbim despre avantajele și dezavantajele lor.

text-decor

Decorarea textului este cel mai simplu mod de a folosi sublinierea CSS. Se aplică o singură proprietate și atât. Pentru fonturi de dimensiuni mici, acest lucru poate părea destul de decent, dar creșteți dimensiunea și aceeași linie începe să arate ciudată.

Vezi exemplu

Cea mai mare problemă cu utilizarea textului-decor este lipsa de personalizare. Proprietatea se potrivește cu orice dimensiune a fontului sau culoarea textului căreia i se aplică și nu există o modalitate între browsere de a schimba stilul dat.

PRO

Este ușor de utilizat;
Situat sub linia de bază;
În mod implicit, adaugă umplutură din părțile literelor care ies sub linia de bază ( în Safari și iOS);
Se înfășoară peste linii;
Potrivit pentru orice fundal;

MINUSURI

Nu adaugă umplutură la porțiunile de litere care se extind sub linia de bază în alte browsere;
Nu puteți schimba culoarea, grosimea sau stilul sublinierii.

chenar-de jos

border-bottom este ușor de utilizat și personalizabil. Proprietatea vă permite să schimbați destul de ușor culoarea, grosimea și stilul sublinierii textului CSS.

Rezultatul aplicării chenarului de jos la elementele inline:

Vezi exemplu

Rețineți că sublinierea este plasată sub porțiunile literelor care se extind sub linia de bază. Acest lucru poate fi modificat prin setarea proprietății de bloc inline a elementului și scăderea valorii înălțimii liniei. Dar în acest caz pierzi capacitatea de a încheia textul. Potrivit pentru text cu o singură linie.

Vezi exemplu

Puteți folosi proprietatea text-shadow pentru a ascunde porțiunea sublinierii care se extinde sub linia de bază. În acest caz, trebuie să utilizați culoarea de fundal. Această abordare funcționează numai cu culori de fundal solide, nu cu umplere cu gradient sau imagini.

Vezi exemplu

Pentru a seta o singură subliniere, trebuie să aplicați patru proprietăți de stil. Acest lucru este mai mult decât pentru decorarea textului.

PRO

Folosind text-shadow puteți seta indentări din părțile literelor care ies sub linia de bază;
Puteți schimba culoarea, grosimea și stilul liniei de subliniere CSS;
Puteți seta tranziții și animații pentru culoarea și grosimea sublinierii;
Se împachetează în mod implicit, cu excepția cazului în care este inline-block ;

MINUSURI

Plasata departe de text, aceasta pozitie este greu de schimbat;
Există multe proprietăți suplimentare care trebuie utilizate;
Evidențierea ciudată a textului când utilizați proprietatea text-shadow.

cutie-umbră

Această proprietate creează o subliniere folosind două umbre: una creează un dreptunghi, a doua ascunde cea mai mare parte, cu excepția părții de jos. Această metodă este aplicabilă numai pentru un fundal simplu.

Vezi exemplu

Puteți folosi același truc ca și cu text-shadow pentru a simula umplutura din părți de litere care se extind sub linia de bază. Dacă sublinierea trebuie să fie de altă culoare decât textul, atunci nu veți avea aceleași probleme ca și cu decorarea textului.

PRO

Sublinierea CSS poate fi plasată sub linia de bază;
Puteți schimba culoarea și grosimea sublinierii;
Sublinierea este purtată rând cu rând.

MINUSURI

Nu se poate schimba stilul;
Nu funcționează pentru niciun fundal.

imagine de fundal

imaginea de fundal oferă un rezultat care îndeplinește toate criteriile de mai sus. Aceasta folosește gradient liniar și poziție de fundal pentru a crea o imagine care se repetă orizontal de-a lungul liniilor de text. În acest caz, textul trebuie setat să afișeze: inline;.

Vezi exemplu

În loc de gradient liniar, puteți adăuga propria imagine cu unele efecte.

Vezi exemplu

PRO

Sublinierea legăturii CSS poate fi plasată sub linia de bază;
Cu text-shadow puteți seta umplutura sub linia de bază;
Puteți schimba culoarea, grosimea și stilul sublinierii;
Funcționează cu imagini personalizate;
Sublinierea este purtată rând cu rând;
Funcționează pe orice fundal atâta timp cât text-shadow nu este folosit.

MINUSURI

Dimensiunea imaginii poate varia în funcție de rezoluție, browser și scară de vizualizare.

filtre SVG

Puteți crea un element de filtru SVG care desenează o linie și apoi extinde textul pentru a ascunde părțile transparente ale liniei. După aceea, trebuie să setați un identificator pentru filtru și să îl faceți referire în CSS:

filtru: url(‘#svg-subliniere’).

Avantajul acestei abordări este că filtrul adaugă transparență fără a utiliza text-shadow . Puteți seta distanța dintre liniile de subliniere CSS să se extindă sub linia de bază pe orice fundal. Dar această metodă nu este aplicabilă pentru textul cu o singură linie, acesta este principalul său dezavantaj.

Vezi exemplu

Iată cum arată în Chrome și Firefox:

Suportul pentru browser pentru IE, Edge și Safari este problematic. Testarea suportului pentru filtrul SVG în CSS este dificilă.

PRO

Poate fi plasat sub linia de bază;
Puteți seta indentări sub linia de bază;
Puteți schimba culoarea, grosimea și stilul sublinierii;
Funcționează pe orice fundal.

MINUSURI

Sublinierea nu transportă mai multe linii;
Nu funcționează în IE, Edge sau Safari, dar puteți crea o rezervă folosind text-decor. Oricum va arăta bine în Safari.

Underline.js (pânză)

Underline.js desenează sublinierea CSS folosind elemente

Aceasta este doar o versiune demo tehnică, așa că pentru a utiliza biblioteca va trebui să faceți modificări globale în proiectul în curs de dezvoltare.

Aducem aceasta metoda pentru a demonstra capacități

Proprietăți text-decor-*

Această proprietate funcționează excelent singură, dar puteți adăuga câteva proprietăți experimentale pentru a personaliza aspectul:

text-decor-culoare ;
text-decor-omitere ;
text-decor-stil .

Doar nu te bucura din timp. Fiți conștienți de problemele legate de asistența browserului.

TEXT-DECORARE-CULOARE

Vă permite să schimbați culoarea CSS a sublinierii întrerupte separat de culoarea textului. Această proprietate bine suportat de browsere. Funcționează în Firefox și folosește un prefix în Safari. Dar dacă nu gestionați pauzele sub linia de bază a textului, Safari va plasa sublinierea deasupra textului.

Firefox:

Safari:

TEXT-DECORAȚIE-SIM

Această proprietate adaugă pauze sub linia de bază:

Nu este standard și în prezent funcționează doar în Safari, așa că trebuie să utilizați prefixul -webkit pentru a-l folosi. Safari acceptă această proprietate în mod implicit, astfel încât pauzele sunt adăugate chiar și pe site-urile unde proprietatea nu este specificată deloc.

TEXT-DECORATIE-STYLE

Această proprietate oferă aceleași tipuri de subliniere a textului CSS care pot fi setate folosind stilul de margine . Și pe lângă aceasta, adaugă și o linie de tip ondulată (onduită).

Mai jos sunt diferitele valori care pot fi utilizate:

punctată;
punctat;
dublu;
solid;
ondulat.

Momentan, stilul text-decor funcționează numai în Firefox, iată o captură de ecran.

Să continuăm să creăm trucuri folosind css pur. Astăzi vă voi spune cum să faceți folosind css face frumos linie de separare sub forma unui val Pe net. Poate fi folosit, de exemplu, pentru a separa vizual postările de blog sau pentru a separa blocuri într-o bară laterală.

Am mai vorbit odată. Dar a folosit eticheta de dinozaur hr cu câteva reguli de stil complicate care îți permiteau să te joci cu umbra.

Astăzi situația este complet diferită. Pentru a afișa o linie ca un val, va trebui să adăugați mult mai multe trucuri la reguli și să utilizați nu doar css, ci și css3. Bine ati venit!

Pentru început, de obicei cod html. Vom afișa liniile ca blocuri div goale cu seturi speciale de reguli. Blocurile goale sunt, desigur, rele. Dar uneori trebuie să suporti.

Aici am arătat 4 tipuri de linii. Și așa va arăta un set de stiluri CSS pentru ei:

Val (
preaplin: ascuns;
poziție: relativă;
latime: 630px;
înălțime: 50px;
}
.linia(
poziție: absolută;
latime: 630px;
înălțime: 26px;
}
.linia 1 (

}
.randul 2 (

}
.linia(
dimensiunea fundalului: 50px 50px;
}
.smallLine(
poziție: absolută;
latime: 630px;
înălțime: 5px;
}
.smallLine1(
fundal: gradient liniar (45 de grade, transparent, transparent 49%, negru 49%, transparent 51%);
}
.smallLine2(
fundal: liniar-gradient(-45deg, transparent, transparent 49%, negru 49%, transparent 51%);
}
.smallLine(
dimensiunea fundalului: 10px 10px;
}
.cerc(
poziție: absolută;
latime: 630px;
înălțime: 20px;
fundal: radial-gradient(16px, transparent, transparent 4px, negru 4px, negru 10px, transparent 11px);
dimensiunea fundalului: 30px 40px;
}
.cerce2 (
sus: 20px;
stânga: 15px;

}
.elipsă(
poziție: absolută;
fundal: radial-gradient (elipsa, transparent, transparent 7px, negru 7px, negru 10px, transparent 11px);
dimensiunea fundalului: 36px 40px;
latime: 630px;
înălțime: 20px;
}
.elipse2 (
sus: 20px;
stânga: 18px;
fundal-poziție: 0px -20px;
}

Aici am folosit caracteristici precum gradient liniar și gradient radial din arsenalul css3.
Există o altă opțiune pentru utilizarea unei linii de despărțire sub forma unui val (cea mai joasă din ilustrația de la începutul postării). Poate fi folosit la capătul unui bloc, ca design de fund. Codul este destul de simplu. Primul html:

ÎN regulile css Să folosim pseudo-elementele:before și:after . Puteți citi despre ele. Iată cum va arăta codul:

Val(
latime: 630px;
fundal: #333;
înălțime: 30px;
poziție: relativă;
}
.wave::inainte(
continut: "";
poziție: absolută;
stânga: 0;
jos: 0;
dreapta: 0;
background-repeat: repetare;
înălțime: 10px;
dimensiunea fundalului: 20px 20px;
imagine de fundal:
radial-gradient(cerc la 10px -5px, transparent 12px, #19d1ff 13px);
}
.wave::dupa(
continut: "";
poziție: absolută;
stânga: 0;
jos: 0;
dreapta: 0;
background-repeat: repetare;
înălțime: 15px;
dimensiunea fundalului: 40px 20px;
imagine de fundal:
radial-gradient(cerc la 10px 15px, #19d1ff 12px, transparent 13px);
}

Asta e tot! Du-te!