Box-shadow

Введение

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

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

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

Syntaxe

La propriété peut être définie grâce :

À deux, trois ou quatre valeurs de longueur () :
- Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l’ombre :
- Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou :
- Si une quatrième valeur est fournie, celle-ci correspondra au rayon d’étalement : .
Au mot-clé optionnel
À une valeur de couleur () optionnelle.

Si la valeur n’est pas définie (le cas par défaut), l’ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).
La présence du mot-clé modifie l’ombre afin qu’elle soit tournée vers l’intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l’intérieur sont dessinées à l’intérieur de la bordure (même les transparentes), au-dessus de l’arrière-plan mais sous le contenu.

Deux valeurs de longueur ( qui permettent de définir le décalage de l’ombre. définit la distance horizontale du décalage et les valeurs négatives placeront l’ombre à gauche de l’élément. définit la distance verticale et les distances négatives placent l’ombre au-dessus de l’élément (cf. pour les différentes unités possibles).
Si les deux valeurs sont , l’ombre est placée derrière l’élément (et peut générer un effet de flou si et/ou est utilisé).

Une troisième valeur de longueur (). Plus cette valeur sera grande, plus le flou de l’ombre sera diffus : l’ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n’est pas définie, sa valeur par défaut est (le côté de l’ombre est rectiligne).

Une quatrième valeur de longueur (). Les valeurs positives étaleront l’ombre et les valeurs négatives rétréciront l’ombre. Si elle n’est pas définie, la valeur par défaut est (l’ombre aura la même taille que l’élément).

Une valeur de couleur (). Si la valeur n’est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété mais Safari affiche une ombre transparente.

Chaque ombre de la liste ( sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l’étalement (lorsque c’est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas , l’ombre interpolée doit respecter cette valeur. Si l’une des ombres a et l’autre non, la liste d’ombres ne peut pas être interpolée. Si les listes d’ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est , toutes les longueurs valent et pour que la valeur corresponde à la plus longue liste.

none

où

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-align-last	Specifies how to align the last line of a text
text-decoration	Specifies the decoration added to text
text-indent	Specifies the indentation of the first line in a text-block
text-justify	Specifies how justified text should be aligned and spaced
text-overflow	Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow	Specifies the shadow effect added to text
text-transform	Controls the capitalization of text
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 ❯

Нативная поддержка браузерами

CSS3-свойство хорошо поддержкивается большинством современных браузеров, однако для кросс-браузерной поддержки, вам необходимо использовать все перечисленные варианты свойства:

Для поддержки в Opera, IE9 и выше используется официальный вариант свойства от консорциума W3C, без префиксов:
Для поддержки в Firefox, используется вариант с префиксом :
Для поддержки браузеров на движке WebKit (таких как Google Chrome и Apple Safari), используется вариант с префиксом :
IE до версии 8 включительно не поддерживает это свойство вовсе, так что вам придётся либо отказаться от тени, либо создать обходной путь — мое решение описано ниже.

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

	Internet Explorer	Firefox	Safari	Chrome	Opera
Давнее прошлое	6.0	3.0	3.2	3.0	9.6
Прошлое	7.0	3.5	4.0	4.0	10.10
Настоящее	8.0	3.6	5.0	5.0	10.60
Ближайшее будущее (первая половина 2010)
Будущее (вторая половина 2010 или позже)	9.0	4.0	5.*	6.0	11.0

Данные об IE9 взяты из IE9 Platform Preview 3.

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)

Синтаксис

Чтобы задать одну тень, можно использовать:

Два, три и четыре значения .
- Если задано только два значения, они интерпретируется как values.
- Если задано третье значение, оно понимается как .
- Если задано четвёртое значение, оно интерпретируется .
Дополнительно, можно задать ключевое слово .
Дополнительно, можно задать значение .

Чтобы задать несколько теней, перечислите их через запятую.

Если ключевое слово не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).
При наличие ключевого слова , тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.

Существуют 2 значения , которые устанавливают смещение тени. определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы можно задать.
Если оба значения равны , то тень расположится за элементом (и будет отображаться размытие, если и/или установлены).

Это третье значение . Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следующее:

Это четвёртое значение . Положительные значения увеличивают тень, отрицательные — сжимают. По умолчанию значение равно (размер тени равен размеру элемента).

Смотрите возможные ключевые слова и нотации для .
Если не указано, используемый цвет будет зависеть от браузера — обычно будет применено значение свойства (en-US), но Safari в настоящее время рисует прозрачную тень в этом случае.

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

где

Вариации

Дальше мы будем по-разному изменять цвет фона элемента 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)

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

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

Данный стиль записывается следующим образом:

box-shadow: inset 4px 4px 8px 5px #333333;

Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):

Ключевое слово : параметр, который необязательно указывать; рисует тень внутри элемента.
Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение означает, что тень без сдвига.
Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение — это тень без сдвига.
Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — . В таком случае тень будет идеально четкой.
Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — .
Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс для корректной работы CSS свойства box-shadow.

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

box-shadow: 15px 15px 20px #8b0163,
            inset 15px 15px 20px #630046;

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Эффект бумаги

box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
            -23px 0 20px -23px rgba(0, 0, 0, .6),
            23px 0 20px -23px rgba(0, 0, 0, .6),
            inset 0 0 40px rgba(0, 0, 0, .1);

box-shadow: 6px 6px #ccc,
            12px 12px #a3a3a3;

box-shadow: 0 0 0 7px rgb(118, 46, 177),
            0 0 0 14px rgba(118, 46, 177, 0.6),
            0 0 0 21px rgba(118, 46, 177, 0.4);

