Postoji mnogo različitih načina stiliziranja podcrtavanja. Možda se sjećate članka Marsina Vicharija “Crafting link underlines” na Mediumu. Srednji programeri ne pokušavaju napraviti nešto ludo, oni samo žele stvoriti lijepu liniju ispod teksta.

Ovo je najjednostavnije podcrtavanje, ali je prave veličine i ne preklapa zaglavlja pisma. I definitivno je bolji od zadanog podcrtavanja u većini preglednika. Medium se borio da postigne svoj stil na webu. Dvije godine kasnije, još uvijek nam je teško napraviti lijepu crtu.

Ciljevi

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

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

Mislim da su to sve razumni zahtjevi, ali koliko ja znam ne postoji intuitivan način da se to postigne pomoću CSS-a.

Prilazi

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

Evo onih koje razmatram:

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

Pogledajmo ove metode jednu po jednu i porazgovarajmo 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 bi moglo izgledati sasvim pristojno, ali povećajte veličinu fonta i podcrtavanje počinje izgledati nespretno.

Najveći problem s ukrašavanjem teksta je nedostatak postavki. Ograničeni ste bojom i veličinom fonta teksta i ne postoji način da to promijenite u različitim preglednicima. O ovome ćemo više razgovarati kasnije.

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

• ne preskače descendere 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 za obrub, što znači da možete jednostavno promijeniti boju, debljinu i stil.

Ovako izgleda obrub-dno na umetnutim elementima.

Glavni nedostatak je udaljenost podvlake od teksta, ona je u potpunosti ispod oblačića. To možete popraviti postavljanjem elemenata na inline-block i smanjenjem line-height, ali tada gubite mogućnost prelamanja teksta. Dobar za pojedinačne retke, ali nije dobar nigdje drugdje.

Osim toga, možemo upotrijebiti tekstualnu sjenu za preklapanje dijela crte pored silaznih linija, simulirajući to istom bojom kao pozadina. Odnosno, ova tehnika radi samo na običnoj, jednobojnoj pozadini, bez gradijenata, uzoraka ili slika.

U ovom trenutku već koristimo čak četiri svojstva za projektiranje jedne linije. To je puno više posla nego samo dodavanje tekstualnog ukrasa.

• može preskočiti oblačiće s text-shadowom;
• može promijeniti boju, težinu i stil linija;
• omogućuje korištenje prijelaza i animacija boja i težine;
• 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 kompliciran način;
• mnoga dodatna svojstva koriste se za pravilan rad;
• kada koristite text-shadow, odabir teksta izgleda ružno.

sjena kutije

box-shadow crta podliniju s dvije unutarnje sjene: jedna stvara pravokutnik, a druga skriva njegov dio. To znači da vam je potrebna solidna pozadina da bi ovo funkcioniralo.

Možete upotrijebiti isti trik sa sjenčanjem teksta da biste popunili praznine između podcrtanih i silaznih znakova. Ali ako se boja podcrtavanja razlikuje od boje teksta - ili je samo dovoljno tanka - linija se neće 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 je najbliža 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 načinu prikaza: inline; .

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

• može se postaviti ispod osnovne linije;
• može preskočiti oblačiće s text-shadowom;
• radi s prilagođenim slikama;
• prelama više redaka teksta;
• radi na bilo kojoj pozadini sve dok se ne primjenjuje sjena teksta.

• 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 ugrađeni filtar koji crta crtu, a zatim proširuje tekst kako bi maskirao dio crte koji želimo učiniti prozirnim. Zatim možete dati filtru ID i uputiti ga u CSS kao što je filter: url('#svg-underline') .

Prednost ovog pristupa je u tome što se transparentnost postiže bez upotrebe tekstualne sjene, što znači da preskačemo oblačiće na bilo kojoj pozadini, uključujući gradijente i pozadinske slike! Ovo radi samo na jednom retku teksta, 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 samo provjerava radi li veza na filtar, a ne sam filtar. Moji pokušaji završili su turobnom definicijom mogućnosti preglednika, ovo je opipljiv nedostatak metode.

