Ka një bandë menyra te ndryshme dizajni i nënvizuar. Ju mund të mbani mend artikullin e Marcin Vichari "Lidhja e krijimit nënvizon" në Medium. Zhvilluesit e Medium nuk po përpiqen të bëjnë ndonjë gjë të çmendur, ata thjesht duan të krijojnë një rresht të bukur nën tekst.

Ky është nënvizimi më i thjeshtë, por ka masa e duhur dhe nuk mbivendosen shtesat e shkronjave. Dhe është padyshim më i mirë se nënvizimi i paracaktuar në shumicën e shfletuesve. Mediumi duhej të përballej me sfida për të arritur stilin e tij në ueb. Dy vjet më vonë, është ende e vështirë për ne të bëjmë gjithçka nënvizim i bukur.

Golat

Çfarë nuk shkon me dekorimin e zakonshëm të tekstit: nënvizo ? Nëse ne po flasim për Në lidhje me skenarin ideal, nënvizimi duhet të bëjë sa më poshtë:

• pozicioni nën vijën bazë;
• kapërceni thirrjet;
• ndryshoni ngjyrën, trashësinë dhe stilin e linjës;
• për të punuar 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ë duke përdorur CSS.

Qasjet

Pra, çfarë është kjo mënyra të ndryshme, të cilin mund ta përdorim për të zbatuar nënvizimin në ueb?

Këtu janë ato që po shqyrtoj:

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

Le t'i shohim 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. Aktiv madhësive të vogla Kjo mund të duket mirë në një font, por rrisni madhësinë e fontit dhe nënvizimi fillon të duket i 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 ka asnjë mënyrë ndër-shfletuesi për ta ndryshuar këtë. Ne do të flasim për këtë më në detaje më vonë.

• i lehtë për t'u përdorur;
• pozicionuar nën vijën bazë;
• anashkalon thirrjet si parazgjedhje në Safari dhe iOS;
• thekson tekstin me shumë rreshta;
• funksionon në çdo sfond.

• nuk i kalon fundet në të gjithë shfletuesit e tjerë;
• nuk ju lejon të ndryshoni ngjyrën, trashësinë ose stilin e linjës.

kufi-fund

fundi i kufirit arrin një ekuilibër të mirë midis thjeshtësisë dhe përshtatshmërisë. 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, trashësinë dhe stilin.

Kështu duket fundi i kufirit elemente inline.

Disavantazhi kryesor- kjo është distanca e nënvizimit nga teksti, është tërësisht poshtë elementeve të thirrjes. Mund ta rregulloni këtë duke vendosur elementët në "bllokim inline" 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 linja individuale, por jo e përshtatshme askund tjetër.

Për më tepër, ne mund të përdorim hijen e tekstit për të errësuar pjesën e rreshtit pranë elementëve të linjës, duke e simuluar këtë duke përdorur të njëjtën ngjyrë si sfondi. Kjo do të thotë, kjo teknikë funksionon vetëm në një sfond të thjeshtë me një ngjyrë, pa gradientë, modele ose imazhe.

Aktiv ky moment Ne tashmë përdorim deri në katër veti për të hartuar një linjë. Është shumë më shumë 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 me ngjyra dhe guxim;
• punon me tekst me shumë rreshta nëse nuk aplikohet blloku inline;
• Punon në çdo sfond për sa kohë që nuk përdorni text-shadow .

• pozicionuar shumë poshtë dhe lëviz në mënyrë të ndërlikuar;
• përdoren shumë veti shtesë për funksionimin e duhur;
• kur përdorni tekst-hije, nënvizimi i tekstit duket i shëmtuar.

kuti-hije

box-shadow vizaton një nënshkrim duke përdorur dy hijet e brendshme: njëri krijon një drejtkëndësh dhe i dyti fsheh një pjesë të tij. Kjo do të thotë që keni nevojë sfond i thjeshtë në mënyrë që kjo të funksionojë.

Ju mund të përdorni të njëjtin truk me hijen e tekstit për të mbushur boshllëqet midis nënvizimeve dhe thirrjeve. Por nëse ngjyra e nënvizimit është e ndryshme nga ngjyra e tekstit - ose është thjesht mjaft e hollë - rreshti nuk do të përplaset me thirrjet aq sa do të përplaset me dekorimin e tekstit.

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

