Windows. Настройка. Интернет. Обслуживание. Компьютеры. Безопасность / Настройка Wi-Fi / Эффекты шрифта html с кодами. CSS: несколько техник для различных эффектов обводки элементов. Смещение вниз на большое расстояние

Эффекты шрифта html с кодами. CSS: несколько техник для различных эффектов обводки элементов. Смещение вниз на большое расстояние

10.04.2024

В данном уроке представлены несколько техник CSS для организации различных эффектов для обводки элементов.

Простой эффект легкой тени может быть получен с помощью серого цвета на обводке. CSS3 имеет возможность создать реальную тень с помощью свойства box-shadow , но простой способ будет работать во всех браузерах:

Shadow { padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Эффект вдавленного блока тоже очень просто получить. Добавление скругленных углов CSS3 усиливает впечатление от эффекта:

Pressed { color: #fff; padding: 20px; background: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Данный эффект очень похож на сдвоенную обводку, которая достаточно часто применяется для изображений. Используются установки отступа и обводки, за счет чего получается эффект двойной рамки.Дополнительная работа с настройками и использование свойства outline позволяет добиться эффекта скошенных граней.

Img.light { outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; } img.dark { outline: 1px solid #111; border-top: 1px solid #555; padding: 10px; background: #333; }

Данный эффект можно использовать в меню или списках. Он представляет собой простую комбинацию верхней и нижней частей обводки с различными оттенками фонового цвета. Нужно помнить, что селекторы CSS first-child и last-child не поддерживаются старыми браузерами. Для обхода такой неприятной ситуации можно использовать jQuery.

#indented ul{ margin: 20px 0; padding: 0; list-style: none; } #indented ul li { border-top: 1px solid #333; border-bottom: 1px solid #111; } #indented ul li:first-child {border-top: none;} #indented ul li:last-child {border-bottom: none;} #indented ul li a { padding: 10px; display: block; color: #fff; text-decoration: none; } #indented ul li a:hover {background: #111;}

Типографика является самой любимой игрушкой веб дизайнеров. 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 добавляет еще одну размерность при определении тени - уровень прозрачности.

Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С 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);

3D текст от Mark Dotto

Эффект используется на сайте 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);

Вдавленный текст от Gordon Hall

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, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.

Типографика — моя любимая игрушка, если дело доходит до веб-дизайна. Еще бы, с ее помощью можно привлечь внимание человека, всего лишь немного изменив начертание или кегль шрифта. Очень просто и очень эффективно, на эту тему написано очень много книг и сломано немало копий в спорах. Сегодня я не буду давать советов по типографике в целом — у меня не хватит квалификации, а вот как оформить текст вашего сайта — это всегда пожалуйста. Итак, сегодня я покажу несколько вариатов использования свойства CSS3 text-shadow , очень простого, но в умелых руках оно может творить чудеса.

Базовый синтаксис text-shadow

Это свойство CSS3 работает во всех свежих браузерах, без вендорных префиксов, типа -moz и -webkit. Даже IE можно научить понимать это свойство, нужно использовать Modernizr или аналоги.

Text-shadow: x-смещение у-смещение размытие цвет;

Вот и весь базовый синтаксис. Первое значение — смещение по горизонтали, второе — по вертикали, размытие тени и цвет тени. Рассмотрим пример:

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Сместили тень, размыли на 3 пиксела и назначили черный цвет с прозрачностью в 30%. Почему я использую альфа-канал или прозрачность? Это дает больше свободы в действиях, можно сделать чуть светлее или темнее просто поменяв значение прозрачности, не мучаясь с подбором цвета. Достаточно быстро получается, рекомендую.

Вдавленные буквы

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: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

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

Вниз и подальше

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);

Текст объёмный и как бы висит над фоном, не так ли? Тут использованы 4 тени с различным уровнем размытия и расположения. Вообще, чем больше используется теней, тем реалистичнее эффект, учитывайте это в своих проектах.

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

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);

Аналогично предыдущему примеру, три тени, но расположены ближе, отсюда эффект трехмерности и весомости текста.

3D текст от Mark Dotto

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);

Наткнулся в сети на работу этого дизайнера и никак не мог пройти мимо. Впечатляющая реалистичность.

Вдавленный текст от Gordon Hall

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 . Но принцип такой же, как я говорил выше. Чуть светлее фон, светлая тень ниже букв и темная выше. Сделано просто, но очень круто.

Сияние текста

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);

Вдавленный текст уже был, теперь выпуклый. Достаточно простой эффект, но очень красиво смотрится в заголовках, например. Пользуйтесь, пробуйте

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

Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.

Свойства для оформления текста

1. Оформление линии: подчеркивание, обводка и зачеркивание

Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки (display: inline) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.

Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.

Рис. 1. Прерывание линии подчеркивания

1.1. Вид линии оформления: свойство text-decoration-line

Поддержка браузерами

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;

1.2. Стиль линии оформления: свойство text-decoration-style

Поддержка браузерами

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;

1.3. Цвет линии оформления: свойство text-decoration-color

Поддержка браузерами

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;

1.4. Краткая запись свойств линии оформления: свойство text-decoration

Поддержка браузерами

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; . Свойство не наследуется. Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.

1.5. Расположение линии оформления: свойство text-underline-position

Поддержка браузерами

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

2. Тень текста: свойство text-shadow

Поддержка браузерами

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;

2.1. Примеры тени текста

Плакатная тень

Тень текста

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; }

3D тень

Тень текста

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 отвечает за задание тени у текста. Очень схож со свойство box-shadow .

Синтаксис CSS text-shadow

text-shadow : X Y R color ;

X - сдвиг тени относительно текста по оси Х (чаще всего задается в пикселях px);
Y - сдвиг тени относительно текста по оси Y (чаще всего задается в пикселях px);
R - радиус тени (чаще всего задается в пикселях px);
color - цвет (можно задавать в любом формате, см. названия html цветов)

Синтаксис text-shadow допускает задание нескольких теней через запятую. Например

text-shadow : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;

Приоритет тени (какая выше, какая ниже) зависит от конкретной версии CSS. В CSS3 первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 наоборот.

Примеры: как сделать тень у текста в html

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

Ниже представлен самый простой пример с тенью у текста. Здесь мы применили оба смещения (X и Y), а также сделали радиус размытия.

Текст с тенью

Текст с тенью

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

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