CSS teksto šešėlio ypatybė yra atsakinga už teksto šešėlio nustatymą. Labai panašus į box-shadow savybę.

CSS teksto šešėlių sintaksė

tekstas-šešėlis : X Y R spalva ;

• X - šešėlio poslinkis teksto atžvilgiu išilgai X ašies (dažniausiai nustatomas pikseliais);
• Y - šešėlio poslinkis teksto atžvilgiu išilgai Y ašies (dažniausiai nustatomas pikseliais);
• R – šešėlio spindulys (dažniausiai nurodomas px pikseliais);
• spalva - spalva (gali būti nurodyta bet kokiu formatu, žr. html spalvų pavadinimus)

Teksto šešėlių sintaksė leidžia nurodyti kelis šešėlius, atskirtus kableliais. Pavyzdžiui

teksto šešėlis : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;

Šešėlio prioritetas (kuris didesnis, kuris mažesnis) priklauso nuo konkrečios CSS versijos. CSS3 pirmasis sąrašo šešėlis dedamas pačiame viršuje, paskutinis sąraše – pačiame apačioje. CSS2 yra atvirkščiai.

Pavyzdžiai: kaip sukurti šešėlį tekstui html

1 pavyzdys. Paprastas šešėlis tekstui html

Žemiau pateikiamas paprasčiausias pavyzdys su teksto šešėliu. Čia pritaikėme abu poslinkius (X ir Y), taip pat padarėme suliejimo spindulį.

Текст с тенью

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

На странице преобразуется в следующее

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

Двойная тень

На странице преобразуется в следующее

Двойная тень

Пример №4. Вдавленные буквы у текста в html

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

На странице преобразуется в следующее

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

Пример №5. Вдавленные буквы у текста в html

Небольшой 3D текст

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.margin ="VALUE "

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

Teksto kontūras

Šiuo metodu padarytas kontūras parodytas fig. 1. Kontūras pasirodo šiek tiek neryškus, todėl tiems, kurie nori gauti aiškią liniją, yra skirtas antrasis būdas. Jį sudaro keturi ryškūs tos pačios spalvos šešėliai, jie perkeliami į skirtingus kampus vienu pikseliu (2 pavyzdys).

2 pavyzdys. Keturi šešėliai kontūrui

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Teksto kontūras

Tokio kontūro išvaizda parodyta fig. 3. Pastebima, kad kontūras yra išraiškingesnis.

Ryžiai. 3. Kontūras su keturiais šešėliais

Norėdami pridėti 3D teksto efektą, parodytą Fig. 4, vienu metu taikomi keli šešėliai, kurie vienas kito atžvilgiu pasislenka vienu pikseliu horizontaliai ir vertikaliai.

Ryžiai. 4. 3D tekstas

Asmeniškai man toks tekstas primena retro stiliaus raides ir vėlgi geriausiai tinka antraštėms, o ne tinklalapio turiniui.

Šešėlių skaičius priklauso nuo to, kiek norima „tempti“ tekstą į priekį. Didesnis skaičius padidina raidžių „gylį“, mažesnis skaičius, priešingai, sumažina trimatį. 3 pavyzdyje naudojami penki tos pačios spalvos šešėliai.

3 pavyzdys: Šešėlis trimačiui pridėti

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Dešimties kamerų šaldytuvas

Visiems šešėliams suliejimo spindulį nustatome į nulį ir tą pačią spalvą. Šešėliai skiriasi tik savo poslinkio reikšmėmis.

Teksto įspaudimas

Norint sukurti teksto reljefo efektą arba, kitaip tariant, reljefą, teksto spalva turi atitikti fono spalvą. Viena virš paviršiaus „išsikišusių“ raidžių dalis tarsi apšviesta, o kita – šešėlyje (5 pav.).

Ryžiai. 5. Reljefinis tekstas

Norėdami pridėti panašų efektą, mums reikia dviejų šešėlių – baltą šešėlį perkeliame vienu pikseliu į kairę, o tamsiai pilką žemyn į dešinę (4 pavyzdys).

