Načini podvlačenja u CSS-u. Razdjelna linija u obliku vala na css Css stilu podcrtavanja

Svojstvo CSS text-decoration odgovorno je za ukrašavanje teksta u smislu podcrtavanja. Možete napraviti donju ili gornju crtu. Također možete precrtati tekst ili primijeniti sva podcrtavanja odjednom.

CSS sintaksa ukrašavanja teksta

...tekst-ukras: ništa|podcrtano|prekocrtano|linijski|naslijediti; ...

nijedan - tekst bez ukrasa
podcrtati – podcrtati
overline – podvlaka
line-through – precrtani tekst
blink - trepćući tekst (preporuča se ne koristiti ovu vrijednost)

Možete navesti više vrijednosti. Na primjer

text-decoration : podcrtano nadcrtano ;

Kako promijeniti stil i boju podcrtavanja

Za promjenu stila podcrtavanja postoji posebno svojstvo text-decoration-style :

text-decoration-style: čvrsta|dvostruko|točkasta|crtkana|valovita;

solid - puna podvlaka
dvostruka - dvostruka linija
točkasto - točkasta linija
isprekidana – isprekidana linija
valovita - valovita linija

Za promjenu boje podcrtavanja upotrijebite svojstvo text-decoration-color:

text-decoration-style : boja ;

boja može poprimiti vrijednosti u obliku RGB, imena boja (pogledajte kodove i nazive html boja za web mjesto)

Bilješka

Nažalost, svojstva text-decoration-style i text-decoration-color ne podržavaju gotovo svi preglednici (već je 2016.).

Primjeri s podvlakama

Primjer 1: Jednostavna podvlaka

Običan tekst. Podvlaka Podvlaka

Običan tekst.

Podvlaka

Gornja i donja crta

Primjer 2: Precrtani tekst

Običan tekst. Precrtani tekst

Ovako to izgleda na stranici:

Običan tekst. Precrtani tekst

Primjer 3. Promjena boje i vrste podcrtavanja

Običan tekst.

Ovako to izgleda na stranici:

Običan tekst.
Crveno podvučeno s točkastom linijom

Bilješka

Ako ne vidite nikakve promjene u posljednjem primjeru, možete pokušati upotrijebiti provjerenu metodu koristeći svojstvo border-bottom:

border-bottom : 1px datirano crveno ;

Da biste pristupili ukrašavanju teksta iz JavaScripta, trebate napisati sljedeću konstrukciju:

object.style.textDecoration ="VALUE "

Postoji hrpa različiti putevi podcrtavanje dizajna. Možda se sjećate članka Marcina Vicharija “Crafting link underlines” na Mediumu. Programeri Mediuma ne pokušavaju učiniti ništa ludo, oni samo žele stvarati lijepa linija ispod teksta.

Ovo je najjednostavnija podvlaka, ali ima odgovarajuća veličina i ne preklapa nastavke slova. I definitivno je bolji od zadane podvlake u većini preglednika. Medij se morao suočiti s izazovima kako bi postigao svoj stil na webu. Dvije godine kasnije, još uvijek nam je teško stvoriti lijepe podvlake.

Ciljevi

Što nije u redu s uobičajenim ukrasom teksta: podcrtano? U idealnom scenariju, podvlaka bi trebala učiniti sljedeće:

položaj ispod osnovne linije;
preskoči oblačiće;
promijeniti boju, debljinu i stil linije;
rad s višelinijskim tekstom;
raditi na bilo kojoj pozadini.

Vjerujem da su to sve razumni zahtjevi, ali koliko ja znam ne postoji intuitivan način da se to postigne koristeći CSS.

Prilazi

Koji su to različiti načini na koje možemo implementirati podcrtavanje na webu?

Evo onih koje razmatram:

tekst-ukras;
granica-dno ;
kutija-sjena ;
pozadinska slika ;
SVG filteri;
Underline.js(platno);
tekst-ukras-* .

Pogledajmo ove metode jednu po jednu i razgovarajmo o prednostima i manama svake od njih.

tekst-ukras

text-decoration je najočitiji način za podcrtavanje teksta. Primijenite jedno svojstvo i to je dovoljno. Na malim veličinama fonta ovo može izgledati dobro, ali povećajte veličinu fonta i podcrtavanje će početi izgledati nespretno.

Najveći problem s ukrašavanjem teksta je nedostatak prilagodbe. Ograničeni ste na boju i veličinu fonta teksta i ne postoji način da to promijenite u različitim preglednicima. O tome ćemo detaljnije govoriti kasnije.

jednostavan za korištenje;
postavljen ispod osnovne linije;
preskače oblačiće prema zadanim postavkama u Safariju i iOS-u;
naglašava višeredni tekst;
radi na bilo kojoj pozadini.

ne preskače podnožje u svim ostalim preglednicima;
ne dopušta promjenu boje, debljine ili stila linije.