Уголки

box-shadow: -20px 20px 0 -17px #eee,
            20px -20px 0 -17px #eee,
            20px 20px 0 -20px #592385,
            0 0 0 2px #592385;

Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно — главное, иметь чувство меры!

В следующей главе вас ждет изучение свойств width и height, определяющих размеры элементов.

You can watch this tutorial on YouTube as well if you like:

Why Should You Use The CSS box-shadow Property?

Attention to small details separates a good website from an excellent looking website. If you want to add those small details to your website, you should definitely use this property along with many other properties.

Let’s took at some examples.

A Website Design

Pay close attention to the button components in the image above. You’ll see that we have some drop shadows.

Let’s examine these buttons even further:

Button with no box-shadow propertyButton using the box-shadow property

You can tell that the latter one looks more dynamic and interesting, as it has more attention to detail. This is called a drop shadow effect. Let’s see how we can implement it in our code.

Project Setup

CSS

Clear your default browser settings like this:

Now, let’s create a button with the following code:

We’re all set, now let’s start coding!

All the inputs of box-shadow property

Here’s the syntax for the box-shadow property:

Let’s look at each part in more detail.

Tek Köşeye Gölge Vermek

Kutuların sadece x veya y köşelerinden göstermek için box-shadow
tanımının sınırlarınız zorlamamız gerekiyor. Bu iş için bir kaç yöntem
mevcut, ben burada hepsini paylaşıyoruz avantaj ve dezavantajlarını
görerek karar vermek size kalmış.

1. Yöntem bir köşeye gölge verirken aynı zamanda diğer köşelere
kenar çizgisi atayarak.

2. Yöntem Diğer köşelere herhangi bir kenar çizgisi veya gölge
atamadan sadece bir köşeye gölge tanımlamak;

Mantık olarak iki gölge tanımı yapıyoruz, birincisi spread ile kutu
ardalan rengi ile aynı renkte 4px bir alan oluşturuyoruz, ikinci gölge
tanımı ile de bu tanımladığımız boş alanın dışına çıkacak köşeye daha
fazla değer verip dışarı çıkmasını sağlıyoruz.

3. Yöntem Bu örnekte kenar çizgisi oluşturulan yeni kutunun biraz
içinde kalır.

Eğer kenar çizgisi kullanılacaksa;

Blur değeri kadar eksi spread değeri atayarak bu çözüm oluşturulmuştur.

4. Yöntem :before seçicisi yardımı ile absolute tanımlı gölge
eklenir.

Çıkmasını istediğimiz kenara padding tanımı yapılır, :before seçicisi
ile o köşeye ait kenar değeri padding ile aynı tanımlanır. :before
seçicisine box-shadow tanımı yapılır yapılan padding tanımından fazla
değer içermelidir.

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

Übersicht

Die CSS-Eigenschaft beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste. Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren Textschatten (der zuerst angegebene Schatten ist der oberste).

Box-shadow-Generator ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.

Initialwert
Anwendbar auf	alle Elemente. Auch anwendbar auf ::first-letter (en-US).
Vererbt	Nein
Berechneter Wert	Längen absolut gemacht; angegebene Farben berechnet; ansonsten wie angegeben
Animationstyp	eine

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-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-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-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index

Примеры

Пример

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

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

Основы использования теней

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

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.

none

where

Demo

Have a look at the demo and compare the two different techniques we’ll be exploring. If the two examples look the same to you, that’s the point. The only difference is how we apply and animate the shadow. On the left we’re animating on , and on the right we’re adding a pseudo-element with , applying the shadow to that, and animating the of that element.

If you bring up your developer tools and hover one of these items, you should see something similar to this (green bars are paints; less is better):

There are clearly more re-paints when hovering the cards on the left side (animating ), compared to hovering the cards on the right side (which animate the of their pseudo-element).

Why are we seeing this effect? There are very few CSS properties that can be animated without constantly triggering repaints for every frame, namely and . We minimize the amount of repaints (and work that your browser has to do) by sticking to only changing these two properties during the animation.

This is the critical difference between the two techniques, stripping out all of the other layout styles:

In the example that performs better we have two layers: one for the box, and one for the shadow, and only animate the property of the shadow layer.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

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.

Тени при наведении CSS

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

Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.

Далее открываем CSS документ и приступаем к стилизации. Перед тем как создать тень, необходимо создать кнопку. Всё что пока у нас есть — синяя ссылка с подчеркиванием.

Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.

Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.

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

Далее создаем второй селектор .button:hover. В нем мы будем заниматься изменением тени.

Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.

Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.

Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.

Kaynaklar

http://theburningmonk.com/2010/12/having-fun-with-css3-box-shadow-property/ (box-shadow özelliği)
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://matthamm.com/box-shadow-curl.html
http://www.webdesignshock.com/css3-box-shadow/
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/
http://blog.syndicate-fx.com/code-snippets/css3-boxshadow-effects/
http://www.ballyhooblog.com/realistic-css3-box-shadows/
www.sitepoint.com/pure-css3-paper-curl/
http://www.css3.info/preview/box-shadow/
http://www.wewillbeok.com/likeacastshadow/
http://toolboxdigital.com/2011/03/css3-3d-gradient-box/
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/ (makaleye örnek)
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ Örnekler Sayfası
http://translate.google.com/translate?hl=en&sl=auto&tl=en&u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F1338-css3-box-shadow-ombre.html (box-shadow güzel)
http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow (güzel incele)