Hullámos CSS vonal. Stílusok Underscore az interneten

A szerzőtől: A linkek aláhúzásának stilizálása meglehetősen bonyolult foglalkozás, és folyamatosan elfelejtem, hogy milyen módszer alkalmas egy vagy másik helyzetben. Szerencsére Jameson segít nekünk gyorsan megérteni ezt a cikkében.

Sok módja van az aláhúzás stilizálására. Emlékszel a cikkre "Hozzon létre egy aláhúzás utalást a közegre". A médium nem próbált valamit csinálni a kimenő keretektől, csak vonzó aláhúzást kívánnak létrehozni a szövegben.

Vékony, fekete aláhúzás az alacsonyabb jegyzetekkel rendelkező betűkkel szembeni szóközökkel - a Marsin Vitchery munkája a cikkből hozza létre a közepes hangsúlyt.

Jó szabvány aláhúzás, amely szintén jó méretű, és kihagyja a betűk alsó részeit. Sokkal jobb, mint a legtöbb alapértelmezett böngészőben. Mivel kiderült, közepes ütközött sok problémával az úton. És még két évvel később, mégis a hangsúly jó stilizálása sok problémát okoz.

Cél

Miért ne használja a szöveges dekorációt: aláhúzás? Ha a tökéletes forgatókönyvről beszélünk, az aláhúzásnak kell lennie:

pozíció az alapvonal alatt;

hagyja ki a betűk alsó távoli részeit;

változtassa meg a színt, vastagságot és stílusokat;

menjen egy új stringhez;

dolgozzon bármilyen háttérrel.

Úgy vélem, hogy mindezeket kiemelhetjük, de tudom, hogy tudom, nincs intuitív módja annak, hogy megoldja ezeket a feladatokat a CSS-ben.

Megközelít

Tehát milyen módszerekkel rendelkezünk a rendelkezésünkre, hogy aláhúzzuk a szöveget? Emlékszem a következőkre:

szöveges dekoráció;

háttérkép;

Svg szűrők;

Aláhúzás.js (vászon);

szöveges dekoráció- *

Menjünk az egész listán, és vegyük figyelembe az egyes megközelítések minden előnyét és hátrányát.

Szöveges dekorációs tulajdonság

A szövegdekorációs tulajdonság a legegyszerűbb módja az aláhúzásnak. Csak egy tulajdonságot kell alkalmaznia. A kis szövegben egy ilyen vonal normálisan néz ki, de érdemes növelni a betűméretet, és már ügyetlen.

A TEXT DECORATION tulajdonság legnagyobb problémája a testreszabás hiánya. A vonal a szöveg betűkészletének színét és méretét használja, amelyre használatra van szükség, és nincsenek keresztböngésző módja a stílusok megváltoztatására. Egy kicsit később, beszéljünk részletesebben ezen a tulajdonságban.

profik

csak használja;

az alapvonal alatt található;

kihagyja a Safari és az iOS alapértelmezett betűk alsó távoli részeit;

átugrik egy új karakterláncra;

bármilyen háttérrel működik.

Mínusz

nem hagyja ki a betűk alsó részének kiterjesztését más böngészőkben;

lehetetlen megváltoztatni a színt, vastagságot és stílusokat.

Határ alsó tulajdonság

A határ alsó tulajdonsága a sebesség és a testreszabás jó egyensúlya. Ez a megközelítés Bizonyított CSS keretekTehát könnyen megváltoztathatja a színt, vastagságot és stílusokat. Ez úgy néz ki, mint egy határ alsó tulajdonság az inline elemeken:

A legnagyobb mínusz, hogy milyen messze van az aláhúzás a szövegből. Az aláhúzás a betűk alsó részei alatt található. Ez a probléma Megoldódnak, ha egy elemet inline-blokk és csökkenti a vonalmagasságot, de az új vonalakba való ugrás képessége elveszik. Jól illeszkedik az egyes vonalakhoz, de nem több.

Ezenkívül szöveges árnyék segítségével elrejtheti az alsó fúvókán lévő vonal részeit. Ebben az esetben a háttérszínt utánozni kell, ami azt jelenti, hogy a módszer csak homogén háttereken működik. A gradiensek és képek nem felelnek meg.