granica-dno

border-bottom postiže dobru ravnotežu između jednostavnosti i prilagodljivosti. Ovaj pristup koristi dobro staro CSS svojstvo granice, što znači da možete jednostavno promijeniti boju, debljinu i stil.

Ovako izgleda obrub-dno za umetnute elemente.

Glavni nedostatak je udaljenost podcrtane linije od teksta; ona je potpuno ispod oblačića. To možete popraviti postavljanjem elemenata na inline-block i smanjenjem line-height, ali tada ćete izgubiti mogućnost prelamanja teksta. Dobro za pojedinačne linije, ali nije prikladno nigdje drugdje.

Osim toga, možemo upotrijebiti tekstualnu sjenu da zaklonimo dio crte pored umetnutih elemenata, simulirajući to korištenjem iste boje kao pozadine. Odnosno, ova tehnika radi samo na jednostavnoj jednobojnoj pozadini, bez gradijenata, uzoraka ili slika.

Na ovaj trenutak Za dizajn jedne linije već koristimo čak četiri svojstva. To je puno više posla nego samo dodavanje tekstualnog ukrasa.

može preskočiti oblačiće pomoću sjene teksta;
može promijeniti boju, težinu i stil linija;
omogućuje korištenje prijelaza i animacija boja i odvažnosti;
radi s tekstom u više reda osim ako se ne primijeni inline-block;
Radi na bilo kojoj pozadini sve dok ne koristite text-shadow.

Postavljen prenisko i pomaknut na težak način;
koriste se mnoga dodatna svojstva pravilan rad;
kada koristite text-shadow, isticanje teksta izgleda ružno.

kutija-sjena

box-shadow crta indeks koristeći dva unutarnje sjene: jedan stvara pravokutnik, a drugi skriva njegov dio. To znači da vam je potrebna jednobojna pozadina da bi ovo funkcioniralo.

Možete upotrijebiti isti trik sa sjenom teksta da popunite praznine između podcrtanih crta i oblačića. Ali ako se boja podcrtavanja razlikuje od boje teksta - ili je samo dovoljno tanka - linija se neće toliko sudarati s oblačićima kao što bi bila s ukrasom teksta.

omogućuje promjenu boje i debljine linije;
radi s višelinijskim tekstom.

ne dopušta promjenu stila podcrtavanja;
Ne radi ni na jednoj pozadini.

pozadinska slika

Metoda pozadinske slike najbliža je onome što želimo i ima najmanje nedostataka. Ideja je koristiti linearni gradijent i položaj pozadine za stvaranje slike koja se ponavlja ispod redaka teksta.

Da bi ovaj pristup funkcionirao, tekst mora biti u standardnom prikazu: inline; .

Sljedeća opcija je bez linearnog gradijenta, za efekte možete dodati vlastitu pozadinsku sliku.

može se postaviti ispod osnovne linije;
može preskočiti elemente oblačića pomoću sjene teksta;
radi s prilagođenim slikama;
prelama više redaka teksta;
Radi na bilo kojoj pozadini sve dok ne koristite text-shadow.

Veličina slike može varirati ovisno o razlučivosti zaslona, pregledniku i povećanju.

SVG filteri

Dosta sam se igrao ovom metodom. Možete stvoriti SVG linijski filtar koji iscrtava liniju i zatim proširuje tekst kako bi maskirao dio linije za koji želimo da bude proziran. Filtru zatim možete dati ID i referencirati ga u CSS-u, nešto poput filtera: url('#svg-underline') .

Prednost ovog pristupa je da se transparentnost postiže bez korištenja sjene teksta, što znači da dopuštamo da se oblačići pojavljuju na bilo kojoj pozadini, uključujući gradijente i pozadinske slike! Ovo radi samo na jednom retku teksta, pa imajte to na umu.

Evo kako to izgleda u preglednicima Chrome i Firefox:

Podrška u IE, Edge i Safari je problematična. Teško je testirati podršku SVG filtera u CSS-u. Možete koristiti direktivu @supports s filtrom, ali to će samo provjeriti funkcionalnost poveznice filtra, a ne funkcionalnost samog filtra. Moji pokušaji završili su zamornim utvrđivanjem mogućnosti preglednika; to je primjetan nedostatak metode.

može se postaviti ispod osnovne linije;
može preskočiti elemente proširenja;
omogućuje promjenu boje, debljine i stila linija;
radi na bilo kojoj pozadini.

ne radi s višelinijskim tekstom;
ne radi u IE, Edgeu i Safariju, ali možete koristiti ukras teksta kao zamjenu, izgleda pristojno u Safariju.

Underline.js (platno)

Underline.js je fascinantan. Smatram da je impresivno ono što je Wenting Zhang postigla svojim vladanjem JavaScriptom i obraćanjem pažnje na detalje. Ako niste vidjeli tehnički demo Underline.js, prestanite čitati i posvetite mu minutu. Tu je i njezin devetominutni govor o tome kako to funkcionira, ali bit ću kratak: podcrtano je nacrtano pomoću elemenata

Unatoč privlačnom nazivu, Underline.js je samo tehnički demo. To znači da ga ne možete samo uključiti u svoj projekt bez promjene koda.

Mislio sam ovo spomenuti kao dokaz koncepta koji

Nova svojstva ukrašavanja teksta

Sjećate se da sam obećao da ću više govoriti o dekoraciji teksta. Došlo je vrijeme.

Ovo svojstvo samostalno radi odlično, ali možete dodati neka eksperimentalna svojstva da biste ga prilagodili izgled podcrtavanje.

tekst-ukras-boja
tekst-ukras-preskoči
text-decoration-style

Ali nemojte se previše uzbuđivati... Podrška za preglednik je kao i uvijek. Tako to ide.

tekst-ukras-boja

Svojstvo text-decoration-color omogućuje promjenu boje podcrtavanja odvojeno od boje teksta. Podrška za ovo svojstvo bolja je nego što biste očekivali - radi u Firefoxu i s prefiksom u Safariju. Evo kvake: ako imate oblačiće, Safari će staviti podcrtavanje na vrh teksta.

tekst-ukras-preskoči

Svojstvo text-decoration-skip omogućuje preskakanje oblačića u podcrtanom tekstu.

Ovo svojstvo je nestandardno i trenutno radi samo u Safariju, s prefiksom -webkit-. Safari omogućuje ovo svojstvo prema zadanim postavkama, tako da oblačići nisu uvijek precrtani.

Ako koristite Normalize, imajte na umu da najnovije verzije onemogući ovo svojstvo radi dosljednog ponašanja preglednika. A ako želite da podcrtavanje ne utječe na oblačiće, morate ga ručno aktivirati.

text-decoration-style

Svojstvo text-decoration-style nudi iste mogućnosti oblikovanja kao i svojstvo border-style, uz dodatak valovitog stila.

Ovdje je popis dostupnih vrijednosti:

isprekidano
točkasta
dvostruko
čvrsta

Trenutačno svojstvo text-decoration-style radi samo u Firefoxu, evo snimke zaslona iz njega:

Što nedostaje

Text-decoration-* niz svojstava mnogo je intuitivniji za korištenje od ostalih CSS svojstva za podcrtavanje. Ali ako malo bolje pogledamo, nema dovoljno načina da namjestimo debljinu ili položaj linije da bismo zadovoljili svoje potrebe.

Nakon malog istraživanja, pronašao sam još nekoliko svojstava:

širina-podcrtavanja teksta
tekst-podcrtavanje-položaj

Čini se da su to rani nacrti CSS-a, ali nikada nisu implementirani u preglednike zbog nedostatka interesa.

zaključke

Dakle, koji je najbolji način za podcrtavanje?

Za mali tekst preporučujem korištenje text-decoration uz optimistično dodavanje text-decoration-skip . U većini preglednika izgleda malo ljepljivo, ali podcrtavanje je uvijek bilo ovakvo u preglednicima i ljudi to jednostavno neće primijetiti. Osim toga, uvijek postoji šansa da će, ako imate strpljenja, to podcrtavanje izgledati dobro jednog dana, a da ne morate ništa mijenjati kao što to rade preglednici.

Za tijelo teksta ima smisla koristiti pozadinsku sliku. Ovaj pristup funkcionira, izgleda sjajno i za to postoje Sass mixini. Možete, u načelu, preskočiti sjenčanje teksta ako je podcrtano tanko ili drugačije boje od teksta.

Za pojedinačne retke teksta koristite border-bottom zajedno sa svim dodatnim svojstvima.

A ako trebate oblačiće koji će iskočiti na gradijent ili pozadinu slike, pokušajte upotrijebiti SVG filtre. Ili jednostavno izbjegavajte korištenje podvlaka.

U budućnosti, kada podrška preglednika postane bolja, jedini odgovor bit će set svojstava text-decoration-*.

Također preporučujem da pogledate članak Benjamina Woodroffea CSS Underlines Suck, koji se bavi istim problemima.

Od autora: Oblikovanje podcrtanih poveznica prilično je nezgodno i stalno zaboravljam koja je metoda najbolja u kojoj situaciji. Srećom, John Jameson će nam pomoći da to brzo shvatimo u svom članku.

Postoji mnogo načina stiliziranja podcrtanih crta. Možda se sjećate članka “Stvaranje podcrtanih poveznica na mediju”. Medium nije pokušavao učiniti ništa neobično, samo su htjeli stvoriti atraktivne podcrtane crte u tekstu.