• nuk ju lejon të ndryshoni stilin e nënvizimit;
• Nuk funksionon në asnjë sfond.

sfond-imazh

Metoda e imazhit të sfondit është më afër asaj që duam 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 nën rreshtat e tekstit.

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

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

• mund të pozicionohet nën vijën bazë;
• mund të kapërcejë elementet e thirrjes duke përdorur text-shadow ;
• punon me imazhe të personalizuara;
• mbështjell disa rreshta teksti;
• Punon në çdo sfond për sa kohë që nuk përdorni text-shadow .

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

Filtrat SVG

Unë kam luajtur mjaft me këtë metodë. Ju mund të krijoni një filtër të linjës SVG që vizaton një vijë dhe më pas zgjeron tekstin për të maskuar pjesën e vijës që duam të jetë transparente. Më pas mund t'i jepni filtrit një ID dhe t'i referoheni në CSS diçka si filtri: url('#svg-nënvizoni') .

Përfitimi i kësaj qasjeje është se transparenca arrihet pa përdorimin e hijes së tekstit, që do të thotë se lejojmë që thirrjet të shfaqen në çdo sfond, duke përfshirë gradientët dhe imazhet e sfondit! Kjo funksionon vetëm në një rresht të vetëm teksti, kështu që mbani në mend këtë.

Ja se si duket në Chrome dhe Firefox:

Mbështetja në 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 @mbështetje me filtrin, por kjo do të kontrollojë vetëm funksionalitetin e lidhjes së filtrit, jo funksionalitetin e vetë filtrit. Përpjekjet e mia përfunduan në një përcaktim të lodhshëm të aftësive të shfletuesit, kjo është një pengesë e rëndësishme e metodës.

• mund të pozicionohet nën vijën bazë;
• mund të kapërcejë elementet e zgjerimit;
• lejon ndryshime në ngjyrën, trashësinë dhe stilin e linjës;
• funksionon 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ë Wenting Zhang ka arritur me komandimin e saj të JavaScript dhe vëmendjen ndaj detajeve. Nëse nuk e keni parë demonstrimin e teknologjisë Underline.js, ndaloni së lexuari dhe lini një minutë. Ka edhe një bisedë nëntë minutëshe nga ajo se si funksionon, por do ta mbaj shkurt: 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ë nuk mund ta lidhni atë në projektin tuaj pa ndryshuar kodin.

Mendova ta përmend këtë si një provë të konceptit që ka potencialin për të krijuar nënvizime të shkëlqyera ndërvepruese, por ju duhet të shkruani JavaScript-in tuaj për ta bërë atë të funksionojë.

Karakteristikat e reja të dekorimit të tekstit

Ju kujtohet që ju premtova të flisja më shumë për dekorimin e tekstit. Ka ardhur koha.

Kjo veçori funksionon mirë më vete, por ju mund të shtoni disa veti eksperimentale për ta rregulluar atë pamjen duke nënvizuar.

• tekst-zbukurim-ngjyrë
• tekst-dekorim-kaloni
• tekst-dekorim-stili

Por mos u emociononi shumë... Mbështetja e shfletuesit është si gjithmonë. Ashtu 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 me prefiksin në Safari. Këtu është kapja: nëse keni thirrje, Safari do të vendosë një nënvizim në krye të tekstit.

tekst-dekorim-kaloni

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

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

Nëse jeni duke përdorur Normalize, ju lutemi vini re këtë versionet e funditçaktivizoni 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ë në thirrjet, duhet ta aktivizoni manualisht.

tekst-dekorim-stili

Prona e stilit të dekorimit të tekstit ofron të njëjtat opsione stilimi si vetitë kufitare-style , duke shtuar përveç kësaj stilin me onde.

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

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

Tani veti tekst-dekorimi-style funksionon vetëm në Firefox, këtu është një pamje nga ai:

Çfarë mungon

Seria e veçorive text-decoration-* janë shumë më intuitive për t'u përdorur sesa vetitë e tjera të dekorimit të nënvizimit të CSS. Por nëse hedhim një vështrim më të afërt, 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