• može se postaviti ispod osnovne linije;
• može preskočiti oblačiće;
• omogućuje promjenu boje, debljine i stila linije;
• 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 nevjerojatan. Smatram da je impresivno ono što je Venting Zhang učinila sa svojim JavaScript vještinama i pažnjom za 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, no ja ću ukratko opisati: podcrtano je povučeno pomoću elemenata . Ovo je novi pristup koji djeluje iznenađujuće dobro.

Unatoč privlačnom nazivu, Underline.js je samo tehnološka demonstracija. To znači da ga ne možete samo uzeti i uključiti u svoj projekt bez promjene koda.

Odlučio sam to spomenuti kao dokaz koncepta koji ima potencijal za stvaranje prekrasnih interaktivnih podcrtavanja, ali morate napisati vlastiti JavaScript da bi funkcionirao.

Nova svojstva ukrašavanja teksta

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

Samo po sebi, ovo svojstvo radi odlično, ali možete dodati nekoliko eksperimentalnih svojstava da prilagodite izgled podcrtavanja.

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

Ali nemojte se previše uzbuđivati... Podrška za preglednik 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 je bolja nego što biste očekivali - radi u Firefoxu i ima prefiks 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 prekriženi.

Ako koristite Normalize, imajte na umu da novije verzije onemogućuju 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 ukrašavanja 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:

Što nedostaje

Niz svojstava text-decoration-* mnogo je intuitivniji za korištenje od ostalih svojstava CSS-a za ukrašavanje podcrtavanja. Ali ako bolje pogledate, ne postoji dovoljno načina za postavljanje debljine ili položaja linije da bi se zadovoljili naši zahtjevi.

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

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

Čini se da su 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 s optimističnim dodatkom text-decoration-skip. U većini preglednika izgleda pomalo kitnjasto, ali podcrtavanje je oduvijek bilo u preglednicima i ljudi to jednostavno neće primijetiti. Osim toga, uvijek postoji šansa da će, ako ste strpljivi, to podcrtavanje jednog dana izgledati dobro, 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 ima Sass mixins. 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 želite da oblačići preskaču gradijent ili pozadinu slike, pokušajte koristiti SVG filtre. Ili jednostavno izbjegavajte korištenje podvlaka.

U budućnosti, kako se podrška preglednika bude poboljšavala, jedini odgovor bit će skup svojstava text-decoration-*.

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

Na ovoj stranici pronaći ćete primjere kako modificirati HTML veze pomoću CSS-a, što vam omogućuje da blokirate veze, veze ikona, bez podvlačenja, zaobljene kutove, promijenite udaljenost između njih i još mnogo toga. U budućnosti, na temelju ovih primjera, možete kreirati različite opcije za navigacijske izbornike za web mjesto.

Prije nego počnete proučavati primjere, želim napraviti malo pojašnjenje. U svim primjerima, radi veće preglednosti, koristit će se CSS pseudoklasa koja se koristi za promjenu stilova poveznica kada iznad njih prijeđete kursorom miša. Moram reći da je ova praksa uobičajena i, u jednoj ili drugoj mjeri, koristi se na gotovo svim internetskim stranicama.

U ovom primjeru ćemo ukloniti podcrtavanje s poveznica, a zatim ćemo ih dodati ili ukloniti dok lebdimo.

Primjer HTML i CSS: kako ukloniti i dodati podcrtavanje s poveznica

Opis primjera

1. Prema zadanim postavkama, svi popularni preglednici dodaju podcrtavanje vezama, što je kontrolirano CSS svojstvom. To jest, prema zadanim postavkama ovo je svojstvo, za veze, postavljeno na podcrtano. Koristeći ovo znanje, mijenjamo podcrtavanje poveznica u njihovim različitim stanjima.

U početku je podcrtavanje poveznica čvrsta tanka linija, gotovo pritisnuta uz tekst. I u većini slučajeva ova opcija je dovoljna. Međutim, ponekad dizajn zahtijeva da poveznice ne budu podvučene punom linijom, već, na primjer, točkastom linijom, ili da udaljenost od podcrtane do poveznice bude veća od standardne, ili sama podcrtana crta odvažniji. A ponekad morate napraviti neku vrstu egzotičnog podvlačenja, na primjer, valovitu ili višebojnu liniju. Sve ove opcije bit će razmotrene u ovom primjeru.