Tanke, crne podcrtane crte s razmacima oko slova s oblačićima na dnu – djelo Marcine Witchery iz članka Stvaranje podcrtanih crta za veze na mediju.

Dobra standardna podvlaka, koja također ima dobra veličina i preskače donja slova. Puno bolje od većine zadanih preglednika. Kako se ispostavilo, Medium se na tom putu susreo s mnogo izazova. Čak i dvije godine kasnije, dobar podcrtani stil još uvijek uzrokuje mnogo problema.

Ciljevi

Zašto jednostavno ne upotrijebite ukras teksta: podcrtano? Ako govorimo o idealnom scenariju, podvlake bi trebale biti:

biti smješten ispod osnovne linije;

preskoči donja slova;

promijeniti boju, debljinu i stilove;

ići nova linija;

raditi s bilo kojom pozadinom.

Mislim da je potpuno moguće zahtijevati sve ove stvari od podvlaka, ali koliko ja znam ne postoji intuitivan način da se sve te stvari rade u CSS-u.

Prilazi

Dakle, koje metode imamo na raspolaganju za podcrtavanje teksta? Sjetio sam se sljedećeg:

tekst-ukras;

pozadinska slika;

SVG filteri;

Underline.js(platno);

text-decoration-*

Prođimo kroz cijeli popis i razmotrimo sve prednosti i mane svakog pristupa.

svojstvo ukrašavanja teksta

Svojstvo text-decoration je najjednostavniji način za podcrtavanje teksta. Morate primijeniti samo jedno svojstvo. Na malom tekstu, takva će linija izgledati dobro, ali ako povećate veličinu fonta, izgledat će nezgrapno.

Najveći problem sa svojstvom ukrašavanja teksta je nedostatak prilagodbe. Crta koristi boju i veličinu fonta teksta na koji se primjenjuje i ne postoji način za promjenu stilova u različitim preglednicima. O ovoj nekretnini ćemo detaljnije govoriti nešto kasnije.

profesionalci

jednostavan za korištenje;

nalazi se ispod osnovne linije;

preskače descendere prema zadanim postavkama u Safariju i iOS-u;

skače na novi red;

radi s bilo kojom pozadinom.

minusi

ne preskače potomke slova u drugim preglednicima;

Boja, debljina i stilovi se ne mogu mijenjati.

border-bottom svojstvo

Svojstvo border-bottom dobra je ravnoteža brzine i prilagodbe. Ovaj pristup koristi dokazano CSS okviri, što znači da možete jednostavno mijenjati boje, debljine i stilove. Ovako izgleda svojstvo border-bottom na ugrađenim elementima:

Najveći nedostatak je koliko je podcrtano daleko od teksta. Podcrtano se nalazi ispod niza slova. Ovaj problem se može riješiti ako element napravite inline-block i smanjite visinu retka, ali tada gubite mogućnost skakanja na nove retke. Dobro za pojedinačne retke, ali ne više.

Također možete koristiti sjenu teksta da sakrijete dijelove crte oko donjih oblačića. U tom slučaju morat ćete oponašati boju pozadine, što znači da metoda radi samo na jednoličnim pozadinama. Gradijenti i slike neće raditi.

Trenutačno postoje 4 svojstva za podcrtavanje stila. Puno bolje nego samo tekstualni ukras.

profesionalci

možete koristiti svojstvo prijelaza i animirati boju i debljinu;

skače na nove retke prema zadanim postavkama ako element nije inline-block;

minusi

linija se nalazi vrlo daleko i teško se pomiče;

potrebno je koristiti previše nepotrebnih svojstava da bi podcrtano izgledalo dobro;

Loše isticanje teksta pri korištenju sjene teksta.

box-shadow svojstvo

Svojstvo box-shadow crta podcrtavanje koristeći dvije unutarnje sjene: jednu koja stvara pravokutnik i drugu koja ga skriva. To znači da je za ispravno funkcioniranje metode potrebna jedinstvena pozadina.

Isti trik sa sjenčanjem teksta može se koristiti za simulaciju preskakanja donjih oblačića slova. Ako se linija razlikuje od boje teksta ili je dovoljno tanka, onda ne bi trebalo biti problema, kao što je slučaj s tekstualnom dekoracijom.

profesionalci

može se postaviti ispod osnovne linije;

možete preskočiti oblačiće pomoću tekstualne sjene;

možete promijeniti boju i debljinu;

prelazi na nove retke.

minusi

stilovi se ne mogu mijenjati;

Ne radi sa svim pozadinama.

svojstvo pozadinske slike

Svojstvo pozadinske slike najbolje rješava naše probleme, a ima vrlo malo nedostataka. Ideja je da stvorite sliku pomoću linearnog gradijenta i pozadinskog položaja koji se ponavlja na vodoravnoj osi duž redaka teksta. Element mora biti display: inline;.