Këto 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. Në shumicën e shfletuesve duket pak e çuditshme, por nënvizimi ka qenë gjithmonë i tillë në shfletues dhe njerëzit thjesht nuk do ta vënë re. Plus, ka gjithmonë një shans që, nëse keni durim, ajo nënvizim do të duket e mirë një ditë pa pasur nevojë të ndryshoni asgjë siç 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ë kapërceni 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 keni nevojë për thirrje për t'u shfaqur kundër një sfondi gradient ose imazhi, provoni të përdorni filtrat SVG. Ose thjesht shmangni përdorimin e nënvizave.

Në të ardhmen, kur mbështetja e shfletuesit të përmirësohet, e vetmja përgjigje do të jetë grupi i vetive text-decoration-*.

Unë rekomandoj gjithashtu t'i hidhni një sy artikullit të Benjamin Woodroffe CSS Underlines Suck, i cili trajton të njëjtat çështje.

Në këtë faqe do të gjeni shembuj se si të ndryshoni lidhjet HTML kur Ndihmë CSS, e cila ju lejon t'i bëni ato të bllokojnë lidhjet, lidhjet e ikonave, pa nënvizuar, me qoshe të rrumbullakosura, ndryshoni distancën midis tyre dhe shumë më tepër. Në të ardhmen, bazuar në këta shembuj, ju mund të krijoni opsione të ndryshme menutë e navigimit për sitin.

Para se të filloni të studioni shembujt, dua të bëj një sqarim të vogël. Në të gjithë shembujt, për qartësi më të madhe, do të përdoret një pseudo-klasë CSS, e cila përdoret për të ndryshuar stilet e lidhjeve kur kursori i miut rri pezull mbi to. Duhet thënë se kjo praktikë është e zakonshme dhe përdoret në një shkallë ose në një tjetër pothuajse në të gjitha faqet e internetit.

Në këtë shembull, ne do të heqim nënvizimin nga lidhjet dhe më pas do t'i shtojmë ose heqim ato me anë të mausit.

Shembull HTML dhe CSS: si të hiqni dhe shtoni nënvizime nga lidhjet

Përshkrimi i shembullit

1. Parazgjedhja është e gjitha shfletues të njohur shtoni nënvizim në lidhje, gjë që është e rregullueshme Vetia CSS. Kjo do të thotë, si parazgjedhje kjo veti, për lidhjet, ka vlerën nënvizuar . Duke përdorur këtë njohuri, ne ndryshojmë nënvizimin e lidhjeve në gjendjet e tyre të ndryshme.

Fillimisht, nënvizimi i lidhjeve është një vijë e hollë e fortë, e shtypur pothuajse afër tekstit. Dhe në shumicën e rasteve, ky opsion është mjaft i mjaftueshëm. Megjithatë, ndonjëherë një dizajn kërkon që lidhjet të nënvizohen me një vijë me pika dhe jo me një vijë të fortë, ose që distanca nga nënvizimi te lidhjet të jetë më e madhe se standardi, ose që vetë nënvizimi të jetë më i guximshëm. Dhe ndonjëherë ju duhet të bëni një lloj nënvizimi ekzotik, për shembull, me një vijë me onde ose me shumë ngjyra. Të gjitha këto opsione do të diskutohen në këtë shembull.

Shembull HTML dhe CSS: Nënvizoni lidhjen me pika

Përshkrimi i shembullit