Primjer HTML-a i CSS-a: Isprekidane podvučene veze

Opis primjera

1. Prvo uklanjamo standardnu ​​podvlaku sa svih veza jer ćemo koristiti nestandardne metode. Zatim dodajemo donju granicu okvira prvoj poveznici koristeći CSS svojstvo i činimo je točkastom (isprekidanom). Ovo će biti naš vrhunac. Da bismo uklonili podcrtavanje kada lebdimo iznad poveznice, koristimo pseudo-klasu i pozadinu okvira učinimo istom kao pozadina stranice, odnosno jednostavno je sakrijemo. U teoriji, ovdje bi bilo bolje pozadinu okvira uopće učiniti transparentnom (transparentnom), ali IE6 pogrešno razumije ovu vrijednost.
2. S drugom karikom radimo isto kao i s prvom, ali samo crtamo punu liniju. Kako bismo povećali udaljenost od teksta do podcrtane, postavili smo vezu s malom donjom uvlakom pomoću CSS svojstva.
3. Naša treća poveznica ima višebojnu podvlaku, pa ćemo je dodati s pozadinskom slikom. Za to koristimo malu sliku koju povezujemo putem CSS-a. Postavite pozadinu na dno poveznice (0 100%) i dopustite samo vodoravno dupliciranje (ponovi-x). Podcrtano je gotovo, ali je preblizu tekstu da bi se to popravilo - dodajte malu uvlaku na dno veze. To je to.
4. Stariji IE6 i IE7 mogu imati problema s prikazom podcrtanih crta na prvoj i drugoj poveznici. Da bismo to popravili, dodajemo svojstvo zoom :1, koje uključuje tzv. raspored. Ovo svojstvo je nevažeće i razumiju ga samo ovi preglednici, pa ga je bolje omogućiti uvjetni komentari.

Vrlo često, da biste stvorili izbornik, morate napraviti ne samo tekstualne veze, već i blok veze, u kojima će aktivno područje biti i sam tekst i određeno područje oko njega.

Opis primjera

1. Za stvaranje blok poveznica, koristimo :block CSS svojstvo, koje ih pretvara u blok elemente koji stvaraju prijelom retka prije i poslije njih. Ako prijelomi redaka nisu potrebni, vrijednost možete zamijeniti s inline-block.
2. Budući da su veze sada blokovi, ako je potrebno, možemo promijeniti njihovu širinu (CSS) ili visinu (CSS).
3. U ovom primjeru uopće ne specificiramo visinu poveznica, već im jednostavno dajemo internu podlogu (CSS), koja proširuje blokove.

Opis primjera

1. Sve je vrlo jednostavno - pomoću CSS svojstva dodajemo željeni okvir vezama ispod pokazivača. Međutim, obratite pažnju, mi dodajemo potpuno isti okvir na obične linkove, samo što ga činimo iste boje kao i pozadina stranice. Odnosno, zasad jednostavno sakrijemo okvir. To je učinjeno tako da kada prijeđete mišem, poveznice ne počnu "skakati" zbog renderiranja okvira.

Umjesto da boja obruba odgovara pozadini stranice, mogla se postaviti na prozirnost i učiniti prozirnom, ali kao što sam rekao, IE6 to ne obrađuje ispravno.

Primjer HTML i CSS: Stvaranje 3D veza

Opis primjera

1. Koristeći CSS svojstvo, linkovima dodajemo okvire i uz pomoć postavljamo njihovu boju. Istodobno, za lijevu i gornju granicu označavamo svijetlu nijansu boje, a za donju i desnu - tamnu. Upravo zahvaljujući takvoj raspodjeli boja dobivamo linkove koji izgledaju poput trodimenzionalnih gumba.
2. Kako bi se činilo da su gumbi pritisnuti kada se pokazivač miša nalazi iznad, invertiramo boje obruba za veze s pseudo-klasom. Za dodatni učinak klika postavite relativno pozicioniranje (CSS :relative) i pomaknite ga prema gore za jedan piksel (CSS :-1px).
3. Pa, da sve bude potpuno lijepo - postavite tekst i boju pozadine linkova ispod kursora malo tamnije od uobičajenih. Spreman.