A ebben a pillanatban 4 tulajdonság van az aláhúzás stilizálására. Sokkal jobb, mint a szöveges dekoráció.

profik

használhatja az átmeneti tulajdonságot és animálja a színt és a vastagságot;

alapértelmezés szerint új karakterláncokra ugrik, ha az elem nincs inline-blokk;

Mínusz

a vonal nagyon messze van, és nehéz mozgatni;

túl sok szükségtelen tulajdonságot kell használni, hogy hangsúlyozzák a jól néz ki;

szegény szövegválasztás, ha szöveges árnyékot használ.

Doboz-árnyék tulajdonság

A doboz-árnyék-ingatlan két belső árnyékkal aláhúzza a téglalapot, és a második elrejti. Ez azt jelenti, hogy a módszer megfelelő működéséhez homogén háttérre van szükség.

Ugyanez a trükk a szöveges árnyékkal, hogy szimulálja a betűk alsó végét. Ha a vonal színe eltér a szövegtől, vagy elég vékony, akkor nincs probléma, mivel ez történik a szöveges dekorációval.

profik

az alapvonal alá helyezhető;

a szöveges árnyék segítségével kihagyhatja a hívásokat;

megváltoztatható szín és vastagság;

Új vonalakra ugrik.

Mínusz

lehetetlen megváltoztatni a stílusokat;

nem működik az összes háttérrel.

Háttérkép

A háttérkép tulajdonságát legjobban megoldja a feladataink, és nagyon kevés mínusz van. Az ötlet az, hogy létrehoz egy képet lineáris gradiens és háttérpozícióval, amelyet a vízszintes tengely mentén megismételte a szöveges húrok mentén. Az elemnek megjeleníteni kell: Inline;

Az alábbi demó nem használ lineáris gradientált. A meredek hatás létrehozásához használhatja a képet.

profik

az alapvonal alatt található;

az alsó hívásokat szöveges árnyék segítségével hagyhatja ki;

lehetőség van megváltoztatni a színt, vastagságot (még a polpixel) és a stílusokat;

felhasználói képekkel működik;

új vonalakra ugrik;

működik bármilyen háttérrel, ha nem használja a szöveges árnyékot.

Mínusz

a kép mérete különböző módon változhat különböző engedélyek, böngészők és növelés szintjén.

SVG szűrők

