Css3. работа с тенями. часть 2

Как сделать тень блока с помощью свойства 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-переходы

CSS Свойства

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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-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-eventspositionquotesresizerighttab-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

Генераторы CSS-теней – эффективные решения

Для упрощения создания нужных эффектов существуют специальные CSS3-генераторы. Вот самые удобные и функциональные из них:

CSS3 Generator

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

CSS3Gen

Хороший генератор тени CSS, позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3-генератор позаботится обо всех префиксах для популярных браузеров:

CSS3 Please

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

Удачной работы!

Ejemplos

En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un en lugar de una tercera sombra).

Podrías dispararme con tus palabras,
podrías cortarme con tus ojos,
podrías matarme con tu odio,
y aún, como el aire, levantarme.
-Traduccion-

HTML

Cuando el , , y son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un de cualquier otro valor, las esquinas habrían sido redondeadas.

Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del modelo de caja.

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

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

Возьмем, к примеру, эту ретро-тень:

body {
	background: #fff3cd;		/* изменяем цвет фона */
}

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

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

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

Интересно, что вы можете добавлять более одной 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);    /* дает две тени */
}

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

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

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

Этот эффект основывается на функции определения нескольких красивых теней 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);		
}

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

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

Следующий эффект был опубликован на MarkDotto.com, в нем используется 12 отдельных теней, чтобы создать реалистичный 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 выглядят в браузере:

3D-эффект тени

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

Гордон использует некоторую продвинутую магию 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;
}

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

Эффект вырезанного текста

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

body {
	background: #992d23;			/* изменяем цвет фона */
}

.text {
	font-size: 5em;
	color: white; 												
	text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

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

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

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

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

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

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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-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-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-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-wrapz-index

Расширенное задание параметров box-shadow

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

CSS

box-shadow: 10px 10px 5px #cccссс;

1	box-shadow10px10px5px#cccссс;

Значение 5px задает размытие тени, а #cccссс – цвет тени в шестнадцатеричной системе.

Для задания смешения и размытия мы можем указывать величину в пикселях или относительных единицах измерения (em).

Цвет так же можно задавать различными способами. Мы можем задать цвет тени шестнадцатеричным значением, использовать формат RGB или же можно задать полупрозрачную тень с помощью формата RGBA. Например, вот так:

CSS

box-shadow: 10px 10px 5px rgba (120,120,120,0.5);

1	box-shadow10px10px5pxrgba(120,120,120,0.5);

Здесь первый три цифры (120,120,120) – это значения цветов красный, зелёный, синий.
Последнее число (0.5) – это уровень прозрачности, который может иметь значения от 0 до 1

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

И тогда мы получим такой результат:

Красивая тень CSS3

More Examples

Example

Add a blur effect to the shadow:

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

Example

Define the spread radius of the shadow:

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

Example

Define multiple shadows:

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

Example

Add the inset keyword:

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

Example

Images thrown on the table. This example demonstrates how to create «polaroid» pictures and rotate the
pictures:

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

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)

All CSS Text Properties

Property	Description
color	Sets the color of text
direction	Specifies the text direction/writing direction
letter-spacing	Increases or decreases the space between characters in a text
line-height	Sets the line height
text-align	Specifies the horizontal alignment of text
text-decoration	Specifies the decoration added to text
text-indent	Specifies the indentation of the first line in a text-block
text-shadow	Specifies the shadow effect added to text
text-transform	Controls the capitalization of text
text-overflow	Specifies how overflowed content that is not displayed should be signaled to the user
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align	Sets the vertical alignment of an element
white-space	Specifies how white-space inside an element is handled
word-spacing	Increases or decreases the space between words in a text

❮ Previous
Next ❯

Sintaxe

Especificando uma única box-shadow usando:

• Dois, três ou quatro valores para .

  • Se apenas dois valores forem definidos, eles serão interpretados como valores de .
  • Se o terceiro valor for dados, é interpretado como .
  • Se o quarto valor for dados, é interpretado como .
• Opcionalmente, o atributo .
• Opcionalmente, o valor .

Para especificar mais de uma sombra, separe-as com virgula.

Se não for especificado, a sombra ganha o efeito de como se a caixa fosse aumentada acima do conteúdo).
A presença da palavra-chave muda a sombra para dentro da moldura (como se o conteúdo estivesse pressionado dentro da caixa). As sombras de inserção são desenhadas dentro da borda (mesmo as transparentes), acima do plano de fundo, mas abaixo do conteúdo.

Existem dois valores  (en-US)  para configurar o desvio (offset) da sombra:

 especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.

especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.

Consulte  (en-US) para as unidades disponíveis.

Se ambos os valores forem , a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso  e/ou  estiverem configurados).

Este é um terceiro valor para (en-US). Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é  (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:

Este é um quarto valor de  (en-US). Valores positivos farão com que a sombra expanda e cresça maior, valores negativos farão com que a sombra encolha. Se não for especificado, o valor padrão é  (a sombra terá o mesmo tamanho do elemento)

Consulte  para possiveis palavras-chave e notações. Se não for especificada, a cor que será utilizada vai depender do navegador — geralmente é o valor da propriedade , mas tenha em mente que o Safari atualmente imprime uma sombra transparente neste caso.

Each shadow in the list (treating as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not , then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one and the other not , the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is , all lengths are , and whose (or not) matches the longer list.

none  

where

where

where

where

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

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

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

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

Вариации

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

Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.

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

Установите для цвета текста немного более темный оттенок, чем фон.

Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:

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)

Эффект оттиска букв

Ограничения фильтра drop-shadow

Недостатки использования фильтра:

• Чтобы создавать такую объемную тень внизу блока CSS, как с помощью box-shadow, фильтр drop-shadow должен поддерживать четвертое значение spread. Но в текущей реализации Webkit box shadow четвертое значение будет расцениваться как ошибка, и тень в этом случае не выводится вообще;
• Спецификация фильтра не поддерживает значение inset, поэтому с помощью кода фильтра вы не сможете легко создавать внутреннюю тень.

Другие различия

Оба эффекта тени учитывают border-radius и transform. Но CSS тень блока снизу, созданная с помощью фильтра, будет выводиться под элементом, не учитывая фон, в то время как box-shadow будет учитывать сплошной фон элемента. Если граница неоднородная (например, пунктирная), фильтр будет учитывать это, а box-shadow нет:

border: 3px solid #262b57; 
width: 150px; height:150px;
border-radius: 10px;
transform: rotate(8deg);
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);

border: 3px dashed #262b57;
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);

Так как фильтр создает тень по бокам блока CSS только для рамки (которая в данном случае имеет толщину всего в четыре пикселя), то версия тени с помощью фильтра выглядит светлее.

Вердикт

Фильтр (drop-shadow), безусловно, является победителем в этом раунде: он имеет большую гибкость, а его недостатки проявляются только, если речь идет о внутренней тени и отсутствии ее распределения.

Скорость и качество

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

Вывод

На данном этапе мы можем установить несколько простых правил:

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

Если у вас есть PNG-изображение с альфа-маской, существует несколько вариантов реализации:

• Создайте тени с помощью Photoshop, чтобы все браузеры отображали их одинаково;
• Оставьте изображение без изменения и используйте фильтр drop-shadow, учитывая, что на данный момент только Webkit-браузеры будут выводить эту тень.
• Попробуйте применить к контенту SVG-фильтр drop-shadow, чтобы тень одинаково распознавалась в других браузерах.

Если элемент имеет неоднородный контур, который не задается с помощью border-radius, почему бы не создать CSS тень вокруг блока с помощью обоих методов?

Webkit будет «дублировать» тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow.

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