1. Së pari, ne heqim nënvizimin standard nga të gjitha lidhjet, pasi do të përdorim metoda jo standarde. Më pas shtojmë një kufi të poshtëm në lidhjen e parë duke përdorur veçorinë CSS dhe e bëjmë atë të ndërprerë. Kjo do të jetë nënvizimi ynë. Për të hequr nënvizimin kur rri pezull mbi një lidhje, ne përdorim një pseudo-klasë dhe e bëjmë sfondin e kornizës të njëjtë me sfondin e faqes, domethënë thjesht e fshehim atë. Në teori, do të ishte më mirë që sfondi i kornizës të bëhej transparent, por IE6 e keqkupton këtë kuptim.
2. Me lidhjen e dytë bëjmë njësoj si me të parën, por thjesht vizatojmë vijë e fortë. Për të rritur distancën nga teksti në nënvizim, ne i japim lidhjes një diferencë të vogël të poshtme duke përdorur veçorinë CSS.
3. Lidhja jonë e tretë ka një nënvizim me shumë ngjyra, kështu që ne do ta shtojmë duke përdorur imazhi i sfondit. Për këtë përdorim një imazh të vogël, të cilin e lidhim nëpërmjet CSS. Vendosni sfondin brenda pjesa e poshtme lidhjet (0 100%) dhe lejo që ajo të kopjohet vetëm horizontalisht (përsërit-x). Nënvizimi është gati, por është shumë afër tekstit për ta rregulluar këtë, ne shtojmë një indent të vogël në lidhjen më poshtë; Kjo eshte.
4. Në IE6 dhe IE7 të vjetër, mund të ketë probleme me shfaqjen e nënvizimit në lidhjen e parë dhe të dytë. Për ta rregulluar këtë, shtoni veçorinë zoom :1, e cila përfshin të ashtuquajturat faqosje. Kjo veçori është e pavlefshme dhe vetëm këta shfletues e kuptojnë atë, ndaj është më mirë ta aktivizoni komente të kushtëzuara.

Shumë shpesh, krijimi i një menuje kërkon më shumë sesa thjesht lidhjet e tekstit, dhe lidhjet janë blloqe, në të cilat zona aktive do të jetë edhe vetë teksti dhe një zonë e caktuar rreth tij.

Përshkrimi i shembullit

1. Për të krijuar lidhjet e bllokut, ne përdorim vetinë CSS :block, e cila i kthen ato në elemente blloku që krijojnë një ndërprerje rreshti para dhe pas tyre. Nëse nuk nevojiten ndërprerjet e linjës, mund ta zëvendësoni vlerën me bllokun inline .
2. Meqenëse lidhjet tona tani janë blloqe, nëse është e nevojshme, ne mund të ndryshojmë gjerësinë e tyre (CSS) ose lartësinë (CSS).
3. Në këtë shembull, ne nuk specifikojmë fare lartësinë e lidhjeve, por thjesht u japim atyre mbushje të brendshme (CSS), e cila zgjeron blloqet.

Përshkrimi i shembullit

1. Gjithçka është shumë e thjeshtë - duke përdorur veçorinë CSS, ne shtojmë kornizën e dëshiruar në lidhjet nën kursorin. Megjithatë, ju lutemi vini re se ne shtojmë saktësisht të njëjtën kornizë në lidhjet e rregullta, por e bëjmë atë të njëjtën ngjyrë si sfondi i faqes. Kjo do të thotë, ne thjesht e fshehim kornizën për momentin. Kjo është bërë në mënyrë që kur rri pezull kursorin e miut, lidhjet të mos fillojnë të "kërcejnë" për shkak të vizatimit të kornizës.

Në vend që ngjyra e kufirit të përputhet me sfondin e faqes, mund të vendoset në transparente dhe të bëhet transparente, por siç thashë, IE6 nuk e trajton atë siç duhet.

Shembull HTML dhe CSS: Krijimi i lidhjeve 3D

Përshkrimi i shembullit

1. Duke përdorur veçorinë CSS, ne shtojmë korniza në lidhje dhe me ndihmën e vendosim ngjyrën e tyre. Në këtë rast, ne tregojmë për kufijtë e majtë dhe të sipërm hije e lehtë ngjyrat, dhe për pjesën e poshtme dhe të djathtë - të errët. Falë kësaj shpërndarjeje ngjyrash ne marrim lidhje që duken si butona tredimensionale.
2. Për ta bërë të duket sikur butonat po shtypen kur rri pezull kursorin e miut, ne përmbysim ngjyrat e kufirit të lidhjeve me një pseudo-klasë. Për një efekt shtesë klikimi, vendosni pozicionimin relativ (CSS :relativ) dhe bëni një zhvendosje me një piksel lart (CSS :-1px).
3. Epo, për ta bërë gjithçka absolutisht të bukur, ne vendosim ngjyrën e tekstit dhe sfondit të lidhjeve nën kursorin pak më të errët se ato të zakonshme. Gati.