Demo u nastavku ne koristi linearni gradijent. Da biste stvorili cool efekt, možete koristiti vlastitu sliku.

profesionalci

može se postaviti ispod osnovne linije;

možete preskočiti donje oblačiće pomoću tekstualne sjene;

možete promijeniti boju, debljinu (čak i za pola piksela) i stilove;

radi s prilagođenim slikama;

prelazi na nove retke;

radi s bilo kojom pozadinom sve dok ne koristite text-shadow.

minusi

Veličina slike može varirati ovisno o rezoluciji, pregledniku i razini zumiranja.

SVG filteri

Ovo je metoda kojom sam se igrao. Možete stvoriti ugrađeni SVG filterski element koji će crtati crtu i proširiti tekst kako biste maskirali dijelove crte koji bi trebali biti prozirni. Filtru se može dati ID i referencirati ga u CSS-u pomoću filtera: url('#svg-underline').

Ono što je sjajno kod ovoga je to što filtar dodaje prozirnost bez oslanjanja na sjenčanje teksta. To znači da možete preskočiti balone sa slovima na bilo kojoj pozadini, uključujući gradijente i slike! Primjer u nastavku radi samo s jednim redom teksta, stoga budite oprezni.

A ovako to izgleda u Chromeu i Firefoxu:

Postoje problemi s podrškom za IE, Edge i Safari. Teško je testirati podršku za SVG filtere u CSS-u. Možete koristiti pravilo @supports na filtru, ali to će samo provjeriti radi li sama veza, a ne je li filtar primijenjen ili ne. Moja metoda je prilično gruba za preglednike, stoga budite dvostruko oprezni.

profesionalci

nalazi se ispod osnovne linije;

preskače donje lidere;

Možete promijeniti boju, debljinu i stilove;

radi na bilo kojoj pozadini.

minusi

ne prelazi na nove retke;

ne radi u IE, Edgeu i Safariju, ali možete navesti ukras teksta kao zamjenu. Podcrtane crte u Safariju izgledaju sjajno same po sebi.

Underline.js (platno)

Underline.js je nevjerojatna biblioteka. Impresioniran sam onim što je Wenting Zhang uspio učiniti s JS-om i obraćanjem pažnje na detalje. Ako još niste vidjeli tehnički demo Underline.js, zastanite na trenutak i pogledajte. Na internetu postoji prekrasan govor od devet minuta o principima rada, sad ću vam ga brzo prepričati. Podcrtane crte se crtaju pomoću pomoću platna. Potpuno novi pristup koji djeluje iznenađujuće dobro.

Unatoč privlačnom nazivu, ovo je samo tehnički demo. Odnosno, nećete moći odmah staviti knjižnicu u projekt bez cijele hrpe promjena.

Ovu knjižnicu vrijedi spomenuti samo kao dokaz koncepta. Canvas ima potencijal za stvaranje prekrasnih, interaktivnih isticanja, ali morat ćete napisati dodatni JS kod da bi ispravno radio.

Svojstva text-decoration-*

Sjećate li se kada sam rekao da ćemo o nečemu detaljnije govoriti malo kasnije? Sada učinimo ovo. Svojstvo ukrašavanja teksta dobro funkcionira samo po sebi, ali možemo dodati nekoliko eksperimentalnih svojstava za dodatnu vrijednost. najbolji pogled:

tekst-ukras-boja

tekst-ukras-preskoči

text-decoration-style

Nemojte se radovati prije vremena, znate za podršku preglednika.

svojstvo text-decoration-color

Svojstvo text-decoration-color omogućuje promjenu boje podcrtavanja odvojeno od boje teksta. Objekt ima čak i dobru podršku za preglednik. Radi u Firefoxu i ima prefiks u Safariju. Postoji loša strana - ako ne očistite liniju oko oblačića, u Safariju će ležati na vrhu teksta. Firefox:

svojstvo text-decoration-skip

Svojstvo text-decoration-skip odgovorno je za preskakanje oblačića podnožja u podcrtanom tekstu.

Nekretnina je nestandardna i trenutno radi samo u Safariju. Za rad u drugim preglednicima morate koristiti prefiks –webkit-. U Safariju je ovo svojstvo omogućeno prema zadanim postavkama, zbog čega podvlake preskaču podnožje čak i na stranicama gdje to svojstvo nije navedeno.

Ako koristite Normalize, trebate znati da novije verzije onemogućuju svojstvo da normalno radi u svim preglednicima. Ako želite vratiti te gotovo čarobne podvlake, trebate omogućiti ovo svojstvo.

svojstvo text-decoration-style

Svojstvo text-decoration-style nudi isti skup podcrtavanja kao svojstvo border-style, ali također dodaje novi izgled - valoviti. Moguće vrijednosti:

Trenutačno svojstvo text-decoration-style radi samo u Firefoxu, ispod je snimak zaslona:

Skup monokromatskih podcrtanih crta Izgleda slično?

Što nije u redu?

Svojstva text-decoration-* su intuitivnija od ostalih svojstava za stiliziranje podcrtanih crta. Međutim, ako drugačije pogledate zahtjeve koje smo ranije predstavili, primijetit ćete da pomoću ovih svojstava ne možete promijeniti debljinu i položaj. Nakon malog istraživanja pronašao sam ova dva svojstva:

širina-podcrtavanja teksta

tekst-podcrtavanje-položaj

Čini se da su ta svojstva izbačena rana verzija CSS zbog nedostatka interesa za njih. Nikad nisu korišteni. Hej, nisam ja kriv.

zaključke

Dakle, koji je najbolji način za podcrtavanje teksta? Sve ovisi o raznim faktorima.

Za mali tekst preporučujem korištenje text-decoration i eksperimentalnog svojstva text-decoration-skip, nadajući se da će funkcionirati. U većini preglednika to izgleda tako-tako, ali oduvijek je bilo tako i ljudi nisu obraćali pozornost na to. Ako ste dovoljno strpljivi, velike su šanse da će uskoro sve vaše podcrtane crte izgledati dobro, a da ništa ne morate mijenjati.

Za glavni tekst koristite pozadinsku sliku. Metoda funkcionira, izgleda lijepo i za to postoje Sass mixini. Ako je podcrtano tanko ili se boja razlikuje od teksta, vjerojatno možete preskočiti metodu sjenčanja teksta. Za tekst u jednom retku koristite border-bottom i sva druga svojstva.

A kako biste preskočili oblačiće slova na gradijentnim pozadinama ili slikama, pokušajte upotrijebiti SVG filter. Ili jednostavno nemojte miješati takve pozadine s podcrtanim crtama. U budućnosti, kada se poboljša podrška preglednika, bit će moguće koristiti svojstva text-decoration-*.

Ima ih mnogo na razne načine postaviti CSS tekst podcrtan. Ako govorimo o idealnom scenariju, podvlaka treba zadovoljiti sljedeće uvjete:

Nalazi se ispod osnovne crte linije;
Ne dolazite u izravan kontakt s dijelovima slova koji strše ispod osnovne linije;
Trebalo bi biti moguće promijeniti boju, debljinu i stil podcrtavanja;
Podcrtavanje treba nastaviti nakon što se tekst prelomi;
Podcrtavanje bi trebalo funkcionirati na bilo kojoj pozadini.

Ovo je sve prilično očito. Ali koliko ja znam, ne postoji način da se sve to postigne pomoću CSS-a.

Prilazi

Načini podvlačenja teksta na internetu:

tekst-ukras;
granica-dno ;
kutija-sjena ;
pozadinska slika ;
SVG filteri;
Underline.js (platno) ;
tekst-ukras-* .

Pogledajmo ih jednu po jednu i porazgovarajmo o njihovim prednostima i manama.

tekst-ukras

text-decoration je najjednostavniji način korištenja CSS podvlačenja. Primijeni se samo jedno svojstvo i to je to. Za male veličine fonta to može izgledati prilično pristojno, ali povećajte veličinu i ista linija počinje izgledati nezgrapno.

Pogledaj primjer

Najveći problem s korištenjem ukrasa teksta je nedostatak prilagodljivosti. Svojstvo odgovara bilo kojoj veličini fonta ili boji teksta na koje se primjenjuje i ne postoji način za promjenu zadanog stila u različitim preglednicima.

PREDNOSTI

Jednostavan je za korištenje;
Nalazi se ispod osnovne linije;
Prema zadanim postavkama dodaje ispunu od dijelova slova koji strše ispod osnovne linije ( u Safariju i iOS-u);
Omotava preko linija;
Prikladno za bilo koju pozadinu;

MINUSI

Ne dodaje ispunu dijelovima slova koji se protežu ispod osnovne linije u drugim preglednicima;
Ne možete promijeniti boju, debljinu ili stil podcrtavanja.

granica-dno

border-bottom je jednostavan za korištenje i prilagodljiv. Svojstvo vam omogućuje da vrlo jednostavno promijenite boju, debljinu i stil podcrtavanja CSS teksta.

Rezultat primjene border-bottom na umetnute elemente:

Pogledaj primjer

Imajte na umu da je podcrtano ispod dijelova slova koji se protežu ispod osnovne linije. To se može promijeniti postavljanjem svojstva inline-block elementa i smanjenjem vrijednosti line-height. Ali u ovom slučaju gubite mogućnost prelamanja teksta. Prikladno za jednoredni tekst.

Pogledaj primjer

Možete upotrijebiti svojstvo text-shadow da sakrijete dio podcrtane crte koji se proteže ispod osnovne crte. U tom slučaju morate koristiti boju pozadine. Ovaj pristup funkcionira samo s čvrstim bojama pozadine, ne i s gradijentna ispuna ili slike.