U ovom primjeru napravit ćemo poveznice s ikonama koje će sadržavati ne samo slike tih ikona, već i tekst ispod njih. Međutim, u budućnosti ih možete jednostavno promijeniti i ostaviti, na primjer, samo ikone.

Prije početka rada, pripremimo nekoliko slika ikona, i to u dva seta - za redovne veze i veze ispod pokazivača miša. Drugi set bi trebao biti izvana drugačiji od prvog, u našem slučaju to je izraženo u paleti boja.

Opis primjera

1. Radi skraćivanja koda, u linkovima ćemo koristiti dvije klase - "linkovi" (sa zajedničkim svojstvima) i "slika", "audio", "video" (osobne za svaki link). Ova točka je detaljno opisana u klase css referenca.
2. Naše ikone su 50x50 piksela i bit će prisutne na poveznicama kao pozadina (CSS), koju ćemo centrirati na vrhu (50% 0) i spriječiti je da se replicira (bez ponavljanja).
3. Dodajte ispunu linkovima (CSS ) tako da tekst u linkovima ne prianja uz rubove. Istodobno, gornju uvlaku činimo jednakom visini ikona kako se tekst ne bi preklapao s njima, jer su naše ikone pozadina.
4. Ako je u vezama vrlo malo teksta, slike ikona bit će odrezane sa strane. Kako se to ne bi dogodilo, postavili smo minimalnu širinu poveznica (CSS ) tako da bude barem jednaka širini ikona. U našem slučaju, trebamo dobiti minimalnu širinu od 50px, ali smo je postavili na 40px, budući da će još 10px biti dodano zbog bočne podloge.
5. Da bi minimalna širina funkcionirala, pretvorimo veze u umetnute blokove (CSS :inline-block).

IE6 će se morati malo "izliječiti":

1. IE6 ne razumije svojstvo za postavljanje minimalne širine, ali tumači CSS svojstvo točno kao minimalnu širinu. Stoga za to koristimo jednostavan hakirati koji će riješiti ovaj problem.

U ovom ćemo primjeru zaokružiti kutove poveznica pomoću jedne od sljedećih metoda. zaokruživanje ugla opisano u sljedećem pododjeljku. Nećemo razmatrati opciju pomoću CSS 3, jer je tamo sve vrlo jednostavno, već ćemo napraviti zaokruživanje pomoću slika.

Da bismo to učinili, prvo ćemo izrezati nekoliko praznih slika u dva seta - za obične veze i veze ispod pokazivača. Kod nas će se razlikovati po prisutnosti / odsutnosti sjene na slikama.

Opis primjera

Nećemo se zadržavati na samoj tehnologiji zaokruživanja, ako je potrebno, pročitajte o tome u odgovarajućem odjeljku web mjesta.

1. Pomoću CSS svojstva :inline-block izrađujemo linkove inline blokove. To je posebno potrebno kako bismo mogli odrediti točnu visinu poveznica koja odgovara visini slika.
2. Uklonite podcrtavanje i poravnajte tekst prema sredini (CSS :centar). Općenito, u našem slučaju nije potrebno centrirati tekst, jer se poveznice prilagođavaju veličini teksta u njima i jednostavno se nema gdje poravnati. Ali ako trebate povećati širinu poveznica (na primjer, do 150px), onda će vam ovo poravnanje dobro doći.
3. Za promjenu izgleda poveznica kada su ispod pokazivača miša, stilovima sa CSS pseudoklasom dodajemo dodatne selektore u kojima specificiramo naše dijelove slika, ali bez sjene.

Za IE6 i IE7 uključujemo dodatne stilove uvjetni komentari, ali malo mijenjamo CSS kod i razlikujemo ga od onog koji se koristi u načini zaokruživanja kutova:

1. Suština promjene je da uz pomoć izraza integriramo sve iste dvije oznake unutar poveznica, ali samo bez atributa koji sadrže stilove. Umjesto toga, oznakama dodajemo klase "left_bok" i "right_bok", uklanjamo stilove za njih i pišemo ispod. Ovi su stilovi gotovo potpuno isti kao u glavnom CSS kodu, ali ovdje sve slike idu kao pozadinske oznake.

Zaobljeni kutovi veze (druga opcija)

Pogledajmo još jedan primjer zaokruživanja kutova poveznica, ali pomoću četiri odvojene slike kutova.

Opis primjera

Ni ovdje nećemo govoriti o samom zaokruživanju, samo ćemo naznačiti razlikovne točke.

1. Koristeći CSS svojstvo :inline-block, poveznice pretvaramo u umetnute blokove. Zatim uklonite podcrtavanje s njih, dodajte okvir i poravnajte tekst u sredinu.
2. Budući da su pseudoelementi koje koristimo za zaokruživanje kutova unutar poveznica, njihov sadržaj je također poravnat po sredini, pa stoga kutovi slike dodani CSS svojstvom nisu smješteni u kutove, kao što želimo. Da bismo to popravili, dodajemo im :left, vraćajući vrijednost koju preglednici koriste prema zadanim postavkama.

Podcrtano za elemente bloka poput oznake

može se izvesti na dva načina. Na primjer, postavite liniju ispod teksta na cijelu širinu bloka, bez obzira na količinu teksta. I također podvlačenje raditi samo na tekstu. Pogledajmo obje opcije u nastavku.

Crta ispod teksta za punu širinu bloka

Da biste stvorili liniju ispod teksta, elementu dodajte svojstvo stila border-bottom, čija je vrijednost istodobno širina linije, stil i boja (primjer 1).

Primjer 1: Linija pune širine

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ogledni tekst

Udaljenost od retka do teksta može se prilagoditi svojstvom padding-bottom dodavanjem u selektor H1. Rezultat ovog primjera prikazan je na sl. jedan.

Podvlačenje teksta

Da biste podcrtali samo tekst, trebate upotrijebiti svojstvo text-decoration s vrijednošću underline, ponovno ga dodajući selektoru H1 (primjer 2).

Primjer 2: širina retka u tekst

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ogledni tekst

Crni naslov privlači pozornost iako je crn umjesto bijelog.

Rezultat ovog primjera prikazan je na sl. 2.

U slučaju korištenja svojstva text-decoration, linija je čvrsto povezana s tekstom, tako da se njezin položaj i stil ne mogu odrediti.

Zasigurno ste primijetili animirani podcrtani link na mnogim resursima i željeli ste znati kako ga implementirati na svoju stranicu. Učiniti lijepim css podcrtano elemenata, ne treba nam veliko znanje, niti povezivanje dodatnih skripti, sve što nam treba je standardni HTML i CSS.

Podcrtane varijacije

Podcrtavanje poveznica ili bilo kojih drugih elemenata, možete smisliti bilo što. Podcrtano može lebdjeti od dna, kliziti ulijevo ili udesno i tako dalje. Pogledat ćemo zanimljiviji primjer gdje će podcrtano ići od središta prema rubovima, kao što je prikazano u demonstraciji ispod.

demonstracija podcrtavanja

HTML

Prvo, stvorimo neki element, na primjer, uzmimo oznaku A. Njegov atribut nam nije važan, jer će većina posla biti posvećena stilovima.

css

Implementacija će se sastojati od dvije linije koje će se kretati od sredine dna elementa do njegovih rubova.

Svojstvo text-decoration je odgovorno za podcrtavanje, ali nema smisla koristiti ga ovdje, jer u ovom slučaju nije sasvim relevantno za provedbu naših planova za animaciju. Ne zaboravimo da se svakom elementu može dodijeliti pseudo-element::before ili::after . Stoga ćemo im postaviti sva svojstva i odmah postaviti sljedeće parametre našoj vezi:

A(prikaz: umetnuti blok; položaj: relativan; tekstualni ukras: ništa; )

Dakle, postavljamo protok bloka i pozicioniranje u odnosu na izvorno mjesto. Sve je to učinjeno kako podcrtano ne bi ispuzalo iz elementa kada dodijelimo apsolutno pozicioniranje pseudoelementu::before. Nakon toga moramo odrediti njegovu točnu lokaciju i veličinu. I ovdje odmah stvaramo prvu polovicu podvučene crte.

A::before( prikaz: blok; pozicija: apsolutna; sadržaj: ""; visina: 2 px; širina: 0; boja pozadine: crvena; prijelaz: širina .5s lagani ulazak van, lijevo .5s lagani ulazak- van; lijevo: 50%; dolje: 0; )

Oni. visina podcrtane linije bit će 2px, duljina 0, crvena boja, a svojstvo prijelaza odgovorno je za animaciju. I naravno, uvlačenje s lijeve strane je 50%, tj. središnja točka. Gotovo iste radnje izvodimo s pseudoelementom ::after:

A::after( prikaz: blok; položaj: apsolutni; sadržaj: ""; visina: 2 px; širina: 0; boja pozadine: crvena; prijelaz: širina .5s lagano uvlačenje; lijevo: 50%; dno: 0;)

A:hover::before(širina: 50%; lijevo: 0; ) a:hover::after(širina: 50%; )

Treba napomenuti da je ovo samo jedan od načina realizacije ove ideje. Možete učiniti isto sa samo jednim pseudoelementom::before. Pretplatite se na članke i predložite teme za članke.

Pozdrav svima koji su gladni novih znanja i čitaju moj blog. Današnju publikaciju želim posvetiti vrlo jednostavnoj temi, koja ipak redovito postavlja brojna pitanja početnika: "Kako ukloniti ili dodati podvlaku u html."

Kao što već znate, samu podvlaku možete postaviti ručno, ali poveznice ih postavljaju prema zadanim postavkama. Zato ću vas u ovom članku podsjetiti kako podcrtati naslove, reći vam kako postaviti donju liniju na cijelu širinu bloka, kao i kako se nositi sa standardnim oblikovanjem veze. Pa, počnimo!

Istaknimo ovo!

Postoji posebna oznaka parova za podvlačenje teksta: riječ.

Međutim, profesionalni dizajneri izgleda koriste mehanizme stilskih kaskadnih stolova, tj. css za stiliziranje izgleda cijelog . I to je ispravno. Ovaj pristup odvaja označavanje od stiliziranja, čineći oblikovanje fleksibilnim i praktičnim. Osim toga, lakše je uhvatiti bugove (greške) u kodu.

Sljedeća svojstva se uglavnom koriste za podcrtavanje sadržaja teksta: granica i tekst-ukras.

Element granica odgovoran je za postavljanje okvira oko navedenog bloka, a također vam omogućuje da postavite debljinu linije i stil.

Ova je jezična jedinica prilično fleksibilna jer možete odrediti oblikovanje za pojedinačne strane obruba. To se postiže pomoću svojstava:

1. granica-pravo(desno)
2. granica-vrh(iznad)
3. granica-lijevo(lijevo)
4. granica-dno(dno)

Također uz pomoć granica možete postaviti:

• točka ( točkasta)
• isprekidano ( isprekidano)
• linearno ( čvrsta)
• dvostruko ( dvostruko)
• volumetrijski blokovi za uokvirivanje ( utor,umetak,greben ipočetak)

Ne zaboravite da uvijek možete ponoviti postavke stila nadređenog bloka koristeći ključnu riječ naslijediti.

Raspravljajmo sada o svojstvu jezika css tekst-ukras. Ovaj element je odgovoran za dodatno ukrašavanje teksta.

To uključuje:

1. treperi ( treptati)
2. linija iznad teksta ( nadcrtati)
3. precrtani objekti ( linija kroz)
4. nasljedstvo stila ( naslijediti)
5. poništi sve dodatne dekoracije ( nikakav)
6. podcrtavanje koje trebamo ( naglasiti)

Vrijeme je za vježbu

Sada želim da učvrstite stečeno znanje i praktično isprobate primjer koda koji sam dao. Za one koji su upoznati s ovom temom također će biti od koristi. Kao što svi znamo: "Ponavljanje je majka učenja!".

Ovaj kod implementira modificirani stil veza, a također postavlja podcrtavanje naslova na punu širinu bloka.

Naslovi tekst podcrtanim naslovom

Na ovome završavam post tutorijala. Pokriva sve potrebne alate za podcrtavanje tekstualnog sadržaja, znajući koje možete kreirati vlastite mogućnosti dizajna za web stranice.

Ne zaboravite se pridružiti redovima mojih pretplatnika, jer pred vama je još mnogo zanimljivih i korisnih tema, a također podijelite vezu na blog sa svojim prijateljima. Doviđenja!

S poštovanjem, Roman Chueshov