Ezzel a módszerrel játszottam. Hozzon létre egy INLAAIN SVG szűrőelemet, amely egy vonalat rajzol, és kibővítheti a szöveget, hogy eldobja azokat a vonal részeit, amelyeknek átláthatónak kell lenniük. A szűrő azonosítóját hozzárendelheti, és a CSS-ben található a szűrő: URL ('# svg-aláhúzás) segítségével.

Mi a plusz - a szűrő átlátcsontot ad hozzá anélkül, hogy a szöveg árnyékára támaszkodik. Vagyis kihagyhatja a betűk alsó golyóit bármilyen háttéren, beleértve a gradienseket és a képeket! Az alábbi példa csak egy szöveges karakterláncmal működik, ezért legyen óvatos.

És így úgy néz ki, mint a krómozott és a Firefox:

IE, Edge és Safari támogatás, problémák merülnek fel. A CSS-t nehéz tesztelni az SVG szűrők támogatását. Használhatja a @supports szabályt a szűrőn, de így csak a hivatkozás munkáját ellenőrizze, és nem az alkalmazott szűrőt, vagy sem. Az én útom nagyon durván dolgozik a böngészőkkel, így kétszeresen óvatos.

profik

az alapvonal alatt található;

kihagyja az alsó feliratokat;

megváltoztatható szín, vastagság és stílusok;

bármely háttéren dolgozik.

Mínusz

nem ugrik át az új vonalakra;

nem működik az IE, az Edge és a Safari-ban, de a szöveges dekorációt Folbackként adhatja meg. A Safari aláhúzás maguk is nagyszerűnek tűnnek.

Aláhúzás.js (vászon)

Az aláhúzás.js egy csodálatos könyvtár. Lenyűgöző vagyok, hogy Gobing Zhang tudott a JS-vel és a részletekre. Ha még nem láttad a technikai demo aláhúzást, állj meg egy percre, és nézd meg. A hálózatnak csodálatos kilenc perces teljesítménye van a munka elveiről, gyorsan eltöltök. Az aláhúzás vászon segítségével készült. Teljesen új megközelítés, amely meglepően jól működik.

A vonzó név ellenére ez csak egy technikai demó. Ez az, hogy nem fogod azonnal elhelyezni a könyvtárat a projektbe, anélkül, hogy egész halom változás lenne.

Ezt a könyvtárat csak a koncepció bizonyítékaként kell megemlíteni. A vászonnak lehetősége van a gyönyörű, interaktív aláhúzás kialakítására, de a megfelelő munkához további JS-kódot kell írnia.

Szöveges dekoráció- * tulajdonságok

Ne feledje, azt mondtam, hogy egy kicsit később elemezzük valamit részletesebben? Most ez megy. A szöveges dekorációs tulajdonság önmagában jól működik, de több kísérleti tulajdonságot adhatunk hozzá jobb nézet:

szöveges dekoráció-szín

szöveges dekoráció-Skip

szöveges dekoráció stílus

Ne örülj előre az idő előtt, tudod a böngészők támogatásáról.

Szöveges dekoráció-színes tulajdonság

A Text-dekoráció-Color tulajdonság lehetővé teszi, hogy módosítsa a szövegét aláhúzás elkülönítve a szöveg színét. A tulajdonságok is jó támogatást nyújtanak a böngészőkben. A Firefoxban és a Safari előtaggal működik. Van a mínusz - ha nem tisztítja a vonalat a felszólítások körül, a szafari a szöveg tetején található. Firefox:

Tulajdonság szöveges dekoráció-Skip

A szöveges dekoráció-átugrási tulajdonság felelős az alsó hívások kihagyásáért az aláhúzott szövegben.

Az ingatlan nem szabványos, és jelenleg csak Safariban működik. Más böngészőkben dolgozni, amelyet az előtag-webkit-. A Safari-ban ez a tulajdonság alapértelmezés szerint engedélyezett, ezért az aláhúzás az alacsonyabb zajokat is kihagyja a helyszíneken, ahol nincs megadva.

Ha normalizálódsz, tudnod kell, hogy legújabb verziók Húzza ki a tulajdonságot a normál működéshez minden böngészőben. Ha vissza szeretné térni ezeket a szinte varázslatos aláhúzásokat, engedélyeznie kell ezt a tulajdonságot.

Szöveges dekoráció stílusú tulajdonság

A szöveges dekorációs stílusú ingatlan ugyanazt az aláhúzást kínálja, mint a határ-stílusú tulajdonság, de hozzáadja az újfajta - hullámos. Lehetséges értékek:

Most a szöveges dekorációs stílusú tulajdonság csak a Firefoxban működik, a képernyőkép az alábbiakban látható:

Egy monokromatikus hangsúlyt néz ki?

Mi a baj?

A szöveges dekoráció tulajdonságai - az intuitívabbak az intuitívabbakhoz képest, mint a styling hangsúlyozásai. Ha azonban eltérő pillantást vet a korábban bemutatott követelményekre, meg lehet jegyezni, hogy ezeknek a tulajdonságoknak a segítségével lehetetlen megváltoztatni a vastagságot és a pozíciót. Egy kis tanulmány után találtam ezt a két tulajdonságot:

szöveg aláhúzás-szélesség

szöveg aláhúzás-pozíció

Úgy tűnik, hogy ezeket a tulajdonságokat a CSS korai változatából dobták ki az érdeklődés hiánya miatt. Nem alkalmazták őket. Hé, nem vagyok hibáztatom erre.

következtetések

Tehát hogyan lehet a legjobb hangsúlyozni a szöveget? Mindez különböző tényezőktől függ.

Egy kis szövegért javaslom a szöveges dekorációt és a kísérleti szöveges dekoráció-átugrást, remélve, hogy ez fog működni. A legtöbb böngészőben úgy néz ki, hogy úgy néz ki, de mindig az volt, hogy az emberek nem figyeltek rá. Ha elég türelmes, van egy esély, hogy rövid idő alatt az összes aláhúzásod jól néz ki, és nem kell semmit megváltoztatnia.

A fő szöveghez használja a háttérképet. A módszer működik, gyönyörűnek tűnik, és ezért van Sass Mixins. Ha az aláhúzás finom, vagy a szín eltér a szövegtől, valószínűleg kihagyhatja a szöveges árnyék módszert. Az egyik sorban lévő szöveghez használja a határ alsó részét és más tulajdonságokat.

És hagyja kihagyni a betűk betűit a gradiens háttérrel vagy képeken, próbálja meg használni az SVG szűrőt. Vagy egyszerűen ne keverje össze az ilyen háttereket aláhúzással. A jövőben, amikor a böngészők támogatása javul, használhatja a szöveges dekoráció * tulajdonságokat.

Leírás

Hozzáadja a szövegtervet az aláhúzás formájában, átkelés, vonalak a szöveg felett és villog. Ugyanakkor többféle stílust is alkalmazhat, az értékeket a téren keresztül.

Szintaxis

szöveges dekoráció: [Blink || Vonalon || Túlvonal || Aláhúzás] nincs | örököl.

Értékek

Villog a villogó szöveg. Ez a szöveg rendszeres időközönként, másodpercenként egyszer eltűnik, majd ugyanazon a helyen jelenik meg. Ezt az értéket jelenleg nem támogatja a böngészők és a CSS3-ban elítélték, ajánlott animációt használni cserébe. A vonal átkelt szöveget hoz létre (példa). Túllépési vonal áthalad a szöveg felett (példa). Az aláhúzás beállítja az aláhúzott szöveget (példa). Egyik sem törli az összes hatást, beleértve a referencia aláhúzását, amely alapértelmezett. Az örökös érték öröklődik a szülőtől.

Html5 css2.1, azaz CR OP SA FX

Hadászati \u200b\u200btámadás

Objektummodell

document.getelementbyid ("Elementid") .style.textDecorage

document.getelementbyid ("Elementid") .style.textdecorageblink

document.getelementbyid ("Elementid") .style.textDecorationLinohough

document.getelementbyid ("Elementid") .style.textDecorationNone

document.getelementbyid ("Elementid") .style.textdecorageRemene

document.getelementbyid ("Elementid") .style.textDecorageunderline

Böngészők

Az Internet Explorer a 7.0-es verzió előtt nem támogatja az örökös értéket. Az IE7 vonalon keresztüli értékkel kapott vonal magasabb, mint más böngészőknél; IE8-ban ez a hiba rögzítve van.

Lehetővé teszi, hogy a HTML alacsonyabb (aláhúzás), a felső (túlvonalú), a szöveg (áthaladó), stb. Kompatibilis ez a chip az előzővel, és fog működni:

A második sorban megmutatjuk, hogy mindent egy sorban rögzítenek szöveges dekorációval.

szöveges dekoráció-stílus - Szöveg aláhúzás

Az opció beállítja a / referencia dekoratív vonal megjelenését. Az új CSS-ajánlásokban hullámos és kettős értékeket adtunk hozzá, most csak 5:

• szilárd tömör vonal;
• kettős - kettős (a fenti példához);
• pontozott - pontok sorrendjéből áll;
• szaggatott - lehetővé teszi, hogy szaggatott aláhúzás css;
• hullámos - látványos hullámos vonal.

szöveg aláhúzás-pozíció - A CSS aláhúzás helyezése

Ennek a tulajdonságnak a segítségével ellenőrizheti a vonal pozícióját a Glyph betűtípushoz képest.
Összesen 4 lehetőség áll rendelkezésre:

• auto - a szöveg lehetséges szövegének megfelelően helyezkedik el;
• alatt - a betűtípus legalacsonyabb határán;
• balra és jobbra - balra / jobbra a függőlegesen megjelenített bejegyzésekhez.

Itt van a vizuális különbség az alsó aláhúzott szöveg között az Alul és Auto:

A különbség, azt hiszem, teljesen nyilvánvaló.

szöveges dekoráció-Skip - Elemek eltávolítása az elemek számára

Az opció használatával törölheti (SKIP) néhány elemet Html karakterlánc. Ahhoz, hogy jobban megértsük a szóközök, objektumok, dobozok díszítésének, élek érvényes értékeit, a festéket, a képet megismételjük az utolsó megjegyzésből:

Vagyis például a tinta segítségével, akkor az alacsonyabb aláhúzott CSS-t végezheti, amely nem haladna át a karakterekkel. Az objektumok értéke lehetővé teszi, hogy kihagyja az inline elemeket (inline-blokk) - beszúrási span, és a szilárd vonal megszakad a megfelelő helyen:

A box-dekoráció, terek, élek paraméterei sokkal rosszabbak a böngészők által, így az eredményük néha eltér a vártattól. Itt van egy kompatibilitási / támogatási állapot a szöveges dekoráció a cikk írásakor:

További zsetonok az aláhúzáshoz

A kezdőknek a felhasználók gyakran kérdéseket tesznek fel a témában, ezért úgy döntöttünk, hogy figyelembe veszik őket. Az általános példa a magyarázat után nagyon alul van.

Az Underscore Referencia eltávolítása

v: Hover (szöveges dekoráció: aláhúzás;)

Az alábbi példák lehetővé teszik, hogy megértsük a munka logikáját, amikor lebegnek: vagy kezdetben jelezed CSS aláhúzás Linkeket, majd távolítsa el, hogy lebegjen, vagy fordítva.

Ha vannak más kérdések a témában, kérdezze meg őket a megjegyzésekben. Megpróbáljuk később megfontolni, vagy javasoljuk a válaszokat. A legfontosabb dolog ebben az ügyben a gyakorlat - próbálja hozzá különböző tulajdonságokat a szöveges dekorációs opcióhoz közvetlenül a példákban, vagy hozzon létre saját tesztfájlot. Reméljük, hogy a szöveg aláhúzza és a CSS / HTML linkjei világossá vált.

A hangsúly más, illetve a teremtés módszerei eltérnek egymástól. Az alábbiakban számos népszerű.

Szöveg díszítéssel

Az aláhúzással ellátott szöveges dekorációs tulajdonság hangsúlyt fektet a szövegre; Ez a fajta hangsúly figyelhető meg az alapértelmezett hivatkozásokhoz. Az így létrehozott vonal megegyezik a szöveg szélességével, és ugyanolyan színű lesz, mint maga a főcím. Megváltoztathatja a színes vonalat a szöveges dekorációs színű tulajdonságon keresztül. Az 1. példa a szöveges dekoráció használatát mutatja az elemre

.

1. példa szöveges dekorációval

A példa eredményét az 1. ábrán mutatjuk be. egy.

Ábra. 1. A szöveges dekorációval létrehozott sor típusa

Az IE és az EDGE böngészők nem támogatják a szöveges dekorációs színű tulajdonságot.

A határ alján található

Ingatlan határ alsó. Hozzáadja az adott vastagság, a szín és a stílus vonala alatti elemet. Az ilyen vonal a teljes rendelkezésre álló szélességet a fejléc szövegének hossza ellenére (2.

Ábra. 2. A határ alján létrehozott vonal megtekintése

A vonalról a szövegre való távolság az ingatlan használatával állítható be. padding alsó Amint a 2. példában látható.

2. példa A határ alsó részével

Kulturális beszéd törvény a XXI. Században

Valójában a mítosz-fúpos szöveges eszköz szemlélteti a diskurzust, és megadja neki a hangját, saját karakterét.

A vonal szélessége a szöveg, elegendő ahhoz, hogy a fejlécet szoros blokk elemre fordítsa, ha egy tulajdonságot ad hozzá a H2 választóhoz kijelző Inline-blokk értékkel.

Használat :: Utaster és tartalom

Mesterséges vonalat is készíthet a tulajdonságok kombinációján keresztül. tartalom és pszeudo-elem :: utána. . Csak a cím után csak üres pszeudo-elemet fognak visszavonni, és ennek a pszeudo-elemnek a megjelenése más tulajdonságokkal határozható meg. Ábrán. A 3. ábra hasonló vonalat mutat.

Ábra. 3. A következők: :: után

Az ilyen vonal pozíciója a szöveghez képest az ingatlanon keresztül történik. alsó Negatív érték, vonal színe a tulajdonságon keresztül háttér. . Tény, hogy nem egy vonalat, hanem téglalap alakú blokkot, így a háttér kitöltését használjuk (3. példa).

3. példa Használat :: Után

Kulturális beszéd törvény a XXI. Században

Valójában a mítosz-fúpos szöveges eszköz szemlélteti a diskurzust, és megadja neki a hangját, saját karakterét.

Van egy csomó különböző módon aláhúzás. Emlékszel a MARSINA VICARI "Crafting Link aláhúzása" cikkre. A közepes fejlesztők nem próbálnak valami őrületet tenni, csak egy gyönyörű vonalat akarnak létrehozni a szöveg alatt.

Ez a legegyszerűbb aláhúzás, de a megfelelő méretű, és nem fedi át a betűk távoli elemeit. És ez határozottan jobb, mint az alapértelmezett aláhúzás a legtöbb böngészőben. A közegnek szembe kellett néznie a nehézségeket az interneten való stílus elérése érdekében. Két évvel később még mindig nehéz lesz egy gyönyörű aláhúzás.

Cél

Mi a baj a szokásos szöveges dekorációval: aláhúzás? Ha a tökéletes forgatókönyvről beszélünk, az aláhúzásnak a következőket kell tennie:

• az alapvonal alatt;
• távolítsa el a távoli elemeket;
• változtassa meg a színt, a vastagságot és a stílusvonalat;
• munka többsoros szöveggel;
• munka bármely háttéren.

Úgy vélem, hogy ezek ésszerű követelmények, de amennyire tudom, nincs intuitív módja ennek elérése érdekében a CSS segítségével.

Megközelít

Így ez az különböző módszerekAmelyeket az interneten lévő aláhúzás megvalósíthatunk?

Itt vannak azok, akiket figyelembe vettem:

• szöveges dekoráció;
• határ alsó;
• doboz árnyék;
• háttérkép;
• svg szűrők;
• Aláhúzás.js (vászon);
• szöveges dekoráció *.

Elemezzük ezeket a módszereket egyenként, és beszélgetünk mindegyik előnyéről és hátrányairól.

szöveges dekoráció.

a szöveges dekoráció a legnyilvánvalóbb módja az aláhúzásnak. Egy tulajdonságot alkalmazol, és ez elég. Kis betűméretekben nagyon jól néz ki, de növeli a betűméretet, és egy ilyen aláhúzás kezdeményeznek.

A szöveges dekoráció legnagyobb problémája a beállítások hiánya. A szöveg színére és betűméretére korlátozódik, és nincsenek kereszt böngésző módja annak megváltoztatásához. Még mindig részletesebben beszélünk róla.

• könnyen kezelhető;
• az alapvonal alatt;
• alapértelmezés szerint a Safari és az iOS alsó eltávolító elemei;
• hangsúlyozza a többsoros szöveget;
• bármely háttéren dolgozik.

• nem hagyja ki az alsó távoli elemeket minden más böngészőben;
• nem teszi lehetővé a szín, vastagság vagy stílusvonal megváltoztatását.

határ alsó.

a határ alja jó egyensúlyt biztosít az egyszerűség és a testreszabhatóság között. Ez a megközelítés a régi jó tulajdonságú CSS-t használja a határon, ez azt jelenti, hogy könnyen megváltoztathatja a színt, vastagságot és stílusokat.

Ez az, hogy a határ alja úgy néz ki, mint a kisbetűk.

A fő hátránya az aláhúzás távolsága a szövegből, teljes mértékben alacsonyabb, mint az eltávolító elemek. Megjavíthatja azt az inline-blokk tulajdonságok és a line-magasság csökkentésével, de akkor elveszíti a szöveg betakarításának képességét. Jó az egyes vonalakhoz, de több sem alkalmas bárhol.

Továbbá, tudjuk használni szöveges árnyék átfedés része a vonal mellett a helyettesítés elemek, utánozva azt ugyanolyan színű, mint a háttér. Ez az, hogy ez a technika csak egy egyszerű monokróm háttéren működik, gradiensek, minták vagy képek nélkül.

Jelenleg már használjuk az egész négy tulajdonságot egy sor tervezésére. Sokkal több munka, mint a szöveges dekoráció hozzáadása.

• átugorhatja a távoli elemeket szöveges árnyék segítségével;
• megváltoztathatja a színt, a zsírtartalmat és a stílusvonalat;
• lehetővé teszi, hogy átmeneteket és animációkat használjon a színek és a zsírok;
• működik többsoros szöveggel, ha az inline-blokk értéket nem alkalmazzák;
• bármely háttéren dolgozik, ha nem használja a szöveges árnyékot.

• túl alacsony, és komplex módszerrel mozog;
• számos további tulajdonságot használnak a megfelelő működéshez;
• ha szöveges árnyékot használ, a szöveg kiválasztása csúnya.

box-árnyék

a doboz-árnyék két belső árnyékot von maga után: egy téglalapot hoz létre, és a második elrejti. Ez azt jelenti, hogy szüksége van rá monofonikus háttér Annak érdekében, hogy dolgozzon.

Ugyanazt a trükköt használhatja a szöveges árnyékkal, hogy kitöltse az áthaladást az aláhúzás és a távoli elemek között. De ha az aláhúzás színe eltér a szöveg színéről -, vagy egyszerűen nagyon vékony, a vonal nem fog szembesülni a távoli elemekkel, mint a szöveges dekoráció használata esetén.

• lehetővé teszi a vonal színét és vastagságát;
• többsoros szöveggel működik.

• nem teszi lehetővé az aláhúzás stílusát;
• nem működik bármilyen háttéren.

háttérkép.

A háttérképes módszer a legközelebb van vágyunkhoz, és minimális hiányosságai vannak. Az ötlet a lineáris gradiens és a háttérképet használva olyan kép létrehozásához, amely megismétli a szövegsor alatt.

A megközelítés működéséhez szükséges, hogy a szöveg normál üzemmódban jelenjen meg: inline; .

A következő opció lineáris gradiens nélkül történik, a hatásokhoz hozzáadhatja a háttérképet.

• az alapvonal alatt helyezhető el;
• kihagyhatja a távoli elemeket a szöveg árnyékának rovására;
• egyéni képekkel működik;
• néhány szöveges vonalat tartalmaz;
• működik bármilyen háttéren, ha nem alkalmazza a szöveg-árnyékot.

• a kép mérete a képernyőfelbontás, a böngésző és a zoom függvényében változhat.

Szűrők svg.

Nagyon sokat játszottam. Létrehozhat egy SVG kisbetűs szűrőt, amely egy vonalat rajzol, majd kiterjeszti a szöveget, hogy maszkoljon a vonal egy részét, amelyet átlátszani akarunk. Ezután beállíthatja az azonosító szűrőt, és megközelítőleg a CSS-ben található, így a szűrő: URL ('# svg-aláhúzás).

Ennek a megközelítésnek az az előnye, hogy az átláthatóság a szöveg-árnyék alkalmazása nélkül érhető el, azaz a távoli elemeket bármilyen háttéren hagyjuk ki, beleértve a gradienseket és a háttérképeket! Ez csak egy külön soron működik, figyelembe vesszük.

Így néz ki, mint a krómozott és a Firefox:

Az IE, az él és a szafari támogatás problémás. Nehéz tesztelni az SVG szűrő támogatását a CSS-ben. A @supports irányelv szűrővel használhatja, de csak a szűrőhivatkozás működését ellenőrzi, de nem a szűrő munkáját. A böngésző lehetőségeinek kölcsönös meghatározásával végződő kísérleteim véget értek, ez egy módszer kézzelfogható hiánya.

• az alapvonal alatt helyezhető el;
• hiányozhat a távoli elemek;
• lehetővé teszi a szín, vastagság és stílusvonal változását;
• bármely háttéren dolgozik.

• nem működik többsoros szöveggel;
• nem működik az IE, az Edge és a Safari, de a szöveges dekorációt biztonsági másolatként használhatja, a Safari-ban méltónak tűnik.

Aláhúzás.js (vászon)

Aláhúzás.js lenyűgöző. Úgy vélem, hogy lenyűgözőnek tartom, hogy a Venten Geng a JavaScript és a Részletes Figyelembe került. Ha még nem láttál technikai demo aláhúzást, dobja el és kap egy perc múlva. Van is kilenc perces jelentés arról, hogy hogyan működik, de röviden leírom: az aláhúzás az elemek segítségével húzódik . Ez egy új megközelítés, amely meglepően jól működik.

A kihívás neve ellenére az aláhúzás.js csak technikai demó. Ez azt jelenti, hogy a kód megváltoztatása nélkül nem tudsz egyszerűen elvégezni és csatlakozni a projekthez.

Úgy döntöttem, hogy megemlítem ezt a koncepció igazolásában Lehetősége van arra, hogy kiváló interaktív hangsúlyozza, de ez teszi, meg kell írnia a JavaScriptet.

Új tulajdonságok szöveges dekoráció

Emlékszel arra, hogy megígértem, hogy beszélek a szöveges dekorációról. Eljött az idő.

Önmagában ez a tulajdonság nagyszerűen működik, de több kísérleti tulajdonságot is hozzáadhat a testreszabáshoz külső nézet aláhúzás.

• szöveges dekoráció-szín
• szöveges dekoráció-Skip
• szöveges dekoráció stílus

De ne örülj túl sok ... a böngészők támogatása - mint mindig. Ez így megy.

szöveges dekoráció-szín

A szöveges dekorációs színű tulajdonság lehetővé teszi, hogy a szöveg színétől külön-külön megváltoztassa az aláhúzás szintjét. Ennek a tulajdonságnak a támogatása jobb, mint amire számíthatnánk - a Firefoxban és a Safari előtaggal működik. Ez az, ami SNAG: Ha távoli elemei vannak, a Safari az aláhúzást a szöveg fölé helyezi.

szöveges dekoráció-Skip

A szöveges dekoráció-átugrási tulajdonság tartalmazza a távoli elemek áthaladását az aláhúzott szövegben.

Ez a tulajdonság nem szabványos, és most csak Safariban működik, az előtag -webkit előtaggal. Safari alapértelmezés szerint aktiválja ezt a tulajdonságot, így a távoli elemek mindig átkerülnek.

Ha normalizálódsz, akkor vegye figyelembe, hogy az utolsó verziók letiltják ezt a tulajdonságot a böngészők egymást követő viselkedésének kedvéért. És ha azt szeretné, aláhúzás, hogy ne befolyásolja a távoli elemeket, manuálisan kell aktiválnia.

szöveges dekoráció stílus

A Text-dekoráció-style tulajdonság ajánlatok azonos tervezési lehetőségeket, mint a border-style tulajdonság, hozzátéve, a hullámos stílus kivételével.

Itt található az elérhető értékek listája:

• szaggatott.
• pontozott.
• kettős.
• szilárd

Most a szöveges dekorációs stílusú tulajdonság csak a Firefoxban működik, itt van egy screenshot:

Mi hiányzik

A szövegdioráció tulajdonságai sorozata sokkal inkább intuitívabb, mint a többi CSS tulajdonság az aláhúzáshoz. De ha óvatosabban nézel ki, akkor nem elég ahhoz, hogy megelégedhessünk kéréseinket a vonal vastagságának vagy pozíciójának beállításához.

Egy kis tanulmány után több tulajdonságot találtam:

• szöveg aláhúzás-szélesség
• szöveg aláhúzás-pozíció

Úgy tűnik, hogy a korai CSS-tervezetekhez kapcsolódnak, de a böngészőkben soha nem valósultak meg az érdeklődés hiánya miatt.

következtetések

Tehát mi a módszer a legjobb hangsúlyozására?

Egy kis szövegért javaslom a szöveges dekorációt, optimista szöveges díszítéssel. A legtöbb böngészőben kicsit íztelennek tűnik, de a böngészők aláhúzották olyan mindig, és az emberek egyszerűen nem fognak figyelni. Plusz mindig van esély arra, hogy ha van türelme, ez aláhúzás fog soha jól néz ki anélkül, hogy te valamit változtatni, mivel ez fog történni a böngészőkben.

Alapvető szöveg esetén a háttérkép használata. Ez a megközelítés működik, jól néz ki, és van SAS keverők neki. Ön elvileg átugorhatja a szöveges árnyékot, ha az aláhúzás vékony vagy színes szöveggel jellemezhető.

-Ért különálló karakterlánc Szöveg Használja a Határ alját, valamint bármilyen további tulajdonsággal.

És ha ki kell ugrani a távoli elemeket a gradiens vagy a kép hátterében, próbálja meg használni az SVG szűrőket. Vagy egyszerűen ne használja az aláhúzás használatát.

A jövőben, amikor a böngészők támogatása jobb, az egyetlen válasz a szöveges dekoráció tulajdonságai lesznek.

Azt is javaslom, hogy figyeljen a cikkre, hogy a Benjamin Woodroff CSS hangsúlyozza a szopást, amelyben ugyanazokat a kérdéseket figyelembe veszik.