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

В приведенных примерах, мы используем тени текста в различных ситуациях, что даст вам необходимую базу, чтобы дальше вы смогли самостоятельно изучить данный вопрос.

1. Базовая настройка

Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS :

В раздел HTML добавьте тег

с классом text:

Web Code Geeks

Для этого элемента мы будем добавлять тень текста CSS. Я задал для этого элемента начальные свойства, чтобы он красиво выглядел на экране:

Теперь давайте зададим для текста атрибут text-shadow . Но сначала разберемся, какие значения принимает этот атрибут:

Text-shadow: 4px 4px 4px #ccc;

1. 4px - смещение по оси X (горизонтальное );
2. 3px - смещение по оси Y (вертикальное );
3. 2px - значение размытия;
4. #ccc - цвет.

Это задается следующим образом:

Text-shadow: horizontal-offset vertical-offset blur color;

де цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA (0,0,0,0.3); . В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:

.text {
font-size: 5em; /* делаем текст больше */
text-shadow: 4px 3px 2px #ccc;
}

Представление в браузере этого текста с тенью будет выглядеть так:

ПРИМЕР сайт

Дальше мы будем по-разному изменять цвет фона элемента body . Делаем мы это потому, что для некоторых теней CSS нужен определенный фон, иначе они не будут заметны. Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.

2. Эффект оттиска

Установите для цвета текста немного более темный оттенок, чем фон. Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:

Body {
background: #222;
}
.text {
font-size: 5em;
color: rgba(0,0,0,0.6); /* цвет текста */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* добавление тени */
}

Используя код RGBA, вы можете установить непрозрачность цвета. Обратите внимание на то, что цвет текста имеет непрозрачность 60% (0.6) , а тени div CSS 10% (0.1) .

ПРИМЕР сайт

3. Эффект ретро-тени

Для ретро-тени не всегда нужно применять размытие. Возьмем, к примеру, эту ретро-тень:

Body {
}
.text {
font-size: 5em;
color: white; /* изменяем цвет текста на белый */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* добавление ретро-тени */
}

ПРИМЕР сайт

4. Эффект двойной тени

Интересно, что вы можете добавлять более одной CSS тени шрифта. Это можно сделать следующим образом: text-shadow: shadow1, shadow2, shadow3; Давайте добавим две тени, одна - с цветом фона, а вторая немного темнее:

Text {
font-size: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* дает две тени */
}

Фон у нас белый, так что другой цвет для него нам не нужен. В браузере эффект будет выглядеть так:

ПРИМЕР сайт

5. Эффект удаленной тени

Этот эффект основывается на функции определения нескольких красивых теней CSS. Ниже вы можете увидеть эффект с четырьмя тенями, отбрасываемыми вниз с различной степенью интенсивности:

Body {
background: #fff3cd; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
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);
}

ПРИМЕР сайт

6. 3D-эффект Марка Дотто

Body {
background: #3495c0; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
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);
}

Теперь посмотрите, как эти внутренние тени текста CSS выглядят в браузере:

ПРИМЕР сайт

7. Реалистичный эффект вырезанного текста Гордона Холла

Гордон использует некоторую продвинутую магию CSS, чтобы задать не только внешнюю тень, но и реалистичную внутреннюю тень:

Body {
background: #cbcbcb; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: transparent;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

И это создает эффект вырезанного текста.

ПРИМЕР сайт

8. Эффект свечения текста

body {
background: #992d23; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

Эта тень создает эффект свечения текста:

ПРИМЕР сайт

9. Эффект выпуклого текста

body {
background: #629552; /* изменяем цвет фона */
}
.text {
font-size: 5em;
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);
}

ПРИМЕР сайт

10. Эффект длинных теней

Этот эффект можно сделать с помощю

Background-color: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, 179, 60), 14px 14px rgb(131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb(131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60);
color: #eaeaea;

ПРИМЕР сайт

Заключение

Как видите, свойство text-shadow очень просто в использовании, и с его помощью вы можете создавать собственные креативные 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 очень простое, как вы могли уже убедиться. Но грамотное его применение, а еще с небольшой фантазией, может творить чудеса.
Экспериментируйте, удачного вам дня

Описание

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство 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

В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.

Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. С версии 4.0 работает уже множество теней.

Браузер Internet Explorer понимает свойство text-shadow только с версии 10.0. Взамен используется свойство filter : Shadow(параметры) . К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).

filter: Shadow(Color=#666666, Direction=45, Strength=4);

Модуль содержит возможности 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 для организации различных эффектов для обводки элементов.

Простой эффект легкой тени может быть получен с помощью серого цвета на обводке. 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;}