Pogledaj primjer

Da biste postavili jedno podcrtavanje, trebate primijeniti četiri svojstva stila. Ovo je više od ukrasa teksta.

PREDNOSTI

Korištenjem sjene teksta možete postaviti uvlake od dijelova slova koji strše ispod osnovne linije;
Možete promijeniti boju, debljinu i stil CSS podcrtane linije;
Možete postaviti prijelaze i animacije za boju i debljinu podcrtavanja;
Prelama prema zadanim postavkama osim ako nije inline-block ;

MINUSI

Postavljena daleko od teksta, ova se pozicija teško mijenja;
Postoje mnoga dodatna svojstva koja treba koristiti;
Čudno isticanje teksta kada se koristi svojstvo text-shadow.

kutija-sjena

Ovo svojstvo stvara podcrtavanje pomoću dvije sjene: jedna stvara pravokutnik, druga skriva veći dio osim dna. Ova metoda je primjenjiva samo za običnu pozadinu.

Pogledaj primjer

Možete upotrijebiti isti trik kao sa sjenkom teksta za simulaciju ispune od dijelova slova koji se protežu ispod osnovne linije. Ako podcrtavanje mora biti različite boje od teksta, tada nećete imati iste probleme kao što biste imali s ukrašavanjem teksta.

PREDNOSTI

CSS podvučena crta može se postaviti ispod osnovne linije;
Možete promijeniti boju i debljinu podvlake;
Podcrtavanje se prenosi redak po redak.

MINUSI

Nije moguće promijeniti stil;
Ne radi ni za kakvu pozadinu.

pozadinska slika

background-image daje rezultat koji zadovoljava sve gore navedene kriterije. Ovo koristi linearni gradijent i položaj pozadine za stvaranje slike koja se ponavlja vodoravno duž redaka teksta. U ovom slučaju, tekst mora biti postavljen na prikaz: inline;.

Pogledaj primjer

Umjesto linearnog gradijenta, možete dodati vlastitu sliku s nekim efektima.

Pogledaj primjer

PREDNOSTI

Podcrtavanje CSS veze može se postaviti ispod osnovne linije;
Pomoću text-shadow možete postaviti ispunu ispod osnovne linije;
Možete promijeniti boju, debljinu i stil podcrtavanja;
Radi s prilagođenim slikama;
Podcrtavanje se nosi redak po redak;
Radi na bilo kojoj pozadini sve dok se ne koristi sjena teksta.

MINUSI

Veličina slike može varirati ovisno o razlučivosti, pregledniku i mjerilu gledanja.

SVG filteri

Možete stvoriti SVG filterski element koji crta crtu, a zatim proširuje tekst kako bi sakrio prozirne dijelove crte. Nakon toga trebate postaviti identifikator za filtar i referencirati ga u CSS-u:

filter: url('#svg-podcrtano').

Prednost ovog pristupa je u tome što filtar dodaje prozirnost bez korištenja tekstualne sjene. Možete postaviti CSS podcrtani razmak tako da se proteže ispod osnovne linije na bilo kojoj pozadini. Ali ova metoda nije primjenjiva za tekst u jednom retku, to je njen glavni nedostatak.

Pogledaj primjer

Evo kako to izgleda u preglednicima Chrome i Firefox:

Podrška preglednika za IE, Edge i Safari je problematična. Testiranje podrške za SVG filtar u CSS-u je teško.

PREDNOSTI

Može se postaviti ispod osnovne linije;
Možete postaviti uvlake ispod osnovne linije;
Možete promijeniti boju, debljinu i stil podcrtavanja;
Radi na bilo kojoj pozadini.

MINUSI

Podcrtavanje se ne prenosi preko više redaka;
Ne radi u IE, Edgeu ili Safariju, ali možete stvoriti zamjenu pomoću ukrašavanja teksta. Svejedno će izgledati dobro u Safariju.

Underline.js (platno)

Underline.js crta CSS podcrtavanje pomoću elemenata

Ovo je samo tehnička demo verzija, tako da ćete za korištenje biblioteke morati napraviti globalne promjene u projektu koji se razvija.

Nosimo ovu metodu demonstrirati sposobnosti

Svojstva text-decoration-*

Ovo svojstvo samostalno radi odlično, ali možete dodati nekoliko eksperimentalnih svojstava da prilagodite izgled:

tekst-ukras-boja ;
text-decoration-skip ;
text-decoration-style .

Samo se nemoj radovati prije vremena. Budite svjesni problema s podrškom preglednika.

TEKST-DEKORACIJA-BOJA

