Continuăm să facem trucuri în css pur. Astăzi vă voi spune cum să faceți unul frumos folosind css linie de separare sub forma unui val pe site. Poate fi folosit, de exemplu, pentru a separa vizual postările de blog sau pentru a separa blocuri în bara laterală.
Odată am vorbit deja despre. Dar a folosit eticheta de dinozaur hr cu câteva reguli de stil complicate pentru a se juca cu umbra.
Astăzi situația este complet diferită. Pentru a afișa o linie sub forma unui val, va trebui să adăugați mai multe trucuri la reguli și să aplicați nu doar css, ci și css3. Bun venit!
Pentru început, codul html obișnuit. Vom trasa liniile ca div-uri 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 în css pentru ei:
Val (
preaplin: ascuns;
poziție: relativă;
latime: 630px;
înălțime: 50px;
}
.line (
poziție: absolută;
latime: 630px;
înălțime: 26px;
}
.linia 1 (
}
.randul 2 (
}
.line (
dimensiunea fundalului: 50px 50px;
}
.smallLine (
poziție: absolută;
latime: 630px;
înălțime: 5px;
}
.smallLine1 (
fundal: liniar-gradient (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;
}
.elipsa (
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 trucuri precum liniar-gradient și radial-gradient 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 decor de fund. Codul este destul de simplu. Mai întâi html:
Să aplicăm pseudoelementele: înainte și: după în regulile css. Puteți citi despre ele. Iată cum va arăta codul:
Val (
latime: 630px;
fundal: # 333;
înălțime: 30px;
poziție: relativă;
}
.unda :: 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);
}
.undă :: după (
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!
De la autor: styling link-uri subliniere este o afacere dificilă și tot uit care metodă este cea mai bună pentru o anumită 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. Poate vă amintiți articolul Creați subliniere pentru linkuri medii. Medium nu a încercat să facă ceva din cutie, au vrut doar să creeze subliniere atractive în text.
Subliniile subțiri, negre, cu spații în jurul literelor cu linii de jos, este lucrarea lui Marcin Whitchery în Crearea subliniilor de linkuri medii.
Subliniere standard bună, care este, de asemenea, bine dimensionată și omite orice descendenți. Mult mai bun decât majoritatea browserelor implicite. După cum se dovedește, Medium s-a confruntat cu multe provocări pe parcurs. Și chiar și doi ani mai târziu, stilul încă bun al subliniilor 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 sub linia de bază;
sări peste extensia inferioară a literelor;
schimba culoarea, grosimea și stilurile;
mergeți la o linie nouă;
lucrați cu orice fundal.
Cred că putem solicita toate acestea de la subliniere, cu toate acestea, din câte știu, nu există o modalitate intuitivă de a rezolva toate aceste sarcini în CSS.
Abordari
Deci, ce modalități avem 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.
Proprietatea text-decor
Proprietatea text-decorare este cea mai simplă modalitate de a sublinia textul. Trebuie aplicată o singură proprietate. Pe text mic, o astfel de linie va arăta bine, dar dacă măriți dimensiunea fontului, pare deja ciudat.
Cea mai mare problemă cu proprietatea text-decor este lipsa personalizării. Linia folosește culoarea și dimensiunea fontului textului la care este aplicată și nu există nicio modalitate între browsere de a schimba stilurile. Despre această proprietate vom vorbi mai detaliat mai târziu.
pro
ușor de folosit;
este sub linia de bază;
omite ascendenții în mod implicit în Safari și iOS.
sare la o nouă linie;
funcționează cu orice fundal.
Minusuri
nu omite părțile inferioare de extensie ale literelor în alte browsere;
culoarea, grosimea și stilurile nu pot fi modificate.
Proprietatea de la marginea de jos
Proprietatea de la marginea de jos este un echilibru bun între viteză și personalizare. Această abordare folosește margini CSS dovedite, ceea ce înseamnă că puteți schimba cu ușurință culoarea, greutatea și stilurile. Iată cum arată proprietatea border-bottom pe elementele inline:
Cel mai mare aspect negativ este cât de departe este sublinierea de text. Sublinierea este situată sub descendentele literelor. Această problemă poate fi rezolvată prin blocarea elementului în linie și scăderea înălțimii liniei, dar apoi se pierde capacitatea de a sări la linii noi. Bun pentru linii simple, dar nu mai mult.
În plus, puteți utiliza text-shadow pentru a ascunde porțiuni ale liniei din jurul liderilor de jos. În acest caz, va trebui să simulați culoarea de fundal, ceea ce înseamnă că metoda funcționează numai pe fundaluri uniforme. Gradientele și imaginile nu vor funcționa.
În prezent, există 4 proprietăți pentru stilizarea sublinierii. 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 foarte departe și greu de mutat;
trebuie folosite prea multe proprietăți inutile pentru ca sublinierea să arate bine;
selecție slabă a textului atunci când utilizați text-shadow.
Proprietate box-shadow
Proprietatea box-shadow desenează o subliniere folosind două umbre interioare: una creează un dreptunghi, iar cealaltă îl ascunde. Aceasta înseamnă că este necesar un fundal uniform pentru ca metoda să funcționeze corect.
Același truc cu umbră text poate fi folosit pentru a simula spațiul alb în jurul liderilor 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 textului-decor.
pro
poate fi poziționat 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.
Proprietate imagine de fundal
Proprietatea imagine de fundal este cea mai bună pentru scopurile noastre și are foarte puține dezavantaje. Ideea este că creați o imagine cu gradient liniar și poziție de fundal care se repetă pe axa orizontală de-a lungul liniilor de text. Elementul trebuie să fie afișat: inline ;.
Demo-ul de mai jos nu folosește gradient liniar. Puteți folosi propria imagine pentru a crea un efect cool.
pro
poate fi poziționat sub linia de bază;
puteți sări peste liderii 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 text-shadow nu este folosit.
Minusuri
dimensiunea imaginii poate varia în moduri diferite pentru diferite rezoluții, browsere și niveluri de zoom.
filtre SVG
M-am jucat cu această metodă. Puteți crea un element de filtru SVG în linie care desenează linia și puteți extinde textul pentru a masca părțile liniei care trebuie să fie transparente. Un filtru poate fi ID și referit în CSS folosind filter: url ("# svg-underline").
Care este plusul - filtrul adaugă transparență fără a se baza pe text-shadow. Adică, puteți sări peste liderele de jos 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:
Problemele IE, Edge și Safari se confruntă cu probleme. 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ă, nu dacă filtrul a fost aplicat sau nu. Felul meu este destul de grosolan cu browserele, așa că fii 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ă. Subliniarile 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ă o discuție minunată de nouă minute pe rețea pe tema principiilor de lucru, o să vi-o spun rapid acum. Sublinierea sunt desenate 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 puteți 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 sublinii frumoase, interactive, dar va trebui să scrieți cod JS suplimentar pentru a funcționa corect.
Text-decor- * proprietăți
Vă amintiți când am spus că vom analiza ceva mai detaliat mai târziu? Acum vom face asta. Proprietatea text-decor funcționează bine singură, dar putem adăuga câteva proprietăți experimentale pentru un aspect și mai bun:
text-decor-culoare
text-decor-sărire
text-decor-stil
Nu fiți încântați, știți despre suportul pentru browser.
Proprietatea 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. În dezavantaj, dacă nu ștergeți linia din jurul liderilor, în Safari se va suprapune textului. Firefox:
Proprietatea text-decoration-skip
Proprietatea text-decoration-skip este responsabilă pentru ignorarea liderilor de jos în textul subliniat.
Această proprietate nu este standard și în prezent funcționează numai în Safari. Pentru a lucra în alte browsere, trebuie să utilizați prefixul -webkit-. Safari are această proprietate activată în mod implicit, motiv pentru care subliniază înștiințările de jos 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 corect în toate browserele. Dacă doriți să aduceți înapoi acele subliniere aproape magice, trebuie să activați această proprietate.
Proprietatea text-decorare-stil
Proprietatea text-decorare-stil oferă același set de subliniere ca și proprietatea-stil chenar, dar adaugă și un nou aspect - ondulat. Valori posibile:
Momentan, proprietatea text-decorare-stil funcționează numai în Firefox, mai jos este captura de ecran:
Un set de subliniere solide Arata similar?
Ce s-a întâmplat?
Proprietățile text-decoration- * sunt mai intuitive decât alte proprietăți pentru stilizarea subliniilor. Cu toate acestea, dacă priviți diferit cerințele 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 eliminate dintr-o versiune timpurie a CSS din cauza lipsei de interes pentru ele. Nu au fost aplicate niciodată. Hei, asta nu este 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. Arată așa-așa în majoritatea browserelor, 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 și să nu fii nevoit să schimbi nimic.
Utilizați imaginea de fundal pentru textul corpului. Metoda funcționează, arată bine și există mix-uri Sass pentru ea. Dacă sublinierea este subțire sau culoarea diferă de text, cel mai probabil puteți sări peste metoda text-shadow. Pentru textul pe o singură linie, utilizați border-bottom și orice alte proprietăți.
Și pentru a sări peste liniile de litere pe fundaluri sau imagini în gradient, încercați să utilizați filtrul SVG. Sau pur și simplu nu amestecați astfel de fundaluri cu subliniere. În viitor, când suportul pentru browser se îmbunătățește, pot fi utilizate proprietățile text-decor- *.
Există multe moduri diferite de a cere Sublinierea textului CSS... Dacă vorbim de un scenariu ideal, sublinierea trebuie să îndeplinească următoarele condiții:
- Poziționat sub linia de bază a liniei;
- Nu atingeți direct părțile literelor care se află sub linia de bază;
- Ar trebui să fie posibil să se schimbe culoarea, grosimea și stilul liniei de subliniere;
- Sublinierea ar trebui să continue după ce textul a fost împachetat;
- 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 cu CSS.
Abordari
Modalități prin care puteți sublinia textul pe Internet:
- text-decor;
- margine-de jos;
- cutie-umbră;
- imagine de fundal;
- filtre SVG;
- Underline.js (pânză);
- text-decor- *.
Să le aruncăm o privire pe rând și să vorbim despre avantajele și dezavantajele lor.
text-decor
text-decoration este cea mai simplă metodă de subliniere 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 la care este aplicată și nu există nicio modalitate între browsere de a schimba stilul dat.
PRO
- Este ușor de aplicat;
- Situat sub linia de bază;
- În mod implicit, adaugă umplutură la părțile literelor care ies sub linia de bază ( în Safari și iOS);
- Înfășoară rând cu linie;
- Potrivit pentru orice fundal;
MINUSURI
- Nu adaugă indentare din părțile literelor care ies sub linia de bază în alte browsere;
- Nu puteți schimba culoarea, greutatea sau stilul liniei de subliniere.
marginea-de jos
border-bottom este ușor de utilizat și personalizabil. Această proprietate face destul de ușor să schimbați culoarea, greutatea și stilul de subliniere a 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 bloc inline pe element ș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, este necesar să folosiți culoarea de fundal. Această abordare funcționează numai cu culori de fundal solide, nu cu umpleri în degrade sau cu imagini.
Vezi exemplu
Pentru a seta o singură subliniere, trebuie să aplicați patru proprietăți de stil. Aceasta este mai mult decât un text-decor.
PRO
- Cu ajutorul text-shadow, puteți seta indentările din părțile literelor care ies sub linia de bază;
- Puteți schimba culoarea, greutatea și stilul de linie CSS al sublinierii;
- Puteți seta tranziții și animații pentru culoarea și grosimea sublinierii;
- Transferat implicit dacă nu este blocat în linie;
MINUSURI
- Plasata departe de text, aceasta pozitie este greu de schimbat;
- Există multe proprietăți suplimentare de utilizat;
- Evidențierea ciudată a textului când utilizați proprietatea text-shadow.
cutie-umbră
Această proprietate formează o subliniere folosind două umbre: una creează un dreptunghi, cealaltă ascunde cea mai mare parte a acestuia, cu excepția fundului. Această metodă este aplicabilă numai pentru un fundal solid.
Vezi exemplu
Puteți folosi același truc ca și cu text-shadow pentru a simula indentarea din părțile literelor care ies sub linia de bază. Dacă sublinierea ar trebui să fie de o culoare diferită de text, 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 înfășurată linie cu linie.
MINUSURI
- Stilul nu poate fi schimbat;
- Nu funcționează pentru niciun fundal.
imagine de fundal
background-image produce un rezultat care corespunde tuturor criteriilor 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 ajutorul text-shadow, puteți seta indentări sub linia de bază;
- Puteți schimba culoarea, grosimea și stilul sublinierii;
- Funcționează cu imagini personalizate;
- Sublinierea înfășoară linie cu linie;
- Funcționează pe orice fundal, cu excepția cazului în care se folosește text-shadow.
MINUSURI
- Dimensiunea imaginii se poate modifica în diferite moduri, î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ă faceți referire la el î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 de subliniere CSS să iasă 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
Așa arată în Chrome și Firefox:
Suportul pentru browser pentru IE, Edge și Safari este problematic. Verificarea 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 liniei de subliniere;
- Funcționează pe orice fundal.
MINUSURI
- Sublinierea nu se înfășoară pe mai multe linii;
- Nu funcționează în IE, Edge sau Safari, dar alternativa se poate face cu decorarea textului. 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ă, prin urmare, pentru a utiliza biblioteca, va trebui să faceți modificări globale în proiectul în curs de dezvoltare.
Oferim această metodă pentru a demonstra posibilitățile
Text-decor- * proprietăți
Această proprietate funcționează bine singură, dar puteți adăuga câteva proprietăți experimentale pentru a modifica aspectul:
- text-decor-culoare;
- text-decor-sărire;
- text-decor-stil.
Doar nu te bucura din timp. Fiți conștienți de problema de asistență pentru browser.
TEXT-DECORARE-CULOARE
Vă permite să schimbați culoarea CSS a sublinierii punctate separat de culoarea textului. Această proprietate este bine acceptată de browsere. Funcționează în Firefox și este prefixat în Safari. Dar dacă nu gestionați pauzele sub linia de bază a textului, atunci 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 chenar. Și pe lângă asta se adaugă tipul de linie ondulată.
Următoarele sunt diferitele valori pe care le puteți utiliza:
- punctat;
- punctat;
- dubla;
- solid;
- ondulat.
Deocamdată, stilul text-decor funcționează doar în Firefox, iată o captură de ecran.
Descriere
Adaugă decor text sub formă de subliniere, baraj, linie deasupra textului și clipire. Mai mult de un stil poate fi aplicat în același timp prin enumerarea valorilor separate prin spații.
Sintaxă
text-decor: [clipi || line-through || overline || subliniat] | niciunul | moşteni
Valorile
blink Setează textul care clipește. Un astfel de text periodic, cam o dată pe secundă, dispare, apoi reapare în același loc. Această valoare este în prezent depreciată de browsere și este depreciată în CSS3; animația este recomandată în schimb. line-through Creează text barat (exemplu). overline Linia trece peste text (exemplu). subliniere Setează textul subliniat (exemplu). niciunul Anulează toate efectele, inclusiv sublinierea implicită pentru legături. inherit Valoarea este moștenită de la părinte.HTML5 CSS2.1 IE Cr Op Sa Fx
Atacul strategic
Model de obiect
document.getElementById ("elementID") .style.textDecoration
document.getElementById ("elementID") .style.textDecorationBlink
document.getElementById ("elementID") .style.textDecorationLineThrough
document.getElementById ("elementID") .style.textDecorationNone
document.getElementById ("elementID") .style.textDecorationOverLine
document.getElementById ("elementID") .style.textDecorationUnderline
Browsere
Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire. Linia obținută folosind valoarea line-through este mai mare în IE7 decât în alte browsere; IE8 a remediat acest bug.
Există o mulțime de moduri diferite de a stila o subliniere. Vă puteți aminti articolul lui Marcin Vichari „Crafting link underlines” pe Medium. Dezvoltatorii Medium nu încearcă să facă ceva nebunesc, vor doar să creeze o linie drăguță sub text.
Aceasta este cea mai simplă subliniere, dar are dimensiunea corectă și nu se suprapune pe descendenții literelor. Și este cu siguranță mai bun decât liniuța de subliniere implicită în majoritatea browserelor. Medium s-a străduit să-și atingă stilul pe web. Doi ani mai târziu, încă ne este greu să obținem o subliniere frumoasă.
Goluri
Ce este în neregulă cu textul-decor familiar: subliniere? Pentru un scenariu ideal, sublinierea ar trebui să facă următoarele:
- poziționat sub linia de bază;
- omite elementele de la distanță;
- 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 cu 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-umbră;
- imagine de fundal;
- filtre SVG;
- Underline.js (pânză);
- text-decor- *.
Să analizăm 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. S-ar putea să arate destul de decent la dimensiunile mici ale fontului, dar măriți dimensiunea fontului și această subliniere î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 aveți nicio modalitate de a schimba acest lucru între browsere. Vom vorbi despre asta mai detaliat.
- ușor de folosit;
- poziționat sub linia de bază;
- omite descendenții în mod implicit în Safari și iOS;
- subliniază textul cu mai multe linii;
- funcționează pe orice fundal.
- nu omite descendenții în toate celelalte browsere;
- nu permite schimbarea culorii, greutății sau stilului liniei.
marginea-de jos
border-bottom oferă un echilibru bun între simplitate și personalizare. Această abordare folosește vechea proprietate CSS border, ceea ce înseamnă că puteți schimba cu ușurință culoarea, greutatea și stilul.
Așa arată marginea de jos pe elementele inline.
Principalul dezavantaj este distanța liniei de subliniere față de text, este în întregime sub descendente. 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 cusături simple, dar nu este util în altă parte.
În plus, puteți utiliza text-shadow pentru a suprapune o parte din linia de lângă descendenți, imitând aceasta cu aceeași culoare ca fundalul. Adică, această tehnică funcționează doar pe un fundal monocrom simplu, fără degrade, modele sau imagini.
În acest moment, folosim deja până la patru proprietăți pentru a stila o linie. Aceasta 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 greutate;
- 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 a funcționa corect;
- atunci când utilizați text-shadow, evidențierea textului arată urât.
cutie-umbră
box-shadow desenează un descendent cu două umbre interioare: una creează un dreptunghi, iar cealaltă 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-umbră pentru a umple golurile dintre subliniere și descendenți. Dar dacă culoarea sublinierii este diferită de culoarea textului - sau este suficient de subțire, linia nu se va ciocni cu descendenții așa cum se întâmplă cu decorarea textului.
- vă permite să schimbați culoarea și grosimea liniei;
- funcționează cu text cu mai multe rânduri.
- nu permite schimbarea stilului de subliniere;
- nu funcționează pe niciun fundal.
imagine de fundal
Metoda imaginii de fundal este cea mai apropiată de dorința noastră ș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 liniile de text.
Pentru ca această abordare să funcționeze, textul trebuie să fie în afișare standard: modul inline; ...
Următoarea opțiune renunță la gradientul liniar, pentru efecte puteți adăuga propria imagine de fundal.
- poate fi poziționat sub linia de bază;
- poate sări peste înștiințări din cauza text-shadow;
- lucrează cu imagini personalizate;
- împachetează mai multe rânduri de text;
- funcționează pe orice fundal, atâta timp cât nu aplicați text-shadow.
- dimensiunea imaginii poate varia în funcție de rezoluția ecranului, browser și mărire.
Filtre SVG
M-am jucat mult cu această metodă. Puteți crea un filtru inline SVG care desenează o linie și apoi extinde textul pentru a masca partea din linie pe care vrem să o facem transparentă. Apoi puteți da filtrului un id și puteți face legătura cu acesta în CSS, cum ar fi filtrul: url (‘# svg-underline’).
Avantajul acestei abordări este că transparența este obținută fără aplicarea text-shadow, adică sărim peste înștiințările pe orice fundal, inclusiv degrade și imagini de fundal! Acest lucru funcționează doar pe o singură linie de text, vă rugăm să rețineți asta.
Așa arată în Chrome și Firefox:
Suportul IE, Edge și Safari este problematic. Este dificil să testați suportul filtrului SVG în CSS. Puteți utiliza directiva @supports cu filtru, dar aceasta va verifica doar dacă referința la filtru funcționează, dar nu și filtrul în sine. Încercările mele s-au încheiat cu o determinare tristă a capabilităților browserului, acesta este un dezavantaj vizibil al metodei.
- poate fi poziționat sub linia de bază;
- poate sări peste elementele de la distanță;
- permite schimbarea culorii, grosimii și stilului liniei;
- 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 ce a făcut Wentin Zhang cu abilitățile ei JavaScript și atenția la detalii. Dacă nu ați văzut demonstrația tehnică Underline.js, nu mai citiți și luați un minut din timpul dvs. Există și o discuție de nouă minute despre cum funcționează, dar voi descrie pe scurt: sublinierea este desenată folosind elemente
În ciuda numelui captivant, Underline.js este doar o demonstrație tehnică. Acest lucru înseamnă că nu puteți pur și simplu să luați acest lucru și să îl conectați la proiect fără a schimba codul.
Am decis să menționez asta ca o dovadă a conceptului că
Noi proprietăți de decorare a textului
Vă veți aminti că am promis că voi vorbi mai mult despre text-decor. A sosit timpul.
Această proprietate în sine funcționează excelent, dar puteți adăuga câteva proprietăți experimentale pentru a personaliza aspectul sublinierii.
- text-decor-culoare
- text-decor-sărire
- text-decor-stil
Dar nu fi prea fericit... Suport pentru browser - 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 este prefixat în Safari. Iată problema: dacă aveți înștiințări, Safari va pune o subliniere peste text.
text-decor-sărire
Proprietatea text-decoration-skip permite omiterea descendenților î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 barate.
Dacă utilizați Normalize, vă rugăm să rețineți că versiunile recente dezactivează această proprietate de dragul unui comportament coerent al browserului. Și dacă doriți ca sublinierea să nu afecteze descendenții, trebuie să o activați manual.
text-decor-stil
Proprietatea în stil text-decor oferă aceleași capacități de stil ca și proprietatea în stil chenar, cu adăugarea stilului 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 lipseste
Seria de proprietăți text-decoration- * este mult mai intuitiv de utilizat decât restul proprietăților CSS pentru stilul subliniat. Dar dacă aruncați 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 schițe timpurii 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ă a text-decoration-skip. Pare puțin lipsit de gust în majoritatea browserelor, dar browserele au avut întotdeauna subliniere și oamenii pur și simplu nu vor fi atenți. În plus, există întotdeauna șansa ca, cu răbdare, această subliniere să arate bine într-o zi, fără ca tu să fii nevoit să schimbi nimic, așa cum vor face browserele.
Pentru textul corpului, este logic să folosiți imaginea de fundal. Această abordare funcționează, arată grozav și există mixuri Sass pentru ea. Puteți, în principiu, să omiteți umbra textului dacă sublinierea este subțire sau diferită de culoare față de text.
Pentru linii individuale de text, utilizați marginea de jos împreună cu orice proprietăți suplimentare.
Și dacă trebuie să săriți peste descendente față de un gradient sau o imagine, încercați să utilizați filtre SVG. Sau evitați pur și simplu să folosiți caractere de subliniere.
În viitor, pe măsură ce suportul pentru browser se îmbunătățește, singurul răspuns va fi setul de proprietăți text-decoration- *.
De asemenea, recomand să consultați articolul lui Benjamin Woodruff CSS Underlines Suck, care abordează aceleași probleme.
