Linja e valëzuar Css. Nënvizoni lidhjet dhe tekstin përmes CSS, vetia e dekorimit të tekstit

Ne vazhdojmë të bëjmë truket në css të pastër. Sot do t'ju tregoj se si të bëni një të bukur duke përdorur css vijë ndarëse në formën e valës në faqen e internetit. Mund të përdoret, për shembull, për të ndarë vizualisht postimet e blogut ose blloqe të veçanta në shiritin anësor.

Një herë kam folur tashmë për. Por përdori etiketën hr dinosaur me disa rregulla të ndërlikuara stilimi për të luajtur me hijen.

Sot situata është krejtësisht ndryshe. Për të shfaqur një rresht në formën e një valë, do t'ju duhet të shtoni shumë më tepër truke në rregullat dhe të aplikoni jo vetëm css, por css3. Mirë se vini!

Për fillestarët, kodi i zakonshëm html. Ne do t'i vizatojmë linjat si div boshe me grupe të veçanta rregullash. Blloqet e zbrazëta janë, natyrisht, të këqija. Por ndonjëherë ju duhet ta duroni atë.

Këtu kemi treguar 4 lloje linjash. Dhe kështu do të duket një grup stilesh në css për ta:

valë (
vërshoj: i fshehur;
pozicioni: i afërm;
gjerësia: 630 px;
lartësia: 50 px;
}
.linjë (
pozicioni: absolut;
gjerësia: 630 px;
lartësia: 26 px;
}
.linja 1 (

}
.linja 2 (

}
.linjë (
madhësia e sfondit: 50px 50px;
}
Linja e vogël (
pozicioni: absolut;
gjerësia: 630 px;
lartësia: 5 px;
}
.Linja e vogel1 (
sfondi: gradient linear (45 gradë, transparent, transparent 49%, i zi 49%, transparent 51%);
}
.Linja e vogel2 (
sfondi: gradient linear (-45 gradë, transparent, transparent 49%, i zi 49%, transparent 51%);
}
Linja e vogël (
madhësia e sfondit: 10px 10px;
}
.rretho (
pozicioni: absolut;
gjerësia: 630 px;
lartësia: 20 px;
sfond: radial-gradient (16px, transparent, transparent 4px, i zi 4px, i zi 10px, transparent 11px);
madhësia e sfondit: 30px 40px;
}
.rreth 2 (
sipër: 20 px;
majtas: 15 px;

}
.elips (
pozicioni: absolut;
sfond: radial-gradient (elips, transparent, transparent 7px, i zi 7px, i zi 10px, transparent 11px);
madhësia e sfondit: 36px 40px;
gjerësia: 630 px;
lartësia: 20 px;
}
.elips2 (
sipër: 20 px;
majtas: 18 px;
pozicioni i sfondit: 0px -20px;
}

Këtu kemi përdorur truket si gradient linear dhe radial-gradient nga arsenali css3.
Ekziston një mundësi tjetër për të përdorur një vijë ndarëse në formën e një vale (më e ulëta në ilustrimin në fillim të postimit). Mund të përdoret në fund të një blloku, si dekorim fundor. Kodi është mjaft i thjeshtë. Së pari html:

Le të zbatojmë pseudoelementet: para dhe: pas në rregullat css. Ju mund të lexoni rreth tyre. Kështu do të duket kodi:

valë (
gjerësia: 630 px;
sfond: # 333;
lartësia: 30 px;
pozicioni: i afërm;
}
.vale :: perpara (
përmbajtja: "";
pozicioni: absolut;
majtas: 0;
fund: 0;
djathtas: 0;
sfond-përsërit: përsërit;
lartësia: 10 px;
madhësia e sfondit: 20px 20px;
imazh i sfondit:
gradient radial (rrethi në 10px -5px, transparent 12px, # 19d1ff 13px);
}
.vale :: pas (
përmbajtja: "";
pozicioni: absolut;
majtas: 0;
fund: 0;
djathtas: 0;
sfond-përsërit: përsërit;
lartësia: 15 px;
madhësia e sfondit: 40px 20px;
imazh i sfondit:
gradient radial (rrethi në 10px 15px, # 19d1ff 12px, transparent 13px);
}

Kjo eshte e gjitha! Shkoni për të!

Nga autori: Lidhja e stilimit nënvizon është një biznes i ndërlikuar dhe vazhdoj të harroj se cila metodë është më e mira për një situatë të caktuar. Për fat të mirë, John Jameson do të na ndihmojë ta kuptojmë shpejt këtë në artikullin e tij.

Ka shumë mënyra për të stiluar nënvizimet. Ju mund të mbani mend artikullin Krijoni nënvizime për lidhje të mesme. Medium nuk u përpoq të bënte diçka jashtë kutisë, ata thjesht donin të krijonin nënvizime tërheqëse në tekst.

Nënvizime të holla, të zeza me hapësira rreth shkronjave me drejtues të poshtëm është puna e Marcin Whitchery në Creating Medium link underlines.

Nënvizim i mirë standard që është gjithashtu i përmasave të mira dhe i anashkaluar çdo zbritës. Shumë më mirë se shumica e shfletuesve të paracaktuar. Siç rezulton, Medium u përball me shumë sfida gjatë rrugës. Dhe edhe dy vite më vonë, stilimi ende i mirë i nënvizimeve shkakton shumë probleme.

Golat

Pse të mos përdorni vetëm dekorimin e tekstit: nënvizoni? Nëse po flasim për një skenar ideal, nënvizat duhet të:

të jetë nën vijën bazë;

kapërceni shtrirjen e poshtme të shkronjave;

ndryshoni ngjyrën, trashësinë dhe stilet;

shkoni në një linjë të re;

punoni me çdo prejardhje.

Unë besoj se mund t'i kërkojmë të gjitha këto nga nënvizimet, megjithatë, me sa di unë, nuk ka asnjë mënyrë intuitive për të zgjidhur të gjitha këto detyra në CSS.

Qasjet

Pra, çfarë mënyrash kemi për të nënvizuar tekstin? Më kujtuan sa vijon:

tekst-dekorim;

sfond-imazh;

filtra SVG;

Nënvizoni.js (kanavacë);

tekst-dekorim- *

Le të kalojmë nëpër të gjithë listën dhe të shqyrtojmë të gjitha të mirat dhe të këqijat e secilës qasje.

Vetia e dekorimit të tekstit

Vetia e dekorimit të tekstit është mënyra më e thjeshtë për të nënvizuar tekstin. Duhet të aplikohet vetëm një pronë. Në tekst të vogël, një rresht i tillë do të duket mirë, por nëse rritni madhësinë e shkronjave, tashmë duket e vështirë.

Problemi më i madh me vetinë e dekorimit të tekstit është mungesa e personalizimit. Linja përdor ngjyrën dhe madhësinë e shkronjave të tekstit në të cilin është aplikuar dhe nuk ka asnjë mënyrë ndër-shfletuesi për të ndryshuar stilet. Për këtë pronë do të flasim më në detaje më vonë.

pro

i lehtë për t'u përdorur;

është nën vijën bazë;

kalon ascenders si parazgjedhje në Safari dhe iOS.

kërcen në një linjë të re;

punon me çdo prejardhje.

Minuset

nuk anashkalon zgjerimin e pjesëve të poshtme të shkronjave në shfletues të tjerë;

ngjyra, trashësia dhe stilet nuk mund të ndryshohen.

Prona e poshtme e kufirit

Vetia e poshtme e kufirit është një ekuilibër i mirë i shpejtësisë dhe personalizimit. Kjo qasje përdor kufijtë e provuar CSS, që do të thotë se mund të ndryshoni lehtësisht ngjyrën, peshën dhe stilet. Kjo është se si duket vetia e kufirit në fund në elementët inline:

Negativi më i madh është se sa larg është nënvizimi nga teksti. Nënvizimi ndodhet poshtë zbritësve të shkronjave. Ky problem mund të zgjidhet duke e bërë elementin inline-block dhe duke ulur lartësinë e linjës, por më pas humbet aftësia për të kaluar në linja të reja. E mirë për linja të vetme, por jo më shumë.

Përveç kësaj, mund të përdorni hijen e tekstit për të fshehur pjesë të rreshtit rreth drejtuesve të poshtëm. Në këtë rast, do t'ju duhet të simuloni ngjyrën e sfondit, që do të thotë se metoda funksionon vetëm në sfonde uniforme. Gradientët dhe imazhet nuk do të funksionojnë.

Aktualisht ekzistojnë 4 veti për stilimin e nënvizimit. Shumë më mirë sesa thjesht dekorim i tekstit.

pro

mund të përdorni veçorinë e tranzicionit dhe të animoni ngjyrën dhe trashësinë;

kalon në rreshtat e rinj si parazgjedhje nëse elementi nuk është bllok-inline;

Minuset

linja është shumë larg dhe e vështirë për t'u lëvizur;

duhet të përdoren shumë veti të panevojshme që nënvizimi të duket mirë;

përzgjedhje e dobët e tekstit kur përdoret text-hije.

Vetia e hijes së kutisë

Vetia box-shadow vizaton një nënvizim duke përdorur dy hije të brendshme: njëra krijon një drejtkëndësh dhe tjetra e fsheh atë. Kjo do të thotë që nevojitet një sfond uniform që metoda të funksionojë siç duhet.

I njëjti mashtrim tekst-hije mund të përdoret për të simuluar hapësirën e bardhë rreth drejtuesve të poshtëm të shkronjave. Nëse ngjyra e rreshtit është e ndryshme nga teksti, ose është mjaft e hollë, atëherë nuk duhet të ketë probleme, siç është rasti me dekorimin e tekstit.

pro

mund të pozicionohet nën vijën bazë;

ju mund të kaloni thirrjet duke përdorur text-shadow;

ju mund të ndryshoni ngjyrën dhe trashësinë;

kërcen në linja të reja.

Minuset

stilet nuk mund të ndryshohen;

nuk funksionon me të gjitha sfondet.

Vetia e imazhit të sfondit

Vetia e imazhit të sfondit është më e mira për qëllimet tona dhe ka shumë pak anë negative. Ideja është që të krijoni një imazh me gradient linear dhe pozicion sfondi që përsëritet në boshtin horizontal përgjatë vijave të tekstit. Elementi duhet të shfaqet: inline ;.

Demoja e mëposhtme nuk përdor gradient linear. Ju mund të përdorni imazhin tuaj për të krijuar një efekt të lezetshëm.

pro

mund të pozicionohet nën vijën bazë;

ju mund të kaloni liderët e poshtëm me tekst-hije;

ju mund të ndryshoni ngjyrën, trashësinë (madje edhe me gjysmë piksel) dhe stilet;

punon me imazhe të personalizuara;

kërcime në linja të reja;

funksionon me çdo sfond për sa kohë që nuk përdoret text-shadow.

Minuset

madhësia e imazhit mund të ndryshojë në mënyra të ndryshme për rezolucione të ndryshme, shfletues dhe nivele zmadhimi.

Filtrat SVG

Kam luajtur me këtë metodë. Mund të krijoni një element filtri SVG inline që tërheq vijën dhe të zgjeroni tekstin për të maskuar pjesët e linjës që duhet të jenë transparente. Një filtër mund të identifikohet dhe të referohet në CSS duke përdorur filtrin: url ('# svg-nënvizoni').

Çfarë është plusi - filtri shton transparencën pa u mbështetur në hijen e tekstit. Kjo do të thotë, ju mund të kaloni drejtuesit e shkronjave të poshtme në çdo sfond, duke përfshirë gradientët dhe imazhet! Shembulli i mëposhtëm funksionon vetëm me një rresht teksti, ndaj kini kujdes.

Dhe kjo është se si duket në Chrome dhe Firefox:

Problemet e IE, Edge dhe Safari po përballen me probleme. Është e vështirë të testosh mbështetjen për filtrat SVG në CSS. Ju mund të përdorni rregullin @mbështetje në filtër, por kjo do të kontrollojë vetëm nëse vetë lidhja funksionon, jo nëse filtri është aplikuar apo jo. Mënyra ime është goxha e papërpunuar me shfletuesit, ndaj jini dyfish të kujdesshëm.

pro

ndodhet nën vijën bazë;

anashkalon liderët e poshtëm;

ju mund të ndryshoni ngjyrën, trashësinë dhe stilet;

punon në çdo sfond.

Minuset

nuk hidhet në linja të reja;

nuk funksionon në IE, Edge dhe Safari, por mund të specifikoni dekorimin e tekstit si një kthim prapa. Nënvizimet e Safari duken të shkëlqyera më vete.

Underline.js (kanavacë)

Underline.js është një bibliotekë e mahnitshme. Unë jam i impresionuar me atë që Wenting Zhang ishte në gjendje të bënte me JS dhe vëmendjen ndaj detajeve. Nëse nuk e keni parë ende demonstrimin e teknologjisë Underline.js, ndaloni për një minutë dhe hidhini një sy. Ka një bisedë të mrekullueshme nëntë minutëshe në rrjet për temën e parimeve të punës, do t'jua ritregoj shpejt tani. Nënvizimet vizatohen duke përdorur kanavacë. Një qasje krejtësisht e re që funksionon çuditërisht mirë.

Pavarësisht emrit tërheqës, kjo është vetëm një demonstrim teknik. Kjo do të thotë, nuk mund ta vendosni menjëherë bibliotekën në projekt pa një mori ndryshimesh.

Kjo bibliotekë vlen të përmendet vetëm si një dëshmi e konceptit. Canvas ka potencialin për të krijuar nënvizime të bukura, ndërvepruese, por do t'ju duhet të shkruani kod shtesë JS për të funksionuar siç duhet.

Tekst-dekorim- * vetitë

E mbani mend kur thashë se do të analizojmë diçka më në detaje më vonë? Tani do ta bëjmë këtë. Vetia e dekorimit të tekstit funksionon mirë më vete, por ne mund të shtojmë disa veçori eksperimentale për një pamje edhe më të mirë:

tekst-zbukurim-ngjyrë

tekst-dekorim-kapërcej

tekst-dekorim-stili

Mos u gëzoni shumë, ju e dini për mbështetjen e shfletuesit.

Vetia tekst-dekorim-ngjyrë

Vetia text-decoration-color ju lejon të ndryshoni ngjyrën e nënvizimit veçmas nga ngjyra e tekstit. Prona madje ka mbështetje të mirë të shfletuesit. Funksionon në Firefox dhe ka prefiks në Safari. Nga ana negative, nëse nuk e pastroni vijën rreth drejtuesve, në Safari do të mbivendoset teksti. Firefox:

Vetia text-decoration-skip

Vetia text-decoration-skip është përgjegjëse për kapërcimin e liderëve të poshtëm në tekstin e nënvizuar.

Kjo pronë është jo standarde dhe aktualisht punon vetëm në Safari. Për të punuar në shfletues të tjerë, duhet të përdorni prefiksin -webkit-. Safari e ka këtë veçori të aktivizuar si parazgjedhje, kjo është arsyeja pse nënvizat i kapërcejnë thirrjet nga fundi edhe në sajtet ku kjo veçori nuk është e specifikuar.

Nëse jeni duke përdorur Normalize, duhet të jeni të vetëdijshëm se versionet e fundit çaktivizojnë funksionin e duhur në të gjithë shfletuesit. Nëse dëshironi të riktheni ato nënvizime pothuajse magjike, duhet ta aktivizoni këtë veçori.

Vetia e stilit të dekorimit të tekstit

Vetia e stilit të dekorimit të tekstit ofron të njëjtin grup nënvizimesh si vetia e stilit të kufirit, por gjithashtu shton një pamje të re - me onde. Vlerat e mundshme:

Tani për tani vetia e stilit të dekorimit të tekstit funksionon vetëm në Firefox, më poshtë është pamja e ekranit:

Një grup nënvizash të forta Duket i ngjashëm?

Çfarë nuk shkon?

Vetitë e tekstit-dekorimit- * janë më intuitive se vetitë e tjera për nënvizimet e stilimit. Megjithatë, nëse shikoni ndryshe kërkesat që kemi paraqitur më parë, do të vini re se duke përdorur këto veti nuk mund të ndryshoni trashësinë dhe pozicionin. Pas një kërkimi të vogël, gjeta këto dy veti:

tekst-nënvizim-gjerësi

tekst-nënvizoj-pozicion

Duket sikur këto prona u hoqën nga një version i hershëm i CSS për shkak të mungesës së interesit për to. Ato nuk u aplikuan kurrë. Hej, ky nuk është faji im.

konkluzionet

Pra, cila është mënyra më e mirë për të nënvizuar tekstin? E gjitha varet nga faktorë të ndryshëm.

Për tekst të vogël, unë rekomandoj përdorimin e tekstit-dekorim dhe vetinë eksperimentale text-decoration-skip, duke shpresuar se do të funksionojë. Duket kështu në shumicën e shfletuesve, por ka qenë gjithmonë kështu dhe njerëzit nuk i kushtuan vëmendje. Nëse jeni mjaft të durueshëm, ka shumë mundësi që së shpejti të gjitha nënvizimet tuaja të duken mirë dhe nuk do t'ju duhet të ndryshoni asgjë.

Përdorni imazhin e sfondit për tekstin e trupit. Metoda funksionon, duket bukur, dhe ka përzierje Sass për të. Nëse nënvizimi është i hollë ose ngjyra ndryshon nga teksti, ka shumë të ngjarë të kapërceni metodën e hijes së tekstit. Për tekstin në një rresht, përdorni kufirin-fund dhe çdo veçori tjetër.

Dhe për të kapërcyer drejtuesit e shkronjave në sfonde ose imazhe gradient, provoni të përdorni filtrin SVG. Ose thjesht mos i përzieni sfonde të tilla me nënvizime. Në të ardhmen, kur mbështetja e shfletuesit të përmirësohet, mund të përdoren veçoritë e tekstit-decoration- *.

Ka shumë mënyra të ndryshme për të pyetur Nënvizimi i tekstit CSS... Nëse po flasim për një skenar ideal, nënvizimi duhet të plotësojë kushtet e mëposhtme:

• Pozicionuar nën vijën bazë të linjës;
• Mos prekni drejtpërdrejt pjesët e shkronjave që janë nën vijën bazë;
• Duhet të jetë e mundur të ndryshohet ngjyra, trashësia dhe stili i vijës së nënvizuar;
• Nënvizimi duhet të vazhdojë pasi teksti të jetë mbështjellë;
• Nënvizimi duhet të funksionojë në çdo sfond.

E gjithë kjo është mjaft e qartë. Por me sa di unë, nuk ka asnjë mënyrë për të arritur të gjitha këto me CSS.

Qasjet

Mënyrat me të cilat mund të nënvizoni tekstin në internet:

• tekst-dekorim;
• kufiri-fund;
• kuti-hije;
• sfond-imazh;
• filtra SVG;
• Nënvizoni.js (kanavacë);
• tekst-dekorim- *.

Le t'i hedhim një vështrim ato një nga një dhe të flasim për të mirat dhe të këqijat e tyre.

tekst-dekorim

dekorimi i tekstit është metoda më e thjeshtë e nënvizimit të CSS. Vetëm një pronë vlen dhe kaq. Për madhësi të vogla të shkronjave, kjo mund të duket mjaft e mirë, por rrisni madhësinë dhe e njëjta linjë fillon të duket e vështirë.

Shiko shembullin

Problemi më i madh me përdorimin e dekorimit të tekstit është mungesa e personalizimit të tij. Vetia përputhet me çdo madhësi fonti ose ngjyrë teksti në të cilën është aplikuar dhe nuk ka asnjë mënyrë ndër-shfletuesi për të ndryshuar stilin e dhënë.

PRO

• Është e lehtë për t'u aplikuar;
• Ndodhet nën vijën bazë;
• Si parazgjedhje, ai shton mbushje në pjesët e shkronjave që dalin poshtë vijës bazë ( në Safari dhe iOS);
• Mbështjell rresht pas rreshti;
• I përshtatshëm për çdo sfond;

MINUSET

• Nuk shton dhëmbëzim nga pjesët e shkronjave që dalin poshtë vijës bazë në shfletues të tjerë;
• Ju nuk mund të ndryshoni ngjyrën, peshën ose stilin e vijës së nënvizuar.

kufiri-fund

fundi i kufirit është i lehtë për t'u përdorur dhe i personalizueshëm. Kjo veçori e bën mjaft të lehtë ndryshimin e ngjyrës, peshës dhe stilit të nënvizimit të tekstit CSS.

Rezultati i aplikimit të kufirit të poshtëm në elementët e linjës:

Shiko shembullin

Vini re se nënvizimi vendoset nën pjesët e shkronjave që shtrihen nën vijën bazë. Kjo mund të ndryshohet duke vendosur veçorinë inline-block në element dhe duke ulur vlerën e lartësisë së linjës. Por në këtë rast, ju humbni aftësinë për të mbështjellë tekstin. I përshtatshëm për tekst me një rresht.

Shiko shembullin

Ju mund të përdorni veçorinë text-shadow për të fshehur pjesën e nënvizimit që shtrihet poshtë vijës bazë. Në këtë rast, është e nevojshme të përdorni ngjyrën e sfondit. Kjo qasje funksionon vetëm me ngjyra të forta të sfondit, jo me mbushje gradient ose imazhe.

Shiko shembullin

Për të vendosur një nënvizim të vetëm, duhet të aplikoni katër veti stili. Kjo është më shumë se tekst-dekorim.

PRO

• Me ndihmën e text-hijes, mund të vendosni dhëmbëzimet nga pjesët e shkronjave që dalin poshtë vijës bazë;
• Ju mund të ndryshoni ngjyrën, peshën dhe stilin e linjës CSS të nënvizimit;
• Mund të vendosni tranzicione dhe animacione për ngjyrën dhe trashësinë e nënvizimit;
• Transmetuar si parazgjedhje, nëse jo bllok-inline;

MINUSET

• I vendosur larg tekstit, ky pozicion është i vështirë të ndryshohet;
• Ka shumë veti shtesë për t'u përdorur;
• Theksimi i çuditshëm i tekstit kur përdoret veçoria text-shadow.

kuti-hije

Kjo veti formon një nënvizim duke përdorur dy hije: njëra krijon një drejtkëndësh, tjetra fsheh pjesën më të madhe të tij, përveç pjesës së poshtme. Kjo metodë është e zbatueshme vetëm për një sfond të fortë.

Shiko shembullin

Mund të përdorni të njëjtin truk si me text-shadow për të simuluar dhëmbëzimin nga pjesët e shkronjave që dalin poshtë vijës bazë. Nëse nënvizimi supozohet të ketë një ngjyrë të ndryshme nga teksti, atëherë nuk do të keni të njëjtat probleme si me dekorimin e tekstit.

PRO

• Nënvizimi CSS mund të vendoset nën vijën bazë;
• Ju mund të ndryshoni ngjyrën dhe trashësinë e nënvizimit;
• Nënvizimi mbështillet rresht pas rreshti.

MINUSET

• Stili nuk mund të ndryshohet;
• Nuk funksionon për asnjë sfond.

sfond-imazh

background-image prodhon një rezultat që përputhet me të gjitha kriteret e mësipërme. Kjo përdor gradientin linear dhe pozicionin e sfondit për të krijuar një imazh që përsëritet horizontalisht përgjatë vijave të tekstit. Në këtë rast, teksti duhet të vendoset për të shfaqur: inline ;.

Shiko shembullin

Në vend të gradientit linear, mund të shtoni imazhin tuaj me disa efekte.

Shiko shembullin

PRO

• Nënvizimi i lidhjes CSS mund të vendoset poshtë vijës bazë;
• Me ndihmën e text-shadow, mund të vendosni dhëmbëzimet nën vijën bazë;
• Ju mund të ndryshoni ngjyrën, trashësinë dhe stilin e nënvizimit;
• Punon me imazhe të personalizuara;
• Nënvizoni mbështjelljet rresht pas rreshti;
• Punon në çdo sfond, përveç nëse përdoret text-hija.

MINUSET

• Madhësia e imazhit mund të ndryshojë në mënyra të ndryshme në varësi të rezolucionit, shfletuesit dhe shkallës së shikimit.

Filtrat SVG

Mund të krijoni një element filtri SVG që vizaton një vijë dhe më pas zgjeron tekstin për të fshehur pjesët transparente të rreshtit. Pas kësaj, duhet të vendosni një identifikues për filtrin dhe t'i referoheni atij në CSS:

filtri: url ('# svg-nënvizoni').

Avantazhi i kësaj qasjeje është se filtri shton transparencën pa përdorur hijen e tekstit. Mund të vendosni hapësirën e nënvizimit të CSS që të zgjatet poshtë vijës bazë në çdo sfond. Por kjo metodë nuk është e zbatueshme për tekstin me një rresht, kjo është pengesa kryesore e saj.

Shiko shembullin

Kështu duket në Chrome dhe Firefox:

Mbështetja e shfletuesit për IE, Edge dhe Safari është problematike. Kontrollimi i mbështetjes së filtrit SVG në CSS është i vështirë.

PRO

• Mund të vendoset nën vijën bazë;
• Ju mund të vendosni dhëmbëzimet nën vijën bazë;
• Ju mund të ndryshoni ngjyrën, trashësinë dhe stilin e vijës së nënvizuar;
• Punon në çdo sfond.

MINUSET

• Nënvizimi nuk mbështillet nëpër vija të shumta;
• Nuk funksionon në IE, Edge ose Safari, por kthimi mund të bëhet me dekorimin e tekstit. Gjithsesi do të duket mirë në Safari.

Underline.js (kanavacë)

Underline.js vizaton nënvizimin e CSS duke përdorur elementë ... Kjo është një qasje e re që funksionon çuditërisht mirë.

Ky është vetëm një version teknik demo, prandaj, për të përdorur bibliotekën, do të duhet të bëni ndryshime globale në projektin që po zhvillohet.

Ne ofrojmë këtë metodë për të demonstruar mundësitë kur krijoni nënvizime të bukura, ndërvepruese.

Tekst-dekorim- * vetitë

Kjo veçori funksionon mirë më vete, por ju mund të shtoni disa veti eksperimentale për të ndryshuar pamjen:

• tekst-dekorim-ngjyrë;
• tekst-dekorim-kaloni;
• tekst-dekorim-stili.

Vetëm mos u gëzoni para kohe. Jini të vetëdijshëm për problemin e mbështetjes së shfletuesit.

TEKST-DEKORIM-NGJYRA

Ju lejon të ndryshoni ngjyrën CSS të nënvizimit me pika veçmas nga ngjyra e tekstit. Kjo pronë mbështetet mirë nga shfletuesit. Funksionon në Firefox dhe ka prefiks në Safari. Por nëse nuk i trajtoni ndërprerjet nën vijën bazë të tekstit, atëherë Safari do të vendosë nënvizimin në krye të tekstit.

Firefox:

Safari:

TEKST-DEKORIM-KAQ

Kjo pronë shton ndërprerje nën vijën bazë:

Nuk është standard dhe aktualisht funksionon vetëm në Safari, kështu që duhet të përdorni prefiksin -webkit për ta përdorur atë. Safari e mbështet këtë veçori si parazgjedhje, kështu që pushimet shtohen edhe në faqet ku prona nuk është e specifikuar fare.

TEKST-DEKORIMI-STIL

Kjo veçori ofron të njëjtat lloje të nënvizimit të tekstit CSS që mund të vendoset duke përdorur stilin e kufirit. Dhe përveç kësaj shtohet lloji i linjës me onde.

Më poshtë janë vlerat e ndryshme që mund të përdorni:

• i thyer;
• me pika;
• dyfishtë;
• të ngurta;
• me onde.

Për momentin, stili i dekorimit të tekstit funksionon vetëm në Firefox, këtu është një pamje nga ekrani.

Përshkrim

Shton dekorimin e tekstit në formën e nënvizimit, vijës së vijës, vijës sipër tekstit dhe vezullimit. Më shumë se një stil mund të aplikohet në të njëjtën kohë duke renditur vlerat të ndara sipas hapësirave.

Sintaksë

teksti-dekorimi: [pulsoj || linjë-përmes || overline || nënvizoj] | asnjë | trashëgojnë

vlerat

blink Vendos tekstin që vezullon. Një tekst i tillë në mënyrë periodike, rreth një herë në sekondë, zhduket, pastaj rishfaqet në të njëjtin vend. Kjo vlerë aktualisht është e vjetëruar nga shfletuesit dhe është e vjetëruar në CSS3; në vend të kësaj rekomandohet animacioni. line-through Krijon tekst të shënuar (shembull). overline Rreshti kalon mbi tekst (shembull). nënvizoj Vendos nënvizoj tekstin (shembull). asnjë Anulon të gjitha efektet, duke përfshirë nënvizimin e paracaktuar për lidhjet. inherit Vlera trashëgohet nga prindi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Sulmi strategjik

Modeli i objektit

document.getElementById ("elementID") .style.textDekorimi

document.getElementById ("elementID") .style.textDecorationBlink

document.getElementById ("elementID") .style.textDecorationLineThrough

document.getElementById ("elementID") .style.textDecorationAsnjë

document.getElementById ("elementID") .style.textDecorationOverLine

document.getElementById ("elementID") .style.textDecorationUnderline

Shfletuesit

Internet Explorer deri dhe duke përfshirë versionin 7.0 nuk e mbështet vlerën trashëgimore. Linja e marrë duke përdorur vlerën e linjës është më e lartë në IE7 sesa në shfletues të tjerë; IE8 e ka rregulluar këtë gabim.

Ka shumë mënyra të ndryshme për të stiluar një nënvizim. Ju mund të kujtoni artikullin e Marcin Vichari "Nënvizon lidhjen e krijimit" në Medium. Zhvilluesit e mesëm nuk po përpiqen të bëjnë diçka të çmendur, ata thjesht duan të krijojnë një rresht të bukur nën tekst.

Ky është nënvizimi më i thjeshtë, por ka përmasa të sakta dhe nuk përputhet me zbritësit e shkronjave. Dhe është padyshim më i mirë se nënvizimi i paracaktuar në shumicën e shfletuesve. Medium luftoi për të arritur stilin e tij në ueb. Dy vjet më vonë, ne ende e kemi të vështirë të marrim një nënvizim të bukur.

Golat

Çfarë nuk shkon me dekorimin e njohur të tekstit: nënvizo? Për një skenar ideal, nënvizimi duhet të bëjë si më poshtë:

• pozicionuar nën vijën bazë;
• kapërceni elementët në distancë;
• ndryshoni ngjyrën, trashësinë dhe stilin e linjës;
• punë me tekst me shumë rreshta;
• punoni në çdo sfond.

Unë besoj se këto janë të gjitha kërkesa të arsyeshme, por me sa di unë nuk ka asnjë mënyrë intuitive për ta arritur këtë me CSS.

Qasjet

Pra, cilat janë këto mënyra të ndryshme që ne mund të zbatojmë nënvizimin në ueb?

Këtu janë ato që po shqyrtoj:

• tekst-dekorim;
• kufiri-fund;
• kuti-hije;
• sfond-imazh;
• filtra SVG;
• Nënvizoni.js (kanavacë);
• tekst-dekorim- *.

Le t'i analizojmë këto metoda një nga një dhe të flasim për të mirat dhe të këqijat e secilës prej tyre.

tekst-dekorim

dekorimi i tekstit është mënyra më e dukshme për të nënvizuar tekstin. Ju aplikoni një pronë dhe mjafton. Mund të duket mjaft e mirë në madhësi të vogla të shkronjave, por rrisni madhësinë e shkronjave dhe kjo nënvizim fillon të duket e vështirë.

Problemi më i madh me dekorimin e tekstit është mungesa e personalizimit. Ju jeni të kufizuar në ngjyrën dhe madhësinë e shkronjave të tekstit dhe nuk keni asnjë mënyrë ndër-shfletuesi për ta ndryshuar këtë. Ne do të flasim për këtë në më shumë detaje.

• i lehtë për t'u përdorur;
• pozicionuar nën vijën bazë;
• kalon descenders si parazgjedhje në Safari dhe iOS;
• nënvizon tekstin me shumë rreshta;
• punon në çdo sfond.

• nuk kapërcen zbritjet në të gjithë shfletuesit e tjerë;
• nuk lejon ndryshimin e ngjyrës, peshës apo stilit të linjës.

kufiri-fund

kufiri-fund ofron një ekuilibër të mirë midis thjeshtësisë dhe personalizimit. Kjo qasje përdor veçorinë e mirë të vjetër të kufirit CSS, që do të thotë se mund të ndryshoni lehtësisht ngjyrën, peshën dhe stilin.

Kështu duket fundi i kufirit në elementët inline.

E meta kryesore është distanca e vijës së nënvizuar nga teksti, ajo është tërësisht nën zbritësit. Ju mund ta rregulloni këtë duke vendosur elementët në "inline-block" dhe duke ulur lartësinë e rreshtit, por më pas do të humbni aftësinë për të mbështjellë tekstin. E mirë për qepje të vetme, por jo e dobishme askund tjetër.

Për më tepër, mund të përdorni hijen e tekstit për të mbivendosur disa nga rreshtat pranë zbritësve, duke imituar këtë me të njëjtën ngjyrë si sfondi. Kjo do të thotë, kjo teknikë funksionon vetëm në një sfond të thjeshtë pikturë njëngjyrëshe, pa gradient, modele ose imazhe.

Për momentin, ne tashmë po përdorim deri në katër veti për të stiluar një rresht. Kjo është shumë më tepër punë sesa thjesht shtimi i dekorimit të tekstit.

• mund të kapërcejë thirrjet duke përdorur text-shadow;
• mund të ndryshojë ngjyrën, peshën dhe stilin e linjës;
• ju lejon të përdorni tranzicione dhe animacione të ngjyrës dhe peshës;
• punon me tekst me shumë rreshta nëse nuk aplikohet blloku inline;
• funksionon në çdo sfond për sa kohë që nuk përdorni text-hije.

• pozicionuar shumë poshtë dhe lëvizur në një mënyrë të vështirë;
• shumë prona shtesë përdoren për të punuar siç duhet;
• kur përdorni tekst-hije, përzgjedhja e tekstit duket e shëmtuar.

kuti-hije

box-shadow vizaton një zbritës me dy hije të brendshme: njëra krijon një drejtkëndësh dhe tjetra fsheh një pjesë të tij. Kjo do të thotë që ju duhet një sfond me ngjyra të forta që kjo të funksionojë.

Ju mund të përdorni të njëjtin truk me hije teksti për të mbushur boshllëqet midis nënvizimit dhe zbritjes. Por nëse ngjyra e nënvizimit është e ndryshme nga ngjyra e tekstit - ose është mjaft e hollë, vija nuk do të përplaset me descenders siç ndodh me dekorimin e tekstit.

• ju lejon të ndryshoni ngjyrën dhe trashësinë e vijës;
• punon me tekst me shumë rreshta.

• nuk lejon ndryshimin e stilit të nënvizuar;
• nuk funksionon në asnjë sfond.

sfond-imazh

Metoda e imazhit të sfondit është më afër dëshirës sonë dhe ka më pak të meta. Ideja është të përdoret gradienti linear dhe pozicioni i sfondit për të krijuar një imazh që përsëritet poshtë rreshtave të tekstit.

Që kjo qasje të funksionojë, teksti duhet të jetë në ekran standard: modaliteti inline; ...

Opsioni tjetër nuk ka gradient linear, për efekte mund të shtoni imazhin tuaj të sfondit.

• mund të pozicionohet nën vijën bazë;
• mund të kapërcejë thirrjet për shkak të hijes së tekstit;
• punon me imazhe të personalizuara;
• mbështjell disa rreshta teksti;
• funksionon në çdo sfond, për sa kohë që nuk aplikoni text-hije.

• madhësia e imazhit mund të ndryshojë në varësi të rezolucionit të ekranit, shfletuesit dhe zmadhimit.

Filtrat SVG

Kam luajtur shumë me këtë metodë. Mund të krijoni një filtër inline SVG që vizaton një vijë dhe më pas zgjeron tekstin për të maskuar pjesën e vijës që duam ta bëjmë transparente. Pastaj mund t'i jepni filtrit një ID dhe të lidheni me të në CSS si filtri: url ('# svg-nënvizoni').

Avantazhi i kësaj qasjeje është se transparenca arrihet pa aplikuar hije teksti, domethënë, ne i anashkalojmë thirrjet në çdo sfond, duke përfshirë gradientët dhe imazhet e sfondit! Kjo funksionon vetëm në një rresht të vetëm teksti, mbani në mend këtë.

Kështu duket në Chrome dhe Firefox:

Mbështetja e IE, Edge dhe Safari është problematike. Është e vështirë të testosh mbështetjen e filtrit SVG në CSS. Ju mund të përdorni direktivën @supports me filtër, por kjo do të kontrollojë vetëm nëse funksionon referenca e filtrit, por jo vetë filtri. Përpjekjet e mia përfunduan në një përcaktim të zymtë të aftësive të shfletuesit, kjo është një mangësi e dukshme e metodës.

• mund të pozicionohet nën vijën bazë;
• mund të kapërcejë elementët në distancë;
• lejon ndryshimin e ngjyrës, trashësisë dhe stilit të linjës;
• punon në çdo sfond.

• nuk punon me tekst me shumë rreshta;
• nuk funksionon në IE, Edge dhe Safari, por ju mund të përdorni dekorimin e tekstit si një kthim prapa, duket mirë në Safari.

Underline.js (kanavacë)

Underline.js është magjepsëse. Më duket mbresëlënëse ajo që ka bërë Wentin Zhang me aftësitë e saj në JavaScript dhe vëmendjen ndaj detajeve. Nëse nuk e keni parë demonstrimin teknik të Underline.js, ndaloni së lexuari dhe merrni një minutë nga koha juaj. Ka edhe bisedën e saj nëntë minutëshe se si funksionon, por unë do ta përshkruaj shkurtimisht: nënvizimi vizatohet duke përdorur elementë ... Kjo është një qasje e re që funksionon çuditërisht mirë.

Pavarësisht emrit tërheqës, Underline.js është vetëm një demonstrim teknik. Kjo do të thotë që ju nuk mund ta merrni këtë dhe ta lidhni atë në projektin tuaj pa ndryshuar kodin.

Vendosa ta përmend këtë si një dëshmi të konceptit që ka potencialin për të krijuar nënvizime të bukura ndërvepruese, por që kjo të funksionojë, duhet të shkruani JavaScript-in tuaj.

Karakteristikat e reja të dekorimit të tekstit

Ju do të mbani mend që unë premtova të flas më shumë për dekorimin e tekstit. Ka ardhur koha.

Vetë kjo veti funksionon shkëlqyeshëm, por mund të shtoni disa veti eksperimentale për të personalizuar pamjen e nënvizimit.

• tekst-zbukurim-ngjyrë
• tekst-dekorim-kapërcej
• tekst-dekorim-stili

Por mos jini shumë të lumtur ... Mbështetja e shfletuesit - si gjithmonë. Keshtu shkon.

tekst-zbukurim-ngjyrë

Vetia text-decoration-color ju lejon të ndryshoni ngjyrën e nënvizimit veçmas nga ngjyra e tekstit. Mbështetja për këtë veçori është më e mirë nga sa mund të prisni - funksionon në Firefox dhe parashtesohet në Safari. Këtu është kapja: nëse keni thirrje, Safari do të vendosë një nënvizim mbi tekst.

tekst-dekorim-kapërcej

Vetia text-decoration-skip mundëson kapërcimin e zbritjeve në tekstin e nënvizuar.

Kjo pronë është jo standarde dhe aktualisht funksionon vetëm në Safari, me prefiksin -webkit-. Safari e aktivizon këtë veçori si parazgjedhje, kështu që thirrjet nuk janë gjithmonë gërmuese.

Nëse jeni duke përdorur Normalize, ju lutemi vini re se versionet e fundit e çaktivizojnë këtë veçori për hir të sjelljes së qëndrueshme të shfletuesit. Dhe nëse dëshironi që nënvizimi të mos ndikojë tek zbritësit, duhet ta aktivizoni manualisht.

tekst-dekorim-stili

Vetia në stilin e dekorimit të tekstit ofron të njëjtat aftësi stilimi si vetia e stilit kufitar, me shtimin e stilit të valëzuar.

Këtu është një listë e vlerave të disponueshme:

• i thyer
• me pika
• dyfishtë
• të ngurta

Aktualisht, vetia e stilit të dekorimit të tekstit funksionon vetëm në Firefox, këtu është një pamje nga ekrani:

Çfarë mungon

Seria e veçorive text-decoration- * janë shumë më intuitive për t'u përdorur sesa pjesa tjetër e veçorive CSS për stilimin e nënvizimit. Por nëse shikoni më nga afër, nuk ka mënyra të mjaftueshme për të vendosur trashësinë ose pozicionin e linjës për të kënaqur nevojat tona.

Pas një kërkimi të vogël, gjeta disa prona të tjera:

• tekst-nënvizim-gjerësi
• tekst-nënvizoj-pozicion

Duket se janë drafte të hershme të CSS, por nuk u zbatuan kurrë në shfletues për shkak të mungesës së interesit.

konkluzionet

Pra, cila është mënyra më e mirë për të nënvizuar?

Për tekst të vogël, unë rekomandoj përdorimin e dekorimit të tekstit me shtimin optimist të tekstit-dekorim-kaloni. Duket pak pa shije në shumicën e shfletuesve, por shfletuesit kanë pasur gjithmonë nënvizime dhe njerëzit thjesht nuk do t'i kushtojnë vëmendje. Plus, ka gjithmonë një shans që me durim, kjo nënvizim të duket mirë një ditë pa pasur nevojë të ndryshoni asgjë, siç do të bëjnë shfletuesit.

Për tekstin e trupit, ka kuptim të përdoret imazhi i sfondit. Kjo qasje funksionon, duket e mrekullueshme dhe ka përzierje Sass për të. Në parim, mund të hiqni hijen e tekstit nëse nënvizimi është i hollë ose me ngjyrë të ndryshme nga teksti.

Për rreshta të vetëm teksti, përdorni kufirin-fund së bashku me çdo veçori shtesë.

Dhe nëse duhet të kapërceni zbritjet kundrejt një gradienti ose imazhi, provoni të përdorni filtrat SVG. Ose, thjesht shmangni përdorimin e nënvizave.

Në të ardhmen, me përmirësimin e mbështetjes së shfletuesit, e vetmja përgjigje do të jetë grupi i veçorive text-decoration- *.

Unë rekomandoj gjithashtu të shikoni artikullin e Benjamin Woodruff CSS Underlines Suck, i cili trajton të njëjtat çështje.