Në këtë shembull, ne do të krijojmë lidhje me ikona që do të përmbajnë jo vetëm imazhe të këtyre ikonave, por edhe tekst nën to. Sidoqoftë, në të ardhmen mund t'i ndryshoni lehtësisht dhe të lini, për shembull, vetëm ikona.

Para fillimit të punës, ne do të përgatisim disa imazhe ikonash, në dy grupe - për lidhje të rregullta dhe lidhjet nën kursorin e miut. Seti i dytë duhet të jetë i jashtëm i ndryshëm nga i pari, tek ne kjo shprehet në paletën e ngjyrave.

Përshkrimi i shembullit

1. Për të shkurtuar kodin, ne përdorim dy klasa në lidhje - "lidhje" (me veti të përbashkëta) dhe "imazh", "audio", "video" (personale për secilën lidhje). Kjo pikë përshkruhet në detaje në klasat Referenca CSS.
2. Ikonat tona kanë përmasa 50x50 piksele dhe do të jenë të pranishme në lidhjet si sfond (CSS), të cilat do t'i përqendrojmë në krye (50% 0) dhe do ta parandalojmë atë të përsëritet (pa përsëritje).
3. Ne shtojmë mbushje (CSS) në lidhje në mënyrë që teksti në lidhje të mos përshtatet me skajet. Në të njëjtën kohë, ne e bëjmë dhëmbëzimin e sipërm të barabartë me lartësinë e ikonave në mënyrë që teksti të mos mbivendoset me to, sepse ikonat tona janë sfondi.
4. Nëse ka shumë pak tekst në lidhje, atëherë imazhet e ikonave do të priten në anët. Për të parandaluar që kjo të ndodhë, ne vendosim lidhjet në një gjerësi minimale (CSS) në mënyrë që ajo të jetë të paktën e barabartë me gjerësinë e ikonave. Në rastin tonë, duhet të marrim një gjerësi minimale prej 50 px, por e vendosim në 40 px, pasi do të shtohen edhe 10 px të tjera për shkak të mbushjes anësore.
5. Për të funksionuar gjerësinë minimale, ne i konvertojmë lidhjet në blloqe inline (CSS: inline-block).

IE6 do të duhet të "kurojë" pak:

1. IE6 nuk e kupton veçorinë e gjerësisë minimale, por e interpreton veçorinë CSS si një gjerësi minimale. Prandaj, ne përdorim një të thjeshtë për të hak e cila do ta rregullojë këtë problem.

Në këtë shembull, ne do të rrumbullakojmë qoshet e lidhjeve duke përdorur një nga metodat kënde rrumbullakimi, përshkruar në nënseksionin vijues. Ne nuk do ta shqyrtojmë opsionin duke përdorur CSS 3, pasi gjithçka është shumë e thjeshtë atje, por do të ishte më mirë të bëni rrumbullakime duke përdorur imazhe.

Për ta bërë këtë, së pari do të presim disa imazhe bosh në dy grupe - për lidhjet e rregullta dhe lidhjet nën kursorin. Për ne, do të ndryshojë në praninë / mungesën e hijeve në imazhe.

pozicionim absolut*/ krye: 0; /* zhvendosja e sipërme zero */ ) .links:para (përmbajtja: url("images/left_bok.png"); /* imazhi në anën e majtë */ majtas: 0; /* zhvendosja zero majtas */ ) .links:hover: përpara ( përmbajtja: url ("images/left_bok_hover.png"); /* imazhi i anës së majtë nën kursorin e miut */ ) .links:after ( përmbajtje: url ("imazhe/right_bok.png"); /* imazh e anës së djathtë * / djathtas: 0 /* zhvendosja zero në të djathtë */ ) .links:hover:after ( content: url("images/right_bok_hover.png"); /* imazhi i anës së djathtë nën miun; kursori */ )

Përshkrimi i shembullit

Ne nuk do të ndalemi në vetë teknologjinë e rrumbullakosjes nëse është e nevojshme, mund të lexoni në lidhje me të në seksionin përkatës të faqes.

1. Duke përdorur veçorinë CSS :inline-block ne krijojmë lidhje blloqe inline. Në veçanti, kjo është e nevojshme në mënyrë që ne t'u japim lidhjeve një lartësi të saktë që përputhet me lartësinë e imazheve.
2. Hiqni nënvizimin dhe vendosni tekstin në qendër (CSS: qendër). Në përgjithësi, në rastin tonë nuk është e nevojshme të përqendroni tekstin, pasi lidhjet përshtaten me madhësinë e tekstit në to dhe thjesht nuk ka ku të rreshtohet. Por nëse keni nevojë të rrisni gjerësinë e lidhjeve (për shembull, deri në 150 px), atëherë kjo shtrirje do të jetë e dobishme.
3. Për të ndryshuar pamjen e lidhjeve kur ato janë nën kursorin e miut, ne shtojmë përzgjedhës shtesë në stilet me një pseudo-klasë CSS, në të cilën tregojmë pjesët tona të imazheve, por pa hije.

Për IE6 dhe IE7 ne lidhim stile shtesë duke përdorur komente të kushtëzuara, por ne e ndryshojmë pak vetë kodin CSS dhe e bëjmë atë të ndryshëm nga ai që përdoret mënyra për të rrumbullakosur qoshet:

1. Thelbi i ndryshimit është se me ndihmën e shprehjes ne integrojmë të njëjtat dy etiketa brenda lidhjeve, por vetëm pa atributet që përmbajnë stile. Në vend të kësaj, ne shtojmë klasat "left_bok" dhe "right_bok" te etiketat, shtojmë stile për to dhe i shkruajmë më poshtë. Këto stile janë pothuajse saktësisht të njëjta si në kodin kryesor CSS, por këtu të gjitha imazhet përdoren si sfond i etiketave.

Qoshet e rrumbullakosura të lidhjeve (opsioni dy)

Le të shohim një shembull tjetër të rrumbullakimit të qosheve të lidhjeve, por duke përdorur katër imazhe të veçanta qoshe.

Përshkrimi i shembullit

Edhe këtu nuk do të flasim për vetë rrumbullakimin, por vetëm do të përvijojmë pikat dalluese.

1. Duke përdorur veçorinë CSS :inline-blok, ne i konvertojmë lidhjet në blloqe inline. Pastaj heqim nënvizimin prej tyre, shtojmë një kornizë dhe rreshtojmë tekstin në qendër.
2. Meqenëse pseudoelementet me të cilët rrumbullakojmë qoshet janë të vendosura brenda lidhjeve, përmbajtja e tyre është gjithashtu e përqendruar dhe, për rrjedhojë, qoshet e figurës të shtuara nga vetia CSS nuk vendosen në qoshe siç na duhen. Për ta rregulluar këtë, ne i shtojmë :left, duke kthyer vlerën që shfletuesit përdorin si parazgjedhje.

Nënvizoni për elementët e bllokut si etiketa

mund të bëhet në dy mënyra. Për shembull, vendosni rreshtin nën tekst në të gjithë gjerësinë e bllokut, pavarësisht nga vëllimi i tekstit. Dhe gjithashtu nënvizoni vetëm tekstin. Më pas do të shqyrtojmë të dyja opsionet.

Rreshti nën tekst në të gjithë gjerësinë e bllokut

Për të krijuar një rresht nën tekst, duhet t'i shtoni elementit veçorinë e stilit border-bottom vlera e saj është edhe trashësia e rreshtit, stili dhe ngjyra e saj (shembulli 1).

Shembull 1. Vija me gjerësi të plotë

HTML5 CSS 2.1 IE Cr Op Sa Fx

Shembull teksti

Distanca nga rreshti në tekst mund të rregullohet duke shtuar veçorinë padding-bottom në përzgjedhësin H1. Rezultati ky shembull treguar në Fig. 1.

Nënvizoni tekstin

Për të nënvizuar vetëm tekstin, duhet të përdorni veçorinë e dekorimit të tekstit me vlerën nënvizuar, duke e shtuar sërish në përzgjedhësin H1 (shembulli 2).

Shembulli 2. Gjerësia e rreshtit në tekst

