Vlad Merzhevich
En gång i tiden fanns det ett visst mode för text med skuggor och en liknande effekt kunde hittas på nästan vilken webbplats som helst. I den grafiska redigeraren är det enkelt att lägga till en skugga, det ser bra ut, här är texten med en skugga och skjuts in på webbsidor, oavsett stilen på webbplatsen och designerns känsla för proportioner. När de flesta webbläsare började stödja egenskapen text-shadow style, hade modet redan passerat och nu är text med en skugga ganska sällsynt. Men text-shadow har ett antal andra implicita användningsområden som få människor misstänker. Med den här egenskapen kan du göra konturtext, "extrudera" den, skapa en glöd, oskärpa och mycket mer.
Fyra parametrar skrivs som värden: skuggfärg, horisontell och vertikal förskjutning och skuggoskärpa radie (Fig. 1).
Ris. 1. Text-skuggparametrar
Färg kan skrivas i början eller slutet av alla parametrar i vilket lämpligt CSS-format som helst. Så du kan skapa en genomskinlig skugga med rgba-formatet. Positiva offsetvärden kastar skuggan till höger och nedåt, medan negativa offsetvärden kastar skuggan till vänster respektive uppåt. För att ha en skugga runt texten ställer du bara in offsetvärdena till noll. Oskarpradien anger hur skarp skuggan blir. Ju större oskärpa, desto mjukare ser skuggan ut.
En stor fördel med text-shadow är möjligheten att lägga till flera olika skuggor samtidigt, lista deras parametrar separerade med kommatecken. Denna funktion låter dig i princip skapa olika effekter.
Tyvärr stöder inte IE före version 10.0 text-shadow , så vi kommer inte att se någon skönhet i den här webbläsaren.
Konturtext kännetecknas av att varje bokstav är omgiven av en linje, vars färg skiljer sig från textens färg (fig. 2). Denna effekt ser bäst ut med stora teckenstorlekar, till exempel rubriker. För brödtext försämrar användningen av en disposition endast läsbarheten.
Ris. 2. Dispositionstext
En kontur kan skapas med två metoder. I den första metoden ställer vi in en noll skuggförskjutning och en liten oskärpa radie, bokstavligen 1-2 pixlar (exempel 1). Genom att öka oskärpa värdet förvandlas konturen till en glöd runt texten, vilket är en annan effekt.
Exempel 1: Dispositionstext
Dispositionstext
Konturen gjord med denna metod visas i fig. 1. Konturen visar sig vara något suddig, så för den som vill få en tydlig linje är den andra metoden avsedd. Den består av att använda fyra skarpa skuggor av samma färg, de flyttas till olika vinklar med en pixel (exempel 2).
Exempel 2. Fyra skuggor för konturen
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Dispositionstext
Utseendet på en sådan kontur visas i fig. 3. Det märks att konturen är mer uttrycksfull.
Ris. 3. Kontur med fyra skuggor
För att lägga till 3D-texteffekten som visas i fig. 4 appliceras flera skuggor samtidigt, vilka förskjuts i förhållande till varandra med en pixel horisontellt och vertikalt.
Ris. 4. 3D-text
Personligen påminner den här typen av text mig om bokstäver i retrostil och, återigen, den är bäst lämpad för rubriker, snarare än brödtexten på en webbsida.
Antalet skuggor beror på hur mycket du vill "dra" texten framåt. Ett större antal ökar "djupet" på bokstäverna, ett mindre antal, tvärtom, minskar tredimensionaliteten. Exempel 3 använder fem skuggor av samma färg.
Exempel 3: Skugga för att lägga till tredimensionalitet
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
För alla skuggor ställer vi in oskärpa radien till noll och samma färg. Skuggorna skiljer sig endast i sina offsetvärden.
För att skapa effekten av textprägling eller, med andra ord, relief, måste färgen på texten matcha bakgrundsfärgen. Den ena delen av bokstäverna som "skjuter ut" ovanför ytan tycks vara upplysta, medan den andra delen ligger i skuggan (fig. 5).
Ris. 5. Präglad text
För att lägga till en liknande effekt behöver vi två skuggor - vi flyttar den vita skuggan upp till vänster med en pixel och den mörkgrå ner till höger (exempel 4).
Exempel 4: Präglad text
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Reliefen ser bäst ut på en grå bakgrund, så effekten är inte lämplig för alla färgscheman på webbplatsen. Förresten, det är lätt att bli pressad snarare än extruderad text; byt bara ut skuggfärgerna.
Text-skugga: #333 -1px -1px 0, #fff 1px 1px 0;
Glödet runt texten är samma skugga, bara det är ljust och kontrasterande. För att skapa en glödeffekt, ändra bara skuggans färg och ställ in önskad oskärpa radie. Eftersom ljuset runt texten ska vara enhetligt bör skuggförskjutningen sättas till noll. I fig. Figur 6 visar ett exempel på glödande i olika färger.
Ris. 6. Glöd text
Exempel 5. Glöd
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Skuggan i sig är suddig, så om vi bara lämnar skuggan och döljer själva texten får vi suddiga bokstäver (fig. 7), och graden av oskärpa kan enkelt justeras med hjälp av parametern text-shadow.
Ris. 7. Text med oskärpa
För att dölja originaltexten ställer du bara in färgen på transparent (exempel 6). Skuggfärgen fungerar sedan som textfärg, och oskärpa radien anger graden av oskärpa för bokstäverna.
Exempel 6: Suddig text
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Skuggan behöver inte läggas till direkt i texten; egenskapen text-shadow spelar bra med pseudoklasserna :hover och :första bokstaven. På grund av detta erhålls intressanta effekter med text, som den konturerade första bokstaven i ett stycke eller ljuset från en länk när du håller muspekaren över den. Exempel 7 visar sådana tekniker.
Exempel 7: Använda Pseudo-klasser
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Ett nischprojekt bromsar den traditionella kanalen, oavsett kostnader. Marknadsstrukturen, som förkastar detaljerna, stabiliserar marknads- och försäljningsavdelningen med hjälp av erfarenheterna från tidigare kampanjer.
Varumärkesbyggande, naturligtvis, skjuter spontant bort konvergent PR och vinner ett marknadssegment. Investeringar synkroniserar roll social status, ökar konkurrensen. Varumärket bestämmer naturligtvis placeringsplanen, med hjälp av erfarenheterna från tidigare kampanjer.
CSS text-shadow-egenskapen är ansvarig för att ställa in skuggan av texten. Mycket lik egenskapen box-shadow.
CSS-text-skuggsyntax
färg - färg (kan anges i valfritt format, se html-färgnamn)
Text-skuggsyntaxen tillåter att flera skuggor specificeras, separerade med kommatecken. Till exempel
text-skugga : X1 Y1 R1 färg1 , X2 Y2 R2 färg2 , ...;
Nedan är det enklaste exemplet med en textskugga. Här har vi applicerat både offset (X och Y) och även gjort en oskärpa radie.
Текст с тенью
Текст с тенью
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Двойная тень
На странице преобразуется в следующее
Двойная тень
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.
Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки (display: inline) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.
Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.
Рис. 1. Прерывание линии подчеркивания
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.
Свойство не наследуется.
Синтаксис
Text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; text-decoration-line: underline overline; text-decoration-line: overline underline line-through; text-decoration-line: inherit; text-decoration-line: initial;
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе. Значения имеют то же значение, что и для свойства border-style .
Свойство не наследуется.
Синтаксис
Text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; text-decoration-style: inherit; text-decoration-style: initial;
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-color определяет цвет линии оформления текста, установленный для элемента с text-decoration-line .
Свойство не наследуется.
Синтаксис
Text-decoration-color: currentColor; text-decoration-color: salmon; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; text-decoration-color: inherit; text-decoration-color: initial;
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration является краткой формой записи свойств text-decoration-line text-decoration-style text-decoration-color в одном объявлении. Пропущенные значения устанавливаются на их начальные значения. Значение по умолчанию text-decoration: none solid currentColor; . Свойство не наследуется. Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.
IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —
Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.
Свойство наследуется.
| Значения: | |
| auto | Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию. |
| under | Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right , если конкретная сторона предпочтительна в вертикальных типографских режимах. |
| left | В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under . |
| right | В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under . |
| inherit | |
| initial | |
Синтаксис
Text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
text-underline-position: under left;
text-underline-position: under right;
text-underline-position: inherit;
text-underline-position: initial;
Рис. 2. Подчеркивание текста с обеих сторон в вертикальных типографских режимах с помощью значений left и right
IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4
Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.
Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0 .
Свойство не наследуется.
Рис. 3. Синтаксис свойства text-shadow
| text-shadow | |
|---|---|
| Значения: | |
| x-offset | Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево. |
| y-offset | Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх. |
| blur | Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени. |
| цвет | Задает тени. Если цвет отсутствует, используемый цвет берется из свойства color . |
| none | Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
В отличие от box-shadow , текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow , текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.
Синтаксис
Text-shadow: 2px 2px 4px pink; text-shadow: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; text-shadow: blue 2px 5px; text-shadow: 5px 10px; text-shadow: inherit; text-shadow: initial;
Тень текста
Text-shadow-1 { background: #77F7DE; color: white; text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white; letter-spacing: 0.1em; }
Тень текста
Text-shadow-2 { background: linear-gradient(-45deg, #FEE864, #F5965E); color: #f4f4f4; text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4); }
Тень текста
Text-shadow-3 { background: #FFE6DB; color: #FFE6DB; letter-spacing: .1em; text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1); }
Тень текста
Text-shadow-4 { color: #FB631E; letter-spacing: .1em; text-shadow: 4px 4px white, 6px 6px #D7CC88; }
Тень текста
Text-shadow-5 { background: #f1f1f1; color: #fcc105; letter-spacing: .1em; text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); }
Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент - text-shadow (тень текста), который на первый взгляд кажется достаточно простым, но с его помощью можно создать запоминающиеся эффекты, если подключить изобретательность и воображение.
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr , которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Для создания тени текста используется синтаксис свойства text-shadow , который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
Text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Результат использования данного свойства будет выглядеть следующим образом:
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.
С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.
Body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }
Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.
Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!
Text-shadow: shadow1, shadow2, shadow3;
Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.
Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.
В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.
Text-shadow: 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 rgba(0,0,0,0.1);
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
Text-shadow: 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);
Эффект используется на сайте MarkDotto.com . В нем используется 12 различных теней для создания отличного эффекта 3D.
Text-shadow: 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), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
Background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Text-shadow: 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);
Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line .
text-shadow: none | тень [,тень]*
где тень:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Значения
None Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Skulle citrus leva i snåren i söder? Ja, men en falsk kopia!
Resultatet av exemplet visas i fig. 1.
Ris. 1. Skuggvy i webbläsaren Safari
Opera stöder maximalt 6–9 skuggalternativ. Att öka detta värde, samt att öka oskärpa radien över 100px, påverkar webbläsarens prestanda. Operaversionerna 9.5–10 använder multi-shadow display liknande CSS2.
Safari före version 4.0 stöder bara ett skuggalternativ, resten ignoreras. Sedan version 4.0 fungerar många skuggor redan.
Internet Explorer förstår bara text-shadow-egenskapen sedan version 10.0. Istället används filteregenskapen: Shadow(parameters) . Till exempel anger följande konstruktion färgen på skuggan (#666666), dess riktning (45° från vertikalt) och förskjutningsmängden (4 pixlar).
filter: Shadow(Color=#666666, Direction=45, Strength=4);