Omogućuje promjenu CSS boje isprekidane podvlake odvojeno od boje teksta. Ova nekretnina dobro podržan od strane preglednika. Radi u Firefoxu i koristi prefiks u Safariju. Ali ako ne upravljate prijelomima ispod osnovne crte teksta, Safari će staviti podcrtavanje na vrh teksta.

Firefox:

Safari:

TEKST-UKRAS-PRESKOČ

Ovo svojstvo dodaje prijelome ispod osnovne linije:

Nije standardan i trenutno radi samo u Safariju, pa morate koristiti prefiks -webkit da biste ga koristili. Safari podržava ovo svojstvo prema zadanim postavkama, tako da se prekidi dodaju čak i na stranicama gdje svojstvo uopće nije navedeno.

TEKST-UKRAS-STL

Ovo svojstvo nudi iste CSS vrste podcrtavanja teksta koje se mogu postaviti korištenjem border-style-a. A osim toga, dodaje vrstu linije valovita (valovita).

Ispod su različite vrijednosti koje se mogu koristiti:

crtkano ;
točkasto ;
dvostruko ;
čvrsta ;
valovita.

Trenutačno text-decoration-style radi samo u Firefoxu, evo snimke zaslona.

Nastavimo stvarati trikove koristeći čisti css. Danas ću vam reći kako koristeći css učiniti lijepim razdjelna crta u obliku vala Na liniji. Može se koristiti, na primjer, za vizualno odvajanje postova na blogu ili odvajanje blokova u bočnoj traci.

Jednom davno o kojem sam već govorio. Ali koristio je oznaku hr dinosaura s nekoliko lukavih stilskih pravila koja su vam dopuštala da se igrate sa sjenom.

Danas je situacija potpuno drugačija. Da biste liniju prikazali kao val, morat ćete dodati puno više trikova pravilima i koristiti ne samo css, već i css3. Dobrodošli!

Za početak, uobičajeno html kod. Prikazat ćemo retke kao prazne div blokove s posebnim skupovima pravila. Prazni blokovi su, naravno, zlo. Ali ponekad se morate pomiriti s tim.

Ovdje smo prikazali 4 vrste linija. A ovako će izgledati skup css stilova za njih:

val (
preljev: skriven;
položaj: relativan;
širina: 630px;
visina: 50px;
}
.crta(
pozicija: apsolutna;
širina: 630px;
visina: 26px;
}
.linija 1 (

}
.linija2 (

}
.crta(
veličina pozadine: 50px 50px;
}
.smallLine(
pozicija: apsolutna;
širina: 630px;
visina: 5px;
}
.smallLine1(
pozadina: linearni gradijent (45 stupnjeva, prozirno, prozirno 49%, crno 49%, prozirno 51%);
}
.smallLine2(
pozadina: linearni gradijent (-45 stupnjeva, prozirno, prozirno 49%, crno 49%, prozirno 51%);
}
.smallLine(
veličina pozadine: 10px 10px;
}
.krug(
pozicija: apsolutna;
širina: 630px;
visina: 20px;
pozadina: radijalni gradijent (16px, prozirno, prozirno 4px, crno 4px, crno 10px, prozirno 11px);
veličina pozadine: 30px 40px;
}
.krug2(
gore: 20px;
lijevo: 15px;

}
.elipsa(
pozicija: apsolutna;
pozadina: radijalni gradijent (elipsa, prozirno, prozirno 7px, crno 7px, crno 10px, prozirno 11px);
veličina pozadine: 36px 40px;
širina: 630px;
visina: 20px;
}
.elipsa2 (
gore: 20px;
lijevo: 18px;
položaj pozadine: 0px -20px;
}

Ovdje smo koristili značajke kao što su linearni gradijent i radijalni gradijent iz css3 arsenala.
Postoji još jedna mogućnost korištenja razdjelne crte u obliku vala (najniža na slici na početku posta). Može se koristiti na kraju bloka, kao donji dizajn. Kod je vrlo jednostavan. Prvi html:

U css pravila Upotrijebimo pseudoelemente:before i:after. Možete čitati o njima. Ovako će kod izgledati:

Val(
širina: 630px;
pozadina: #333;
visina: 30px;
položaj: relativan;
}
.val::prije(
sadržaj: "";
pozicija: apsolutna;
lijevo: 0;
dolje: 0;
desno: 0;
pozadinsko ponavljanje: ponavljanje;
visina: 10px;
veličina pozadine: 20px 20px;
pozadinska slika:
radijalni gradijent (krug na 10px -5px, transparentan 12px, #19d1ff 13px);
}
.wave::after(
sadržaj: "";
pozicija: apsolutna;
lijevo: 0;
dolje: 0;
desno: 0;
pozadinsko ponavljanje: ponavljanje;
visina: 15px;
veličina pozadine: 40px 20px;
pozadinska slika:
radijalni gradijent (krug na 10px 15px, #19d1ff 12px, transparentan 13px);
}

To je sve! Samo naprijed!