HTML5 CSS 2.1 IE Cr Op Sa Fx

Shembull teksti

Titulli i zi tërheq vëmendjen edhe pse është i zi dhe jo i bardhë.

Rezultati i këtij shembulli është paraqitur në Fig. 2.

Kur përdorni veçorinë e dekorimit të tekstit, rreshti i bashkëngjitet tekstit në mënyrë të ngurtë, kështu që pozicioni dhe stili i tij nuk mund të përcaktohen.

Ju ndoshta keni vënë re nënvizimin e animuar të lidhjeve në shumë burime dhe keni dashur të dini se si ta zbatoni atë në faqen tuaj të internetit. Për të bërë diçka të bukur css nënvizoni elementet që nuk na duhen njohuri të mëdha, apo lidhja e skripteve shtesë, gjithçka që na nevojitet është HTML standarde dhe CSS.

Variacionet e nënvizimit

Duke nënvizuar lidhjet ose çdo element tjetër, mund të gjeni gjithçka që dëshironi. Nënvizimi mund të notojë lart nga fundi, të lëvizë majtas ose djathtas, etj. Ne do të shohim një shembull më interesant, në të cilin nënvizimi do të shtrihet nga qendra në skajet, si në demonstrimin më poshtë.

demonstrim nënvizues

HTML

Së pari, le të krijojmë një element, për shembull, të marrim etiketën A. Atributi i tij nuk është i rëndësishëm për ne, sepse pjesa më e madhe e punës do t'i kushtohet stileve.

CSS

Zbatimi do të përbëhet nga dy linja që do të shtrihen nga mesi i pjesës së poshtme të elementit deri në skajet e tij.

Vetia e dekorimit të tekstit është përgjegjëse për nënvizimin, por nuk ka kuptim ta përdorim këtu, sepse zbatimi i planeve tona të animacionit në këtë rast nuk është plotësisht i rëndësishëm. Të mos harrojmë se çdo elementi mund t'i caktohet një pseudo-element::para ose::pas . Prandaj, ne do t'i vendosim të gjitha vetitë e tyre dhe do të vendosim menjëherë parametrat e mëposhtëm në lidhjen tonë:

A (ekrani: blloku i brendshëm; pozicioni: relativ; dekorimi i tekstit: asnjë; )

Kështu, ne vendosëm thjeshtimin dhe pozicionimin e bllokut në lidhje me vendndodhjen origjinale. E gjithë kjo bëhet në mënyrë që nënvizimi të mos shtrihet përtej elementit kur caktojmë pozicionimin absolut te ::para pseudoelementit. Pas kësaj, ne duhet të vendosim vendndodhjen dhe madhësinë e tij të qartë. Dhe këtu ne krijojmë menjëherë gjysmën e parë të nënvizimit.

