Tõenäoliselt olete märganud paljude ressursside linkide animeeritud allajoonimist ja tahtnud teada, kuidas seda oma veebisaidil rakendada. Et teha midagi ilusat css allajoon elemendid, mida me ei vaja suuri teadmisi või täiendavate skriptide ühendamist, on vaja ainult standardne HTML ja CSS.

Allajoonimise variatsioonid

Linkide või muude elementide allajoonimisel saate välja mõelda kõike, mida soovite. Allajoon võib hõljuda alt üles, liikuda välja vasakule või paremale jne. Vaatame lähemalt huvitav näide, kus allakriipsutamine levib keskelt servadeni, nagu allolevas demos.

allkriipsu demonstratsioon

HTML

Kõigepealt loome mõne elemendi, näiteks võtame A-märgise. Selle atribuut pole meie jaoks oluline, sest suurem osa tööst on pühendatud stiilidele.

CSS

Teostus koosneb kahest reast, mis ulatuvad elemendi põhja keskelt selle servadeni.

Tekstidekoratsiooni atribuut vastutab allakriipsutamise eest, kuid siin pole seda mõtet kasutada, sest meie animatsiooniplaanide elluviimine pole antud juhul täiesti asjakohane. Ärgem unustagem, et igale elemendile saab määrata pseudoelemendi::enne või::after . Seetõttu määrame neile kõik atribuudid ja määrame oma lingile kohe järgmised parameetrid:

A(ekraan: tekstisisene plokk; asukoht: suhteline; tekstidekoratsioon: puudub; )

Seega määrasime plokkide sujuvamaks muutmise ja positsioneerimise algse asukoha suhtes. Seda kõike tehakse selleks, et pseudoelemendi ::enne määramisel allakriipsutus ei ulatuks elemendist kaugemale absoluutne positsioneerimine. Pärast seda peame määrama selle selge asukoha ja suuruse. Ja siin loome kohe allkriipsu esimese poole.

A::before( kuva: plokk; asend: absoluutne; sisu: ""; kõrgus: 2 pikslit; laius: 0; taustavärv: punane; üleminek: laius 0,5 s kerg-sisse-välja, vasak 0,5 s hõlbus väljas: 50%;

Need. Allakriipsu kõrgus on 2 pikslit, pikkus 0, punane ja animatsiooni eest vastutab üleminekuomadus. Ja loomulikult on vasakpoolne taane 50%, st. keskpunkt. Peaaegu samu toiminguid teeme pseudoelemendiga ::after:

A::after( ekraan: plokk; asend: absoluutne; sisu: ""; kõrgus: 2 pikslit; laius: 0; taustavärv: punane; üleminek: laius 0,5 s hõlbus sisse-välja; vasak: 50%; alumine: 0;)

A:hover::fore(laius: 50%; vasak: 0; ) a:hover::after(laius: 50%; )

Väärib märkimist, et see on vaid üks võimalus selle idee elluviimiseks. Sama saate teha ainult ühe pseudoelemendiga::befor . Tellige materjale ja soovitage artiklite teemasid.

Sellelt lehelt leiate näiteid selle kohta, kuidas HTML-linke millal muuta CSS abi, mis võimaldab teil panna need blokeerima linke, ikoonilinke, ilma allajoonimiseta, kasutades ümarad nurgad, muutke nende vahelist kaugust ja palju muud. Edaspidi saate nende näidete põhjal luua erinevaid valikuid saidi navigeerimismenüüd.

Enne näidete uurimise alustamist tahan teha väikese täpsustuse. Kõigis näidetes kasutatakse suurema selguse huvides CSS-i pseudoklassi, mida kasutatakse linkide stiilide muutmiseks, kui hiirekursor liigub nende kohal. Ma pean seda ütlema sarnane praktika on tavaline nähtus ja seda kasutatakse ühel või teisel määral peaaegu kõigil Interneti-saitidel.

Selles näites eemaldame linkidelt allakriipsu ja lisame või eemaldame need hiirekursoriga üleviimisel.

HTML-i ja CSS-i näide: kuidas linkidelt allajooni eemaldada ja lisada

Näite kirjeldus

1. Vaikimisi on kõik populaarsed brauserid lisage linkidele allakriipsutus, mis on reguleeritav CSS-i atribuut. See tähendab, et vaikimisi on selle atribuudi väärtus linkide puhul allajoonitud . Neid teadmisi kasutades muudame linkide allajoonimist nende erinevates olekutes.

Algselt on linkide allakriipsutus pidev õhuke joon, mis on tekstile peaaegu tihedalt surutud. Ja enamikul juhtudel on see valik täiesti piisav. Kuid mõnikord nõuab kujundus linkide allajoonimist, mitte kindlalt, nt. punktiirjoon, või nii, et kaugus allajoonest linkideni on suurem kui standardne või on allajoon ise julgem. Ja mõnikord peate tegema mingi eksootilise allakriipsu, näiteks lainelise või mitmevärvilise joonega. Kõiki neid valikuid käsitletakse selles näites.

HTML-i ja CSS-i näide: punktiirlingi allajoonimine

Näite kirjeldus

1. Esiteks eemaldame kõigilt linkidelt standardse allajoonimise, kuna kasutame mittestandardsed meetodid. Seejärel lisage esimene link madalam limiit raami kasutades CSS-i atribuuti ja muuta see kriipsuks. See on meie alljoon. Allakriipsu eemaldamiseks, kui hõljutate kursorit lingi kohal, kasutame pseudoklassi ja muudame raami tausta lehe taustaga samaks, st peidame selle lihtsalt ära. Teoreetiliselt oleks parem teha raami taust läbipaistvaks, kuid IE6 saab sellest tähendusest valesti aru.
2. Teise lingiga teeme sama, mis esimesega, kuid tõmbame lihtsalt pideva joone. Teksti ja allakriipsu kauguse suurendamiseks anname lingile väikese alumise veerise, kasutades atribuuti CSS.
3. Meie kolmandal lingil on mitmevärviline allajoon, seega lisame selle kasutades taustapilt. Selleks kasutame väikest pilti, mille ühendame CSS-i kaudu. Paigutage taust lingi allossa (0 100%) ja lubage seda dubleerida ainult horisontaalselt (kordus-x). Allakriips on valmis, kuid see on tekstile liiga lähedal, et seda parandada, lisame allolevale lingile väikese taande. See on kõik.
4. Vanades IE6-s ja IE7-s võib olla probleeme esimese ja teise lingi allkriipsu kuvamisega. Selle parandamiseks lisa suum :1 omadus, mis sisaldab nn paigutus. See atribuut on kehtetu ja ainult need brauserid saavad sellest aru, seega on parem see lubada tingimuslikud kommentaarid.

Väga sageli tuleb menüü loomiseks teha mitte ainult tekstilinke, vaid plokkide linke, mille aktiivseks alaks on nii tekst ise kui ka teatud ala selle ümber.

Näite kirjeldus

1. Plokilinkide loomiseks kasutame CSS-i atribuuti :block, mis muudab need linkideks ploki elemendid, luues reavahetuse enne ja pärast iseennast. Kui reavahetusi pole vaja, saate väärtuse asendada inline-block .
2. Kuna meie lingid on nüüd plokid, saame vajadusel muuta nende laiust (CSS) või kõrgust (CSS).
3. Selles näites ei määra me linkide kõrgust üldse, vaid anname neile lihtsalt sisemise polsterduse (CSS), mis plokke laiendab.

Näite kirjeldus

1. Kõik on väga lihtne – CSS-i atribuuti kasutades lisame kursori all olevatele linkidele soovitud raami. Pange aga tähele, et tavalinkidele lisame täpselt sama raami, kuid muudame selle lehe taustaga sama värvi. See tähendab, et me lihtsalt peidame raami esialgu. Seda tehakse selleks, et hiirekursorit hõljutades ei hakkaks lingid raami joonise tõttu “hüppama”.

Selle asemel, et äärise värv sobiks lehe taustaga, võiks selle panna läbipaistvaks ja teha läbipaistvaks, aga nagu öeldud, siis IE6 ei käsitle seda õigesti.

HTML ja CSS näide: 3D linkide loomine

Näite kirjeldus

1. CSS-i atribuudi abil lisame linkidele raamid, mille abil määrame nende värvi. Samal ajal tähistame vasaku ja ülemise äärise jaoks heledat tooni ning alumisel ja paremal tumedat tooni. Just tänu sellisele värvide jaotusele saame lingid, mis näevad välja nagu kolmemõõtmelised nupud.
2. Et tunduks, et nuppe vajutatakse hiirekursori hõljutamisel, pöörame linkide ääriste värvid pseudoklassiga ümber. Sest lisaefekt klõpsake, määrake suhteline positsioneerimine (CSS :suhteline) ja tehke ühe piksli võrra üles nihe (CSS :-1px).
3. Noh, et kõik oleks täiesti ilus, seadsime kursori all olevate linkide teksti ja taustavärvi tavapärastest pisut tumedamaks. Valmis.

Selles näites loome lingid ikoonidega, mis ei sisalda mitte ainult nende ikoonide pilte, vaid ka nende all olevat teksti. Edaspidi saab neid aga lihtsalt muuta ja jätta näiteks ainult ikoonid.

Enne töö alustamist valmistame ette mitu ikoonide pilti kahes komplektis - jaoks regulaarsed lingid ja lingid hiirekursori all. Teine komplekt peaks väliselt erinema esimesest, meie puhul väljendub see värvipaletis.

Näite kirjeldus

1. Koodi lühendamiseks kasutame linkides kahte klassi - "lingid" (ühiste omadustega) ja "pilt", "heli", "video" (iga lingi jaoks isiklik). Seda punkti kirjeldatakse üksikasjalikult artiklis klassid CSS-i viide.
2. Meie ikoonid on suurusega 50x50 pikslit ja asuvad linkidel taustana (CSS), mille tsentreerime ülaossa (50% 0) ja takistame selle paljunemist (ei korda).
3. Lisame linkidele polsterduse (CSS), et linkides olev tekst ei mahuks vastu servi. Samal ajal muudame ülemise taande võrdseks ikoonide kõrgusega, et tekst nendega ei kattuks, sest meie ikoonid on taustaks.
4. Kui linkides on väga vähe teksti, lõigatakse ikoonipildid külgedelt ära. Et seda ei juhtuks, seadsime linkidele minimaalse laiuse (CSS), et see oleks vähemalt võrdne ikoonide laiusega. Meie puhul peame saama minimaalseks laiuseks 50 pikslit, kuid seadsime selle 40 pikslile, kuna küljepolsterduse tõttu lisatakse veel 10 pikslit.
5. Minimaalse laiuse toimimiseks teisendame lingid sisesteks plokkideks (CSS: inline-block).

IE6 peab veidi "ravima":

1. IE6 ei mõista minimaalse laiuse atribuuti, kuid tõlgendab CSS-i atribuuti minimaalse laiuseks. Seetõttu kasutame selle jaoks lihtsat häkkima mis selle probleemi lahendab.

Selles näites ümardame linkide nurgad, kasutades ühte meetoditest nurkade ümardamine, mida on kirjeldatud järgmises alajaotuses. Me ei kaalu CSS 3 kasutamist, kuna seal on kõik väga lihtne, kuid parem oleks ümardada piltide abil.

Selleks lõikame kõigepealt välja mitu tühja pilti kahes komplektis - tavaliste linkide ja kursori all olevate linkide jaoks. Meie jaoks erineb see piltidel varjude olemasolu/puudumise poolest.

Näite kirjeldus

Me ei peatu vajadusel ümardamistehnoloogial, selle kohta saate lugeda saidi vastavast jaotisest.

1. Kasutades CSS-i atribuuti :inline-block, teeme linkide tekstisisesed plokid. Eelkõige on see vajalik selleks, et saaksime anda linkidele täpse kõrguse, mis vastab piltide kõrgusele.
2. Eemaldage allajoon ja tsentreerige tekst (CSS:center). Üldiselt ei ole meie puhul vaja teksti tsentreerida, kuna lingid kohanduvad neis oleva teksti suurusega ja seda pole lihtsalt kuhugi joondada. Aga kui teil on vaja linkide laiust suurendada (näiteks kuni 150 pikslit), siis tuleb see joondus kasuks.
3. Hiirekursori all olevate linkide välimuse muutmiseks lisame stiilidele täiendavad valijad CSS-i pseudoklassiga, milles märgime oma piltide osad, kuid ilma varjuta.

IE6 ja IE7 jaoks ühendame täiendavad stiilid kasutades tingimuslikud kommentaarid, kuid muudame veidi CSS-koodi ennast ja muudame selle kasutatavast erinevaks nurkade ümardamise viisid:

1. Muudatuse olemus seisneb selles, et avaldise abil integreerime linkide sisse samad kaks silti, kuid ainult ilma stiile sisaldavate atribuutideta. Selle asemel lisame siltidele klassid “left_bok” ja “right_bok” ning lisame neile stiilid ja kirjutame need alla. Need stiilid on peaaegu täpselt samad, mis CSS-i põhikoodis, kuid siin kasutatakse siltide taustana kõiki pilte.

Linkide ümarad nurgad (teine ​​võimalus)

Vaatame veel ühte näidet linkide nurkade ümardamisest, kuid kasutades nelja eraldi nurgakujutist.

Näite kirjeldus

Ka siin ei räägi me ümardamisest endast, vaid toome välja ainult iseloomulikud punktid.

1. Kasutades CSS-i atribuuti :inline-blok, teisendame lingid tekstisisteks plokkideks. Seejärel eemaldame neilt allajoone, lisame raami ja joondame teksti keskele.
2. Kuna pseudoelemendid, millega nurki ümardame, asuvad linkide sees, on ka nende sisu tsentreeritud ja seetõttu ei paigutata CSS-i atribuudiga lisatud pildinurgad nurkadesse nii, nagu vajame. Selle parandamiseks lisame sellele :left, tagastades väärtuse, mida brauserid vaikimisi kasutavad.

Tervitused kõigile, kes janunevad uute teadmiste järele ja loevad minu blogi. Väljaanne täna Tahan pühendada väga lihtsale teemale, mis siiski tekitab algajatel regulaarselt mitmeid küsimusi: "Kuidas eemaldada või lisada html-is allkriipsu."

Nagu te juba teate, saab alakriipsu ise määrata käsitsi, kuid linkide puhul on need vaikimisi määratud. Seetõttu tuletan selles artiklis teile meelde, kuidas määrata päistele allakriipsutamist, kuidas seada alumine rida kogu ploki laiusele ja kuidas käituda standardvormingus lingid. Noh, alustame!

Rõhutame seda!

Seal on eriline seotud silt teksti allajoonimiseks: sõna.

Professionaalsed küljendajad kasutavad aga stiilikaskaadlaudade mehhanisme, st. css stiiliks välimus Kokku . Ja see on õige. See lähenemisviis eraldab märgistuse stiilist ning muudab vormindamise paindlikuks ja mugavaks. Lisaks on koodis lihtsam vigu (vigu) tabada.

Järgmisi omadusi kasutatakse peamiselt teksti sisu rõhutamiseks: piir Ja tekst-kaunistus.

Element piir vastutab määratud ploki ümber raami seadistamise eest ning võimaldab teil määrata ka joone paksuse ja selle stiili.

See keeleüksus on üsna paindlik, kuna saate määrata äärise üksikute külgede vormingu. See saavutatakse järgmiste omadustega:

1. piir-õige(paremal)
2. piir-üleval(ülal)
3. piir-vasakule(vasakul)
4. piir-põhja(all)

• punkt ( täpiline)
• punktiir ( katkendlik)
• lineaarne ( tahke)
• kahekordne ( kahekordne)
• plokkide mahuline raamimine ( soon,sisendharja jaalgusest peale)

Ärge unustage, et saate alati korrata vanemploki stiilisätteid kasutades märksõna pärida.

Nüüd arutame kinnisvara üle css keel tekst-kaunistus. See üksus vastutab täiendavate tekstidekoratsioonide eest.

Need sisaldavad:

1. vilgub ( vilkuma)
2. rida teksti kohal ( ülejoon)
3. läbikriipsutatud objektid ( line-through)
4. stiili pärand ( pärida)
5. kõigi täiendavate dekoratsioonide tühistamine ( mitte ühtegi)
6. allakriipsutus, mida me vajame ( joon alla)

On aeg harjutada

Nüüd tahan, et te omandatud teadmisi kinnistaksite ja minu toodud näidet praktiliselt prooviks programmi kood. Selle teemaga tuttavatele on see samuti kasulik. Nagu me kõik teame: "Kordamine on õppimise ema!"

See kood rakendab linkide muudetud stiliseerimist ja määrab ka pealkirja allakriipsu ploki täislaiusele.

Pealkirjastame teksti allajoonitud pealkirjaga

Sellega lõpetan selle õppeväljaande. See hõlmab kõike vajalikud tööriistad tekstisisu rõhutamiseks, mida teades saate luua veebisaidi lehtede jaoks oma kujundusvalikud.

Ärge unustage liituda minu tellijate ridadega, sest seal on veel palju huvitavaid ja kasulikud teemad ja jagage blogi linki ka oma sõpradega. Headaega!

Parimate soovidega, Roman Chueshov

Loe: 375 korda

Autorilt: Linkide allajoonimiste kujundamine on üsna keeruline ja ma unustan alati, milline meetod on millises olukorras parim. Õnneks aitab John Jameson meil sellest oma artiklis kiiresti aru saada.

Allajoonimise stiilimiseks on palju viise. Võib-olla mäletate artiklit "Lingi allajoonimiste loomine keskmisel kujul". Medium ei püüdnud teha midagi ebatavalist, nad tahtsid lihtsalt luua teksti atraktiivseid allajooni.

Õhukesed mustad allakriipsud koos tühikutega tähtede ümber koos alumise tähelepanulaiendiga – Marcine Witchery töö artiklist Lingi allajoonimiste loomine keskmisel.

Hea standardne allakriips, millel ka on hea suurus ja jätab väiksemad tähed vahele. Palju parem kui enamiku brauserite vaikeseade. Nagu selgub, seisis Medium oma teel silmitsi paljude väljakutsetega. Ja isegi kaks aastat hiljem tekitab hea allajoonitud stiil endiselt palju probleeme.

Eesmärgid

Miks mitte kasutada lihtsalt teksti kaunistust: joon alla? Kui me räägime ideaalsest stsenaariumist, peaksid allkriipsud:

asuma baasjoonest allpool;

jäta vahele väikesed tähed;

muuta värvi, paksust ja stiile;

minema uus rida;

töötada mis tahes taustaga.

Ma arvan, et meil on täiesti võimalik nõuda kõiki neid asju allkriipsudest, kuid minu teada ei ole CSS-is kõigi nende asjade tegemiseks intuitiivset viisi.

Lähenemisviisid

Millised meetodid on meie käsutuses teksti allajoonimiseks? Mulle meenus järgmine:

tekst-kaunistus;

taustapilt;

SVG filtrid;

Underline.js(canvas);

tekst-kaunistus-*

Vaatame läbi kogu loendi ja kaalume iga lähenemisviisi kõiki plusse ja miinuseid.

tekstidekoratsiooni omadus

tekstidekoratsiooni omadus- lihtsaim viis teksti allajoonimiseks. Peate taotlema ainult ühte atribuuti. Väikesel tekstil näeb selline rida hea välja, kuid kui suurendate fondi suurust, näeb see välja ebamugav.

Kõige suur probleem tekstidekoratsiooni omadusega – pole kohandamist. Rida kasutab selle teksti värvi ja fondi suurust, millele see rakendatakse, ning stiilide muutmiseks pole brauseritevahelist võimalust. Sellest kinnisvarast räägime lähemalt veidi hiljem.

plussid

lihtne kasutada;

asub baasjoonest allpool;

jätab Safaris ja iOS-is vaikimisi vahele laskujad;

hüppab uuele reale;

töötab mis tahes taustaga.

Miinused

ei jäta teistes brauserites vahele tähtede alanejaid;

Värvi, paksust ja stiile ei saa muuta.

piiri-põhja vara

Piiri alumine omadus on kiiruse ja kohandamise hea tasakaal. See lähenemisviis kasutab tõestatud CSS-i raamid, mis tähendab, et saate hõlpsalt värve, paksuseid ja stiile muuta. Selline näeb välja äärise alumine atribuut tekstisisesetel elementidel:

Suurim miinus on see, kui kaugel on allajoon tekstist. Allakriips asub tähtede allakäikude all. Selle probleemi saab lahendada, kui teete seda inline-bloki element ja vähendage joone kõrgust, kuid siis kaob võimalus hüpata uutele ridadele. Hea üksikute ridade jaoks, kuid mitte rohkem.

Võite kasutada ka tekstivarju, et peita joone osad alumise tähelepanulaiendi ümber. Sel juhul peate jäljendama taustavärvi, mis tähendab, et meetod töötab ainult ühtlasel taustal. Gradiendid ja pildid ei tööta.

Peal Sel hetkel Allajoonimiseks on 4 omadust. Palju parem kui lihtsalt tekstikaunistus.

plussid

saate kasutada ülemineku omadust ja animeerida värvi ja paksust;

hüppab vaikimisi uutele ridadele, kui element ei ole inline-block;

Miinused

liin asub väga kaugel ja seda on raske liigutada;

tuleb kasutada liiga palju tarbetuid omadusi, et allajoonistus hea välja näeks;

Kehv teksti esiletõstmine tekstivarju kasutamisel.

kast-vari omadus

Atribuut box-shadow tõmbab kahe abil allajooni sisemised varjud: üks loob ristküliku ja teine ​​peidab selle. See tähendab, et korralik toimimine meetod nõuab ühtlast tausta.

Sama tekstivarju trikki saab kasutada ka tähtede alumiste tähelepanulaiendite vahelejätmise simuleerimiseks. Kui joone värv erineb tekstist või on piisavalt õhuke, siis ei tohiks probleeme tekkida, nagu tekstidekoratsiooni puhul.

plussid

saab paigutada baasjoonest allapoole;

saate tähelepanulaiendid vahele jätta, kasutades tekstivarju;

saate muuta värvi ja paksust;

hüppab uutele ridadele.

Miinused

stiile ei saa muuta;

Ei tööta kõigi taustadega.

taustapildi omadus

taustapildi omadus lahendab meie probleemid kõige paremini ja sellel on väga vähe puudusi. Idee seisneb selles, et loote pildi lineaarse gradiendi ja taustapositsiooni abil, mis kordub horisontaalteljel piki tekstiridu. Element peab olema display: inline;.

Allolev demo ei kasuta lineaarset gradienti. Laheda efekti loomiseks võite kasutada oma pilti.

plussid

saab paigutada baasjoonest allapoole;

tekstivarju kasutades saate alt viiktekste vahele jätta;

saate muuta värvi, paksust (isegi poole piksli võrra) ja stiile;

töötab kohandatud piltidega;

hüppab uutele ridadele;

töötab mis tahes taustaga, kui te ei kasuta tekstivarju.

Miinused

Pildi suurus võib olenevalt erineda erinevad resolutsioonid, brauserid ja suumitasemed.

SVG filtrid

See on meetod, millega ma mängisin. Saate luua tekstisisese SVG-filtrielemendi, mis tõmbab joone, ja laiendada teksti, et varjata rea ​​osi, mis peaksid olema läbipaistvad. Filtrile saab anda ID ja viidata CSS-is, kasutades filtrit: url(‘#svg-underline’).

Selle juures on suurepärane see, et filter lisab läbipaistvust ilma tekstivarjule tuginemata. See tähendab, et saate täheõhupalle vahele jätta mis tahes taustal, sealhulgas gradientidel ja piltidel! Allolev näide töötab ainult ühe tekstireaga, seega olge ettevaatlik.

Ja Chrome'is ja Firefoxis näeb see välja järgmine:

IE, Edge ja Safari toega on probleeme. CSS-is on SVG-filtrite tuge raske testida. Filtris saate kasutada reeglit @supports, kuid see kontrollib ainult seda, kas link ise töötab, mitte aga seda, kas filter on rakendatud või mitte. Minu meetod on brauserites üsna karm, seega olge topelt ettevaatlik.

plussid

asub baasjoonest allpool;

jätab alt juhid vahele;

Saate muuta värvi, paksust ja stiile;

töötab mis tahes taustal.

Miinused

ei hüppa uutele ridadele;

ei tööta IE-s, Edge'is ja Safaris, kuid saate varuvariandiks määrata tekstikaunistuse. Allakriipsud näevad Safaris iseenesest suurepärased välja.

Underline.js (lõuend)

Underline.js on hämmastav raamatukogu. Mulle avaldab muljet see, mida Wenting Zhang suutis JS-iga teha, ja tähelepanu detailidele. Kui te pole Underline.js tehnilist demo veel näinud, peatuge hetkeks ja vaadake. Internetis on suurepärane üheksa-minutiline kõne tööpõhimõtete kohta, ma räägin selle teile nüüd kiiresti ümber. Allajoonimised on joonistatud lõuendi abil. Absoluutselt uus lähenemine, mis töötab üllatavalt hästi.

Vaatamata atraktiivsele nimele on see vaid tehniline demo. See tähendab, et te ei saa raamatukogu kohe projekti lisada ilma terve hulga muudatusteta.

Seda raamatukogu tasub mainida ainult kontseptsiooni tõestuseks. Lõuendil on potentsiaal luua kauneid interaktiivseid esiletõstmisi, kuid selle nõuetekohaseks toimimiseks peate kirjutama täiendava JS-koodi.

Omadused tekst-dekoratsioon-*

Mäletate, kui ütlesin, et räägime millestki üksikasjalikumalt veidi hiljem? Nüüd teeme seda. Tekstidekoratsiooni omadus toimib iseseisvalt hästi, kuid lisaväärtuse saamiseks võime lisada paar eksperimentaalset omadust. parim vaade:

tekst-kaunistus-värv

tekst-kaunistus-vahelejätmine

tekst-kaunistus-stiil

Ärge rõõmustage enne tähtaega, teate brauseri toest.

tekst-kaunistus-värvi omadus

Atribuut text-decoration-color võimaldab muuta allajoonimise värvi teksti värvist eraldi. Kinnistul on isegi hea brauseri tugi. See töötab Firefoxis ja eesliide Safaris. Sellel on negatiivne külg – kui te viiktekstide ümber olevat joont ei tühjenda, jääb see Safaris teksti peale. Firefox:

text-decoration-skip omadus

Atribuut text-decoration-skip vastutab allajoonitud tekstis jaluse õhupallide vahelejätmise eest.

Vara on ebastandardne ja töötab praegu ainult Safaris. Teistes brauserites töötamiseks peate kasutama eesliidet –webkit-. Safaris on see atribuut vaikimisi lubatud, mistõttu jäetakse allkriipsud jalused vahele isegi saitidel, kus seda atribuuti pole määratud.

Kui kasutate Normaliseerimist, peate seda teadma uusimad versioonid keelata vara jaoks normaalne töö kõigis brauserites. Kui soovite need peaaegu maagilised alakriipsud tagasi, peate need lubama see vara.

tekstidekoratsiooni stiilis omadus

Tekstidekoratsiooni stiilis atribuut pakub sama allajoonimiste komplekti nagu piiri stiilis kinnistu, vaid ka lisab uut tüüpi- laineline. Võimalikud väärtused:

Praegu töötab tekstidekoratsiooni stiili atribuut ainult Firefoxis, allpool on ekraanipilt:

Ühevärviliste allajoonide komplekt Kas näete sarnane välja?

Mis viga?

Tekst-dekoratsiooni* atribuudid on intuitiivsemad kui muud alljoonte kujundamise atribuudid. Kui aga vaatate varem esitatud nõudeid teistmoodi, märkate, et nende omaduste abil ei saa te paksust ja asukohta muuta. Pärast väikest uurimist leidsin need kaks omadust:

tekst-allakriipsutamine-laius

tekst-allakriipsutamine-positsioon

Tundub, et need kinnistud visati välja varajane versioon CSS nende vastu huvi puudumise tõttu. Neid ei kasutatud kunagi. Hei, see pole minu süü.

järeldused

Mis on siis parim viis teksti allajoonimiseks? Kõik sõltub erinevatest teguritest.

Väikese teksti puhul soovitan kasutada tekstidekoratsiooni ja eksperimentaalset teksti kaunistamise vahelejätmise omadust, lootes, et see toimib. Enamikus brauserites näeb see välja nii-nii, kuid see on alati nii olnud ja inimesed ei pööranud sellele tähelepanu. Kui olete piisavalt kannatlik, on tõenäoline, et varsti näevad kõik teie allajooned head välja, ilma et peaksite midagi muutma.

Kehateksti jaoks kasutage taustapilti. Meetod töötab, näeb ilus välja ja selle jaoks on Sassi mixinid. Kui allakriipsutus on õhuke või teksti värv erineb, võite tekstivarju meetodi tõenäoliselt vahele jätta. Ühe rea teksti jaoks kasutage border-bottom ja muid atribuute.

Ja et kirjajuhid vahele jätta gradiendi taustad või pilte, proovige kasutada SVG-filtrit. Või lihtsalt ärge segage sellist tausta allajoonimisega. Tulevikus, kui brauseri tugi paraneb, on võimalik kasutada atribuute text-decoration-*.