Box-shadow

Содержание:

Введение
CSS Properties
Styling slotted content
Примеры
CSS Properties
Начало работы с Box-shadows.css
Смещение вниз на небольшое расстояние и сильное размытие
- 3D текст от Mark Dotto
- Вдавленный текст от Gordon Hall
Использование нескольких теней одновременно
Property Values
Создание эффектов при наведении на картинки при помощи тени
Вдавленный текст
Соединяя примеры вместе
Как сделать тень блока с помощью свойства box-shadow
- - Поддержка браузерами
- 1. Синтаксис свойства box-shadow
  - 2.3. Тень в стиле «материальный дизайн»

Введение

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

CSS3 теперь позволяет нам создавать несколько теней на любой элемент блочного типа при помощи CSS-свойства . Это экономит много времени в графических редакторах и позволяет избавиться от кучи лишних -ов, но к сожалению не поддерживается браузером Internet Explorer. Что же нам теперь лучше сделать?

В этой статье я покажу вам возможное кроссбраузерное решение — технику с использованием , которая также добавляет поддержку IE для этого свойства. Я не буду описывать использование базового синтаксиса этого свойства, т.к. это итак хорошо описано в англоязычной статье CSS3 borders, backgrounds and box-shadows.

CSS Properties

Металлический текст надпись с обводной тенью высотой

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Styling slotted content

Svg: заливка и обводка

Now let’s consider the situation with slots.

Slotted elements come from light DOM, so they use document styles. Local styles do not affect slotted content.

In the example below, slotted is bold, as per document style, but does not take from the local style:

The result is bold, but not red.

If we’d like to style slotted elements in our component, there are two choices.

First, we can style the itself and rely on CSS inheritance:

Here becomes bold, because CSS inheritance is in effect between the and its contents. But in CSS itself not all properties are inherited.

Another option is to use pseudo-class. It matches elements based on two conditions:

That’s a slotted element, that comes from the light DOM. Slot name doesn’t matter. Just any slotted element, but only the element itself, not its children.
The element matches the .

In our example, selects exactly , but not its children:

Please note, selector can’t descend any further into the slot. These selectors are invalid:

Also, can only be used in CSS. We can’t use it in .

Примеры

Пример

Как сделать с помощью css обводку текста

Добавить эффект размытия к тени:

#example1 { box-shadow: 10px 10px 8px #888888;
}

Пример

Определить радиус распространения тени:

#example1 { box-shadow: 10px 10px 8px 10px #888888;
}

Пример

Определить несколько теней:

#example1 { box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}

Пример

Добавить врезное ключевое слово::

#example1 { box-shadow: 5px 10px inset;}

Пример

Изображения брошены на стол. В этом примере показано, как создавать «полароидные» изображения и поворачивать их:

div.polaroid { width: 284px;
padding: 10px 10px 20px 10px; border: 1px solid
#BFBFBF; background-color: white; box-shadow: 10px 10px 5px #aaaaaa;}

CSS Properties

Начало работы с Box-shadows.css

Во-первых, хочется сразу сказать, что box-shadows.css это кросс-браузерная коллекция css теней, а значит вам не придется думать о корректности отображения ваших контейнеров в различных браузерах. Все уже сделано за вас и для вас. Просто подключите все необходимое и пользуйтесь в своё удовольствие. Обо всех особенностях использования этой библиотеки мы сейчас и поговорим.

Подключение библиотеки теней

Первое с чего нужно начать работу, это размещение основного css файла после открывающего тега вашего проекта. Файла два, поэтому вы можете подключить удобный для вас:

<head>
  <link rel="stylesheet" href="/box-shadows.css">
</head>
<!-- or -->
<head>
  <link rel="stylesheet" href="/box-shadows.min.css">
</head>

Альтернативный способ подключения — загрузка файла на свой сервер. Скачайте файлы box-shadows.css или box-shadows.min.css на свой компьютер и загрузите в директорию вашего сайта, установив один из файлов в сайта таким образом:

<head>
  <link rel="stylesheet" href="/box-shadows.min.css">
</head>

Каким способом подключать библиотеку — решать вам. Делайте как вам удобнее. Я использую cms WordPress, поэтому я подключил файл box-shadows.min.css напрямую через functions.php. Об этом мы поговорим ниже.

Работа с html. Подключение классов

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

<div class="bShadow"></div>

Вы можете внедрить класс абсолютно в любой элемент: таблицу, основной контейнер, сайдбар, блок навигации по сайту и в другие блоки вашего сайта.

Добавление номерного класса

Box-shadows.css не использует особые имена для отдельных блоков, как это сделано, например, в библиотеке анимации. Здесь работа упрощается за счет использования порядковых чисел, например .
Для подключения определенной тени к блоку, вам необходимо добавить в блок один из таких классов.

<div class="bShadow bShadow-1"></div>

или добавьте отдельно

<div class="bShadow-1"></div>

Сейчас коллекция содержит более 45-ти теней с номером, включая основные блоки: Shadow, Shadow-light и Shadow-inset.
Выбирайте нужные вам тени и наслаждайтесь классным дизайном вашего сайта.

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

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;

Использование нескольких теней одновременно

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

PHP

box-shadow: 10px 0px 5px -5px #555,
-10px 0px 5px -5px #555,
0px 10px 5px -10px #555,
inset 0px 0px 2px;

1
2
3
4

box-shadow10px0px5px-5px#555,

-10px0px5px-5px#555,

0px10px5px-10px#555,

inset0px0px2px;

Обратите внимание! В этой записи у нас добавился еще один параметр – размер тени, который указан перед значением цвета. Теперь настройки указаны в следующей последовательности: смешение по горизонтали, смещение по вертикали, размытие, размер тени и её цвет.. Вот как это выглядит:

Вот как это выглядит:

Сложная тень CSS3

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

PHP

-webkit-box-shadow: 10px 0px 5px -5px #555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;
-moz-box-shadow: 10px 0px 5px -5px #555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;
-o-box-shadow: 10px 0px 5px -5px #555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;
-ms-box-shadow: 10px 0px 5px -5px #555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;

1
2
3
4

-webkit-box-shadow10px0px5px-5px#555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;

-moz-box-shadow10px0px5px-5px#555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;

-o-box-shadow10px0px5px-5px#555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;

-ms-box-shadow10px0px5px-5px#555, -10px 0px 5px -5px #555,0px 10px 5px -10px #555, inset 0px 0px 2px;

-webkit – для вебкит браузеров (Яндекс-браузер, GoogleChrome, новая версия Opera и т.д.)
-moz – для Mozilla Firefox
-о – для старых версий Opera
-ms — для Internet Explorer 8

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

Как видите, сделать с помощью CSS тень для блока не так уж и сложно. Главное понять какой параметр за что отвечает, и, подключив фантазию, вы сможете сделать очень интересное оформление для своего сайта. На мой взгляд, сайты с грамотно расставленными тенями для элементов выглядят очень красиво.

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

С уважением Юлия Гусарь

Property Values

Value	Description	Play it
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed	Play it »
v-shadow	Required. The position of the vertical shadow. Negative values are allowed	Play it »
blur-radius	Optional. The blur radius. Default value is 0	Play it »
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values	Play it »
none	Default value. No shadow	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Tip: Read more about allowed values (CSS length units)

Создание эффектов при наведении на картинки при помощи тени

Для этого воспользуемся псевдосклассом hover, который позволит нам задать тень для картинки при наведении указателя мышки. Так же, для того, что бы тень появлялась более плавно, воспользуемся CSS-свойством transition.

PHP

.shadow-4:hover {
box-shadow:0 0 6px 6px #555;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5
6
7

.shadow-4hover{

box-shadow6px6px#555;

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

Для того, что бы не было резкого скачка при убирании курсора, нам необходимо дописать свойство transition не только для данного класса с псевдоклассом hover, но и просто для класса shadow4.

PHP

.shadow-4 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5

.shadow-4{

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

Вот что получится в итоге.

Так же мы можем не просто добавлять тень при наведении курсора, а изменять ее параметры. К примеру, мы можем для изображения сделать, что бы при наведении указателя у нас изменялись цвета тени.

Так же воспользуемся для этого псевдоклассом hover. Скопируем значение тени, и немножко его изменим, к примеру, поменяем цвета местами.

PHP

.shadow-3:hover {
box-shadow: 0 0 0 1px #ccc,
0 -20px 10px -5px #6BFA76,
20px 0 10px -5px #FBC16A,
0 20px 10px -5px #F4F171,
-20px 0 10px -5px #6BA5FA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5
6
7
8
9
10
11

.shadow-3hover{

box-shadow1px#ccc,

-20px10px-5px#6BFA76,

20px10px-5px#FBC16A,

20px10px-5px#F4F171,

-20px10px-5px#6BA5FA;

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

И для того, что бы цвета менялись плавно, так же добавим свойство transition для класса картинки с псевдосклассом и без него.

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

С помощью свойства 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);
}

Соединяя примеры вместе

Вы можете скачать пример для выпадающей тени и пример для внутренней тени, чтобы иметь больше представления, как эта техника работает. Ниже я привёл полный код для базового метода. Первый листинг кода содержит HTML-код для примера, с базовым блоком и блоком для IE, соединенные вместе:

является родительским по отношению к блоку с контентом. является контентовым блоком, на который мы применим свойство (это также поможет избежать проблем с z-index в IE7). является невидимым блоком с размытием, который используется для создания тени в IE.

Следующий листинг показывает первый блок CSS-кода, который применяется для каждого браузера:

Здесь мы ставим для браузеров, которые его поддерживают, и затес скрываем тень для IE от альтернативных браузеров. Следующий CSS-код используется только для IE — мы применяем его через conditional comments:

Здесь используется для позиционирования контента и его выпадающей тени. Контентом является с классом . Он должен иметь z-index выше, чем тень — с классом . Последний затем позиционируется при помощи абсолютного позиционирования, и тень создается при помощи задания фильтра blur и фонового цвета.

Особенности расчёта значений параметров , , and для блока тени в IE:

значение расчитывается как смещение по оси Х минус степень размытия;
значение расчитывается как смещение по оси Y минус степень размытия;
значение расчитывается как степень размытия минус смещение по оси Х;
значение расчитывается как степень размытия минус смещение по оси Y.

Таком образом в коде, мы используем следующие расчёты, чтобы эмулировать смещение тени в :

Значение расчитывается как смещение по оси Х минус степень размытия; 10 – 5 = 5
Значение расчитывается как смещение по оси Y минус степень размытия; 10 – 5 = 5
Значение расчитывается как степень размытия минус смещение по оси Х; 5 – 10 = –5
Значение расчитывается как степень размытия минус смещение по оси Y. 5 – 10 = –5

После того, как всё сказано и сделано, конечный результат представлен на рисунке 4:

Рисунок 4: Финальный пример, показывающий выпадающую тень в современных браузерах и в текущих версиях IE

Как сделать тень блока с помощью свойства box-shadow

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

1. Синтаксис свойства box-shadow

Свойство box-shadow прикрепляет одну или несколько теней к блоку. Свойство принимает либо значение none, которое указывает на отсутствие теней, либо список теней через запятую, упорядоченный от начала к концу.

Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset. Допустимые длины ; опущенные цвета по умолчанию равны значению свойства color.

Свойство не наследуется.

Рис. 1. Синтаксис свойства box-shadow

box-shadow
Значения:
x-offset	Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset	Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur	Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжение	Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цвет	Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
`inset`	Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.
`none`	Значение по умолчанию, означает отсутствие тени.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image, если таковые имеются).

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

2.3. Тень в стиле «материальный дизайн»

See the Pen YpypeE by Elena (@html5book) on CodePen.

По материалам

CSS3-оформление текста
CSS3-переходы