Përgjigje:: para ( shfaqja: bllok; pozicioni: absolut; përmbajtja: ""; lartësia: 2 px; gjerësia: 0; ngjyra e sfondit: e kuqe; tranzicioni: gjerësia 0,5 sekonda lehtësi në dalje, majtas 0,5 sekonda lehtësi në hyrje majtas: 50% fund: 0;

ato. lartësia e nënvizimit do të jetë 2px, gjatësia 0, e kuqe dhe është përgjegjëse për animacionin pronë e tranzicionit. Dhe sigurisht, dhëmbëzimi i majtë është 50%, d.m.th. pika qendrore. Ne kryejmë pothuajse të njëjtat veprime me pseudoelementin ::after:

A::after( shfaqja: bllok; pozicioni: absolut; përmbajtja: ""; lartësia: 2 px; gjerësia: 0; ngjyra e sfondit: e kuqe; tranzicioni: gjerësia 0,5 sekonda lehtësi në dalje; majtas: 50%; poshtë: 0;

A: rri pezull:: përpara ( gjerësia: 50%; majtas: 0; ) a: rri pezull:: pas ( gjerësia: 50%; )

Vlen të përmendet se kjo është vetëm një mënyrë për të zbatuar këtë ide. Ju mund të bëni të njëjtën gjë duke përdorur vetëm një pseudo-element::before . Regjistrohuni në materiale dhe sugjeroni tema për artikuj.

Përshëndetje për të gjithë ata që janë të etur për njohuri të reja dhe që lexojnë blogun tim. Publikimi sot Dua të përkushtohem mjaft temë e lehtë, e cila megjithatë rregullisht ngre një numër pyetjesh nga fillestarët: "Si të hiqni ose shtoni një nënvizim në html."

Siç e dini tashmë, vetë nënvizimi mund të vendoset manualisht, por për lidhjet ato vendosen si parazgjedhje. Kjo është arsyeja pse në këtë artikull unë do t'ju kujtoj se si të vendosni nënvizimet për titujt, t'ju tregoj se si të vendosni vijën fundore në të gjithë gjerësinë e bllokut dhe gjithashtu si të veproni me formatimin standard lidhjet. Epo, le të fillojmë!

Le ta theksojmë këtë!

Ka një të veçantë etiketë e çiftuar për të nënvizuar tekstin: fjalë.

Sidoqoftë, dizajnerët profesionistë të paraqitjes përdorin mekanizmat e tabelave të kaskadës së stilit, d.m.th. css, për të dizajnuar pamjen e gjithçkaje. Dhe është e drejtë. Kjo qasje ndan shënimin nga stilimi dhe e bën formatimin fleksibël dhe të përshtatshëm. Për më tepër, është më e lehtë për të kapur gabimet (gabimet) në kod.

Për nënvizim përmbajtjen e tekstit Vetitë e mëposhtme përdoren kryesisht: kufiri Dhe tekst-dekorim.

Elementi kufiriështë përgjegjës për vendosjen e një kornize rreth bllokut të specifikuar, dhe gjithashtu ju lejon të vendosni trashësinë e linjës dhe stilin e saj.

Kjo njësi gjuhësore është mjaft fleksibël, pasi mund të specifikoni formatimin për anët individuale të kufirit. Kjo arrihet duke përdorur vetitë:

1. kufiri-drejtë(në të djathtë)
2. kufiri-krye(siper)
3. kufiri-majtas(majtas)
4. kufiri-fund(poshtë)

Gjithashtu duke përdorur kufiri ju mund të vendosni:

• pika ( me pika)
• me pika ( i thyer)
• lineare ( të ngurta)
• dyfish ( dyfishtë)
• kornizë vëllimore e blloqeve ( brazdë,futurkurriz dhefillimi)

Mos harroni se gjithmonë mund të përsërisni cilësimet e stilit të bllokut prind duke përdorur fjalën kyçe trashëgojnë.

Tani le të diskutojmë pronën gjuha css tekst-dekorim. Ky artikullështë përgjegjës për dekorime shtesë të tekstit.

Kjo perfshin:

1. ndezje ( pulsoj)
2. rreshti sipër tekstit ( mbivendosja)
3. objekte të kryqëzuara ( linjë-përmes)
4. trashëgimia e stilimit ( trashëgojnë)
5. anulimi i të gjitha dekorimeve shtesë ( asnje)
6. nënvizimi që na nevojitet ( nënvizojnë)

Është koha për të praktikuar

Tani dua që ju të konsolidoni njohuritë e fituara dhe të provoni praktikisht shembullin që dhashë kodi i programit. Për ata që e njohin këtë temë, kjo do të jetë gjithashtu e dobishme. Siç e dimë të gjithë: "Përsëritja është nëna e të mësuarit!"

Ky kod zbaton një stilizim të modifikuar të lidhjeve, dhe gjithashtu vendos nënvizimin e titullit në gjerësinë e plotë të bllokut.

Le ta titullojmë tekstin me një titull të nënvizuar

Me këtë shënim, e përfundoj këtë botim edukativ. Ajo mbulon gjithçka mjetet e nevojshme për të theksuar përmbajtjen e tekstit, duke ditur se cilat mund të krijoni opsionet tuaja të dizajnit për faqet e internetit.

Mos harroni të bashkoheni në radhët e pajtimtarëve të mi, sepse ka ende shumë interesante dhe tema të dobishme, dhe gjithashtu ndani lidhjen e blogut me miqtë tuaj. Mirupafshim!

Përshëndetje, Roman Chueshov