4 pavyzdys: Reljefinis tekstas

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Reljefinis tekstas

Reljefas geriausiai atrodo pilkame fone, todėl efektas tinka ne kiekvienai svetainės spalvų schemai. Beje, lengva paspausti, o ne išspausti tekstą, tiesiog pakeiskite šešėlių spalvas.

Teksto šešėlis: #333 -1px -1px 0, #fff 1px 1px 0;

Švytėjimas

Švytėjimas aplink tekstą yra toks pat šešėlis, tik jis ryškus ir kontrastingas. Taigi, norėdami sukurti švytėjimo efektą, tiesiog pakeiskite šešėlio spalvą ir nustatykite norimą suliejimo spindulį. Kadangi aplink tekstą švytėjimas turi būti vienodas, šešėlio poslinkis turi būti nustatytas į nulį. Fig. 6 paveiksle parodytas skirtingų spalvų švytėjimo pavyzdys.

Ryžiai. 6. Švytintis tekstas

5 pavyzdys. Švytėjimas

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Šviesioji pusė

Tamsioji pusė

Suliejimas

Pats šešėlis yra neryškus, todėl jei paliksime tik šešėlį ir paslėpsime patį tekstą, gausime neryškias raides (7 pav.), o neryškumo laipsnį galima nesunkiai reguliuoti naudojant parametrą text-shadow.

Ryžiai. 7. Tekstas su neryškumu

Norėdami paslėpti pradinį tekstą, tiesiog nustatykite spalvą į skaidrią (6 pavyzdys). Tada šešėlio spalva veikia kaip teksto spalva, o suliejimo spindulys nustato raidžių suliejimo laipsnį.

6 pavyzdys: suliekite tekstą

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Neryškus tekstas

Šešėlis ir pseudoklasės

Šešėlio nereikia pridėti tiesiai prie teksto, ypatybė text-shadow puikiai veikia su :hover ir :first-letter pseudo-klasėmis. Dėl šios priežasties su tekstu gaunami įdomūs efektai, pavyzdžiui, kontūruota pirmoji pastraipos raidė arba nuorodos švytėjimas, kai ant jos užvedate pelės žymeklį. 7 pavyzdyje parodyta tokia technika.

7 pavyzdys: pseudoklasių naudojimas

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Nišinis projektas sulėtina tradicinį kanalą, nepaisant išlaidų. Rinkos struktūra, atsisakiusi smulkmenų, stabilizuoja rinkodaros ir pardavimų skyrių, pasinaudodama ankstesnių kampanijų patirtimi. Žinoma, prekės ženklo kūrimas spontaniškai atstumia susiliejantį PR, laimėdamas rinkos segmentą. Investicijos sinchronizuoja socialinį statusą, didina konkurenciją. Prekės ženklas natūraliai nustato paskirties vietų planą, naudodamasis ankstesnių kampanijų patirtimi.

Šioje pamokoje pristatomi keli CSS metodai, skirti sukurti skirtingus elementų kontūro efektus.

Paprastą šviesių šešėlių efektą galima pasiekti potėpiu naudojant pilką spalvą. CSS3 turi galimybę sukurti tikrą šešėlį naudojant nuosavybę dėžutė-šešėlis, tačiau paprastas būdas veiks visose naršyklėse:

Šešėlis (pamušalas: 20 tšk.; kraštinė: 1 piks. vientisas #f0f0f0; kraštinė apačia: 2 pikseliai vientisas #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; kraštinės spindulys: 5px; )

Taip pat labai lengva pasiekti įlenkto bloko efektą. CSS3 užapvalintų kampų pridėjimas sustiprina efektą:

Prispausta ( spalva: #fff; pamušalas: 20 tšk.; fonas: #111; kraštinė: 1px solid #000; kraštinė dešinėje: 1px solid #353535; kraštinė apačioje: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px)

Šis efektas labai panašus į dvigubą potėpį, kuris dažnai naudojamas vaizdams. Naudojami įtraukos ir potėpio nustatymai, todėl papildomas darbas su nustatymais ir kontūro ypatybė leidžia pasiekti nuožulnių kraštų efektą.

Img.light ( kontūras: 1 piks. vientisas #ddd; kraštinė viršuje: 1 piks. vientisas #fff; užpildas: 10 tšk.; fonas: #f0f0f0; ) img.dark ( kontūras: 1 piks. vientisas #111; kraštinė viršuje: 1 piks. vientisas #555; padding: 10px fonas: #333;

Šis efektas gali būti naudojamas meniu arba sąrašuose. Tai paprastas viršutinio ir apatinio potėpių derinys su skirtingais fono spalvos atspalviais. Reikėtų nepamiršti, kad CSS pirmo ir paskutinio vaiko parinkikliai nepalaikomi senesnėse naršyklėse. Norėdami išspręsti šią nemalonią situaciją, galite naudoti „jQuery“.

#įtraukta ul( paraštė: 20 tšk. 0; užpildymas: 0; sąrašo stilius: nėra; ) #įtraukta ul li ( kraštinė viršuje: 1 tšk. vientisa #333; kraštinė apačioje: 1 tšk. solidi #111; ) #įtraukta ul li:pirma -vaikas (kraštinė viršuje: nėra;) #įtraukta ul li:paskutinis vaikas (kraštinė apačioje: nėra;) #įtraukta ul li a (padding: 10px; ekranas: blokas; spalva: #fff; teksto dekoravimas: nėra ; ) #įtraukta ul li a:hover (fonas: #111;)

Tipografija yra mėgstamiausias interneto dizainerių žaislas. CSS turi vieną labai įdomų įrankį – tekstas-šešėlis(teksto šešėlis), kuris iš pirmo žvilgsnio atrodo gana paprastas, tačiau jo pagalba galite sukurti įsimintinus efektus, jei pasitelksite išmonę ir fantaziją.

Šešėlių pagrindai

Nuosavybė tekstas-šešėlis labai paprasta naudoti. Jį palaiko visos šiuolaikinės naršyklės ir net nenaudojant priešdėlių. Tačiau IE nėra palaikymo (netgi IE9). Galite naudoti tokius įrankius kaip Modernizr, kad padėtumėte ištraukti CSS3 efektus net senesnėse IE versijose.

Sintaksė

Norėdami sukurti teksto šešėlį, naudokite nuosavybės sintaksę tekstas-šešėlis kuris pateikiamas žemiau. Galima apibrėžti keturis parametrus: pirmieji du nustato šešėlio padėtį, trečiasis – suliejimo lygį, o ketvirtasis – šešėlio spalvą.

Tekstas-šešėlis: horizontal_offset vertical_offset blur color;

Toliau pateikiamas teksto šešėlio, nustumto dviem pikseliais žemyn ir keturiais pikseliais į dešinę, pavyzdys, sulietas trimis taškais ir nustatytas juodas esant 30 % neskaidrumui.

Teksto šešėlis: 2px 4px 3px rgba(0,0,0,0,3);

Šios nuosavybės naudojimo rezultatas atrodys taip:

Kodėl naudojamas rgba?

Apibrėžiant ypatybę, nereikia naudoti rgba, kad nurodytumėte šešėlio spalvą. Tačiau apibrėždamas šešėlį rgba prideda dar vieną aspektą – skaidrumo lygį.

Šis metodas yra daug paprastesnis nei kiti spalvos nustatymo metodai. Jums nereikia susitelkti ties šešėlių spalvos atspalvio nustatymu, kuris gali būti tik šiek tiek tamsesnis arba šviesesnis už fono spalvą. Su rgba galite tiesiog naudoti baltą arba juodą ir padidinti jų neskaidrumą, kad gautumėte norimą fono atspalvį maišant spalvas.

Turto naudojimas tekstas-šešėlis Galite sukurti įvairius teksto efektus, neapsiribojant paprastais šešėliais. Pavyzdžiui, čia yra depresinio teksto iliuzijos kūrimo kodas.

Pirmiausia turite nustatyti teksto spalvą šiek tiek tamsesnę nei fono spalva. Ir tada reikia naudotis turtu tekstas-šešėlis su balta spalva ir padidintu skaidrumu.

Fono spalva yra #222, o teksto spalva nustatyta į 60 % neskaidrumą. Baltas šešėlis yra šiek tiek žemyn ir į dešinę, o neskaidrumo lygis yra 10%.

Turinys (fonas: #222; ) #text h1 (spalva: rgba(0,0,0,0,6); teksto šešėlis: 2 pikseliai 2 pikseliai 3 pikseliai rgba(255,255,255,0,1); )

Visiškai nereikia sulieti šešėlio. Aiškus šešėlis gali puikiai derėti su svetainės dizainu.

Teksto šešėlis: 6 piks. 6 piks. 0 piks. rgba(0,0,0,0,2);

Tikras smagumas prasideda tada, kai atsisakote apribojimo turėti tik vieną šešėlį. Naudodami kablelius, kad atskirtumėte apibrėžimus, galite naudoti tiek šešėlių, kiek jums reikia!

Tekstas-šešėlis: šešėlis1, šešėlis2, šešėlis3;

Štai dviejų šešėlių naudojimo pavyzdys. Pirmasis turi tokią pačią spalvą kaip ir fonas.

Teksto šešėlis: 4 piks. 3 piks. 0 piks. #fff, 9 piks. 8 piks. 0 piks. rgba(0,0,0,0,15);

Didelis atstumas žemyn

Įpratę naudoti kelis šešėlius, rezultatai taps vis dramatiškesni. Labai lengva sukurti 3D efektą tekstui.

Pavyzdyje naudojami keturi šešėliai, visi paslinkti žemyn skirtingais atstumais ir sulieti.

Teksto šešėlis: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px.0,rgba(0,1.0,rgba) );

Perjunkite nedidelį atstumą žemyn ir stipriai suliekite

Štai dar vienas tos pačios idėjos įsikūnijimas. Trys šešėliai pasislenka mažesniu atstumu ir yra labiau neryškūs.

Teksto šešėlis: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Marko Dotto 3D tekstas

Efektas naudojamas svetainėje MarkDotto.com. Jis naudoja 12 skirtingų šešėlių, kad sukurtų puikų 3D efektą.

Teksto šešėlis: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,1). O ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Gordono Hallo įtrauktas tekstas

Atkreipkite dėmesį, kad aukščiau esančiame pavyzdyje savo techniką pavadinau „greito ir purvino“ spaudos efektu. Taip yra todėl, kad yra daug labiau įtraukiantis būdas sukurti rimtai įterptą tekstą, kuris yra daug patikimesnis.

Gordonas naudoja rimtą CSS voodoo, kad pašalintų ne tik išorinį, bet ir tikrą vidinį šešėlį. Peržiūrėkite jo tinklaraščio įrašą, kad gautumėte išsamų technikos paaiškinimą.

Fono spalva: #666666; -Webkit-background-clip: tekstas; -moz-background-clip: tekstas; fonas-klipas: tekstas; spalva: skaidri; teksto šešėlis: rgba(255,255,255,0,5) 0px 3px 3px;

Švytėjimas

Teksto šešėlis: 0px 0px 6px rgba(255,255,255,0,7);

Teksto šešėlis: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Keli šviesos šaltiniai

Teksto šešėlis: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Spalva: rgba(0,0,0,0,6); teksto šešėlis: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0,3);

Išvada

Kaip ir daugumą CSS efektų, šešėlius labai lengva įdiegti. Tačiau paprastų veiksmų derinys gali sukelti nuostabų poveikį.

Modulis turi su teksto stiliumi susijusių CSS funkcijų, tokių kaip pabraukimas, teksto šešėliai ir Rytų Azijos teksto akcentai.

Teksto stiliaus savybės

1. Linijų dizainas: pabraukimas, perbraukimas ir perbraukimas

Pabraukimai, brūkšniai ir perbrauktos eilutės rodomos tik nepakeistuose eilutės lygio blokuose (rodymas: eilutėje) ir rodomi visame tekste, įskaitant tarpus tarp simbolių ir žodžių, išskyrus įtrauką eilutės pradžioje ir pabaigoje.

Naršyklės gali nutraukti pabraukimą ir brūkštelėti ten, kur linija kerta glifą, atsiras tam tikru atstumu abiejose glifo kontūro pusėse. Kai naršyklė pertraukia pabraukimą arba brūkšnį ties glifo ribomis, tos ribos linijos forma turi atitikti glifo formą. Tačiau specifikacijoje nenurodytas konkretus metodas, kaip sekti glifo formą, tai paliekama naršyklei.

Ryžiai. 1. Pabraukimo laužymas

1.1. Dekoravimo linijos tipas: tekstas-dekoracijos-linijos savybė

Naršyklės palaikymas

T.Y: —
Kraštas: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 – žiniatinklio rinkinys-
Opera: 44
iOS Safari: 8 -Webkit-
UC naršyklė, skirta „Android“: 11.8
„Chrome“, skirta „Android“: 73
„Samsung“ internetas: 7.2

Teksto dekoravimo eilutės ypatybė nustato, kokio tipo eilutė, jei yra, pridedama prie elemento.

Turtas nepaveldimas.

Sintaksė

Tekstas-dekoravimo-linija: nėra; text-decoration-line: pabraukimas; text-decoration-line: overline; text-decoration-line: line-through; tekstas-dekoravimo-linija: mirksėti; text-decoration-line: pabrauktas perbraukimas; text-decoration-line: overline pabraukta linija-through; text-decoration-line: inherit; tekstas-dekoravimo-linija: inicialas;

1.2. Dekoravimo linijos stilius: teksto dekoravimo stiliaus savybė

Naršyklės palaikymas

T.Y: —
Kraštas: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 – žiniatinklio rinkinys-
Opera: 44
iOS Safari: 8 -Webkit-
UC naršyklė, skirta „Android“: 11.8
„Chrome“, skirta „Android“: 73
„Samsung“ internetas: 7.2

Teksto dekoravimo stiliaus ypatybė nurodo linijų, nubrėžtų papuošti elemente nurodytą tekstą, stilių. Vertės turi tą pačią reikšmę kaip ir pasienio stiliaus nuosavybė.

Turtas nepaveldimas.

Sintaksė

Tekstas-dekoravimo stilius: solidus; tekstas-dekoravimo-stilius: dvigubas; tekstas-dekoravimo-stilius: taškuotas; tekstas-dekoravimo-stilius: brūkšninis; tekstas-dekoravimo-stilius: banguotas; tekstas-dekoravimo-stilius: paveldėti; tekstas-dekoravimo-stilius: inicialas;

1.3. Dekoravimo linijos spalva: tekstas-dekoracijos-spalvos savybė

Naršyklės palaikymas

T.Y: —
Kraštas: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 – žiniatinklio rinkinys-
Opera: 44
iOS Safari: 8 -Webkit-
UC naršyklė, skirta „Android“: 11.8
„Chrome“, skirta „Android“: 73
„Samsung“ internetas: 7.2

Ypatybė text-decoration-color nurodo teksto dekoravimo linijos spalvų rinkinį elementui su text-decoration-line .

Turtas nepaveldimas.

Sintaksė

Tekstas-dekoravimas-spalva: currentColor; tekstas-dekoracija-spalva: lašiša; tekstas-dekoravimas-spalva: #00ff00; tekstas-dekoracija-spalva: rgba(255, 128, 128, 0,5); tekstas-dekoracija-spalva: skaidri; tekstas-dekoracija-spalva: paveldėti; tekstas-dekoracija-spalva: inicialas;

1.4. Greita apdailos linijos savybių santrauka: teksto dekoravimo savybė

Naršyklės palaikymas

T.Y: —
Kraštas: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 – žiniatinklio rinkinys-
Opera: 44
iOS Safari: 8 -Webkit-
UC naršyklė, skirta „Android“: 11.8
„Chrome“, skirta „Android“: 73
„Samsung“ internetas: 7.2

Teksto dekoravimo ypatybė yra trumpa teksto dekoravimo eilutės teksto dekoravimo stiliaus teksto dekoravimo spalvos ypatybių įrašymo forma vienoje deklaracijoje. Trūkstamoms reikšmėms nustatomos pradinės vertės. Numatytoji reikšmė teksto dekoravimas: none solid currentColor; . Turtas nepaveldimas. Tačiau vieno elemento visų teksto eilučių stilius turi būti vienodas.

1.5. Dizaino linijos padėtis: teksto pabraukimo ir padėties savybė

Naršyklės palaikymas

T.Y: —
Kraštas: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC naršyklė, skirta „Android“: ?
„Chrome“, skirta „Android“: 71
„Samsung“ internetas: —

Ypatybė text-underline-position nustato elemente nurodyto pabraukimo vietą.

Turtas paveldėtas.

Vertybės:
automatinis	Naršyklė gali naudoti bet kokį algoritmą pabraukimo vietai nustatyti, tačiau eilutė turi būti ant teksto pradinės linijos arba žemiau jos. Numatytoji reikšmė.
pagal	Pabraukimas yra po elemento teksto turiniu. Šiuo atveju pabraukimas dažniausiai nesikerta su nusileidimu. Šią reikšmę galima derinti su kaire arba dešine, jei vertikaliuose tipografijos režimuose pageidaujama tam tikros pusės.
paliko	Vertikalios tipografijos režimais pabraukimas lygiuojamas su kairiuoju teksto kraštu. Tačiau ši vertė interpretuojama kaip nurodyta .
teisingai	Vertikalios tipografijos režimais pabraukimas lygiuojamas su dešiniuoju teksto kraštu. Tačiau ši vertė interpretuojama kaip nurodyta .
paveldėti
pradinė

Sintaksė

Teksto pabraukimo padėtis: automatinis; tekstas-pabrauktas-pozicija: po; tekstas-pabrauktas-pozicija: kairėje; tekstas – pabraukimas – padėtis: dešinė; tekstas-pabrauktas-pozicija: po kairiuoju; tekstas-pabrauktas-pozicija: po dešine; tekstas-pabrauktas-pozicija: paveldėti; tekstas-pabrauktas-pozicija: pradinis; Ryžiai. 2. Pabraukite tekstą iš abiejų pusių vertikaliais tipografiniais režimais, naudodami kairiąsias ir dešiniąsias reikšmes

2. Teksto šešėlis: teksto šešėlio savybė

Naršyklės palaikymas

T.Y: 10
Kraštas: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC naršyklė, skirta „Android“: 11.8
„Chrome“, skirta „Android“: 73
„Samsung“ internetas: 4

Teksto šešėlio savybė naudojama norint pridėti šešėlį prie teksto. Teksto šešėlis yra įdomus įrankis, leidžiantis sukurti nuostabius efektus. Šešėliai gali būti viensluoksniai arba daugiasluoksniai, neryškūs, spalvoti arba permatomi. Nurodydami elemento šešėlį, galite nurodyti tik vieną ilgį ir spalvą, taip sukurdami spalvotą vieno simbolio ar žodžio kopiją. Be to, naudojant šešėlį, tekstas gali būti geriau skaitomas, jei kontrastas tarp teksto spalvos ir fono yra mažas.

Kiekvienas šešėlis taikomas tiek pačiam tekstui, tiek jo dizaino elementams (teksto dekoravimo savybė). Vienu metu galite nurodyti kelis šešėlius, atskirdami juos kableliais. Šešėliai persidengia vienas su kitu, bet neuždengia paties teksto. Pirmasis šešėlis visada yra ant kitų šešėlių. Turtas paveldėtas.

Kiekvienas šešėlis apibrėžiamas dviem arba trimis ilgiais ir pasirenkama spalva. Leidžiami ilgiai, lygūs 0.

Turtas nepaveldimas.

Ryžiai. 3. Teksto šešėlio savybės sintaksė

tekstas-šešėlis
Vertybės:
x poslinkis	Nustatomas horizontalus šešėlio poslinkis. Teigiama reikšmė atkreipia šešėlio poslinkį į dešinę nuo teksto, neigiamas ilgis – į kairę.
y poslinkis	Nustatomas vertikalus šešėlio poslinkis. Teigiama reikšmė perkelia šešėlį žemyn, neigiama – aukštyn.
suliejimas	Nustato suliejimo spindulį. Neigiamos reikšmės neleidžiamos. Jei suliejimo reikšmė lygi nuliui, tada šešėlio kraštas yra ryškus. Kitu atveju, kuo didesnė vertė, tuo labiau neryškus šešėlio kraštas.
spalva	Nustato šešėlius. Jei spalvos nėra, naudojama spalva paimama iš spalvos savybės.
nė vienas	Numatytoji reikšmė reiškia, kad teksto šešėlio nėra. Pašalina elemento šešėlį iš elementų grupės su nurodyta savybe.
pradinė	Nustato ypatybės vertę į numatytąją vertę.
paveldėti	Paveldi nuosavybės vertę iš pirminio elemento.

Kitaip nei langelio šešėlis , teksto šešėliai nėra nukirpti ir gali būti rodomi, jei tekstas iš dalies skaidrus. Kaip ir langelio šešėlis , teksto šešėliai neturi įtakos maketui ir nekelia slinkimo ar slenkamos srities dydžio padidėjimo.

Sintaksė

Teksto šešėlis: 2px 2px 4px rožinė; teksto šešėlis: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; tekstas-šešėlis: mėlynas 2px 5px; teksto šešėlis: 5 piks. 10 piks.; tekstas-šešėlis: paveldėti; tekstas-šešėlis: pradinis;

2.1. Teksto šešėlių pavyzdžiai

Plakato šešėlis

Teksto šešėlis

Teksto šešėlis-1 ( fonas: #77F7DE; spalva: balta balta, 5 piks. 5 piks. 0 balta, 6 piks. 6 piks. 0 balta tarpai tarp raidžių: 0,1 em )

3D šešėlis

Teksto šešėlis

Teksto šešėlis-2 (fonas: linijinis gradientas (-45 laipsnių, #FEE864, #F5965E); spalva: #f4f4f4; teksto šešėlis: -1px -1px balta, 1px 1px pilka, 2px 2px #7a7a7a, 3px5757 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px 18px 18px 18px BA (0, 0, 0, .4), 18 piks. 18 piks. 10 piks. rgba (0, 0, 0, .4)

Šešėlis-tekstas

Teksto šešėlis

Teksto šešėlis-3 (fonas: #FFE6DB; spalva: #FFE6DB; tarpai tarp raidžių: .1em; teksto šešėlis: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142) , .4), 9 pikselių 0 rgba (250, 111, 142, .3), 12 pikselių 0 rgba (250, 111, 142, .2), 15 pikselių 0 rgba (250, 111, 142, .1);

Retro šešėlis

Teksto šešėlis

Teksto šešėlis-4 (spalva: #FB631E; tarpai tarp raidžių: 0,1 em; teksto šešėlis: 4 pikseliai 4 pikseliai balta, 6 pikseliai 6 piks. #D7CC88; )

Sluoksniuotas šešėlis

Teksto šešėlis

Teksto šešėlis-5 (fonas: #f1f1f1; spalva: #fcc105; tarpai tarp raidžių: .1em; teksto šešėlis: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )