Css эффекты теней

Шаг 1. Отображение тени

Основная идея состоит в том, чтобы сопоставить каждый из трех компонентов
изображения тени своему контейнеру <div> через
соответствующий класс. Цель применения трех изображений состоит в том, чтобы
использовать два маленьких рисунка для маскирования среза края тени и создания
плавного закругления краев. Для этого один рисунок помещается в правый верхний
угол тени от объекта, а второй — в левый нижний.

Чтобы один рисунок находился поверх другого и маскировал его, необходимо изменить
его положение с помощью стилевого свойства z-index.
На самом деле волноваться по этому поводу не стоит, т.к. вложенная структура
тегов <div> работает на нас и позволяет автоматически
получить нужный порядок. Мы просто назначаем класс с тенью самому нижнему
тегу
<div> в наборе слоев. Поскольку нижние теги <div>
будут располагаться наверху, то им присвоим классы, которые отображают уголки
тени (пример 2).

Пример 2. Стили для отображения рисунков с тенью

Когда мы назначаем требуемый рисунок к нужному классу, следует установить для
него позиционирование с помощью свойства background-position.
Если мы оставим его значение по умолчанию, то все, что мы увидим — это
повторяющийся рисунок corner_tr.gif, поскольку
слой с ним находится наверху набора слоев. Помните, техника «луковой шелухи»
требует прозрачности верхних слоев, чтобы мы могли бы увидеть то, что находится
ниже них. Для этого следует отменить повторение фонового рисунка с помощью значения
no-repeat и позиционировать рисунок в нужном месте
композиции.

Здравый смысл говорит нам, что изображение с именем corner_tr.gif
должно находиться в правом верхнем углу, в то время как corner_bl.gif — в левом нижнем. Но что касается основного рисунка с тенью (shadow.gif),
надо ли позиционировать и его? Факт — надо. Если мы хотим, чтобы тень
отбрасывалась правее и ниже любого объекта, то следует определить ее положение
в классе wrap1. В противном случае рисунок заполнит
элемент <div> относительно его верхнего левого угла,
т.е. совсем не там, где он требуется.

Основной слой — DIV.wrap1

Внешний <div> содержит самый большой из трех
компонентов тени (файл shadow.gif), который позиционирован
по правому и нижнему краю (пример 3).

Пример 3. Стиль для основного слоя

На рис. 2 показано содержимое слоя и требуемый графический файл.

Рис. 2. Содержимое слоя wrap1

Средний слой — DIV.wrap2

Второй <div>, вложенный внутри первого, маскирует
срез левого нижнего края тени и устанавливает плавное закругление (пример 4).

Пример 4. Стиль для среднего слоя

На рис. 3 показано содержимое слоя и требуемый графический файл.

Рис. 3. Содержимое слоя wrap2

Внутренний слой — DIV.wrap3

Третий <div>, вложенный внутри второго, занимается срезом
верхнего правого края тени.

Пример 5. Стиль для внутреннего слоя

На рис. 4 показано содержимое слоя и требуемый графический файл.

Рис. 4. Содержимое слоя wrap3

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index

Задаём несколько теней для картинки

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

PHP

box-shadow: inset 0px 0px 20px 20px #000, 0px 10px 15px 10px #000;

1	box-shadowinset0px0px20px20px#000, 0px 10px 15px 10px #000;

В результате получим такую картину:

Вот еще один пример применения сразу нескольких теней для картинки.

Здесь мы для класса картинки применяем сразу пять значений тени. Первое значение идёт без смещения, а далее мы зададим четыре разных тени с разными цветами и смещением в разные стороны.

PHP

.shadow-3 {
box-shadow: 0 0 0 1px #ccc,
0 -20px 0px -5px #FBC16A,
20px 0 0px -5px #6BFA76,
0 20px 0px -5px #6BA5FA,
-20px 0 0px -5px #F4F171;
}

1 2 3 4 5 6 7

.shadow-3{ box-shadow1px#ccc, -20px0px-5px#FBC16A, 20px0px-5px#6BFA76, 20px0px-5px#6BA5FA, -20px0px-5px#F4F171; }

Если добавить размытие, к примеру, по 10 пикселей, то наша рамка для картинки, созданная при помощи теней, будет выглядеть следующим образом:

PHP

.shadow-3 {
box-shadow: 0 0 0 1px #ccc,
0 -20px 15px -5px #FBC16A,
20px 0 15px -5px #6BFA76,
0 20px 15px -5px #6BA5FA,
-20px 0 15px -5px #F4F171;
}

1 2 3 4 5 6 7

.shadow-3{ box-shadow1px#ccc, -20px15px-5px#FBC16A, 20px15px-5px#6BFA76, 20px15px-5px#6BA5FA, -20px15px-5px#F4F171; }

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

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

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 ❯

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

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

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;

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-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-eventspositionquotesresizerightscroll-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

Пример тени

Интересный эффект тени – лишь слева и справа от блока, реализуется таким кодом.

.effect2 {
  position: relative;
}
.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Суть проста – тени даются не самому блоку, а его псевдоэлементам, которые прописываются в селекторе. Если воспользоваться лишь одним из псевдоэлементов, можно сделать тень по одну из сторон снизу.

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

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

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

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

Комментарии переводчика

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

Итак, вам понадобится три рисунка: собственно сама тень (рис. 7), правый
верхний уголок (рис. 8) и левый нижний уголок (рис. 9).

Рис. 7. Изображение тени (файл shadow.png)

Рис. 8. Изображение правого верхнего уголка (файл corner_tr.png)

Рис. 9. Изображение левого нижнего уголка (файл corner_bl.png)

Ширина изображения тени зависит от цели ее использования,
например, если планируется устанавливать тень для рисунков шириной не более
600 пикселов, то имеет смысл сделать такой же размер и у тени.

Код для формирования тени с помощью приведенных картинок и методики «луковой
шелухи» показан в примере 9.

Пример 9. Создание тени

Значения, которые управляют положением тени относительно объекта, подбираются
экспериментально, исходя из собственных предпочтений и дизайна сайта.

Расширенное задание параметров 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

Эффект тени 7

Такой же эффект только тень снизу и сверху блока.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Пример использования

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент <p>):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-shadow в CSS</title>
<style> 
p {
color: #fff; /* устанавливаем цвет текста белый*/	
text-shadow: 1px 1px 4px #000; /* размещаем текстовую тень*/	
} 
p::selection { /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: 1px 1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
p::-moz-selection { /* описание псевдоэлемента для браузера Firefox (дублируем стили) */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: -1px -1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
</style>
</head>
	<body>
		<p>Текст с добавленной тенью.</p>
		<p>Текст с добавленной тенью.</p>
	</body>
</html>

В этом примере мы для всех азацев (элемент <p>) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.

Результат нашего примера:

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

Множественная текстовая тень

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

Пример блока объявлений для множественной тени:

.multipleShadow {
text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */	
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример создания множественной текстовой тени</title>
<style> 
.test {
text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */
line-height: 150px; /* задаем высоту строки */
text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red; /* используем 8 теней в одном объявлении */
} 
.test2 {
text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5); /* устанавливаем тень смещенную вправо */
} 
.test3 {
text-shadow: -6px 6px 2px rgba(0, 255, 0, 0.5); /* устанавливаем тень смещенную влево */
} 
.test4 {
text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5); /* используем только радиус размытия, получая неоновый эффект */
} 
</style>
</head>
	<body>
		<div class = "test">Радужный текст</div>
		<div class = "test2">Текст с добавленной тенью</div>
		<div class = "test3">Текст с добавленной тенью</div>
		<div class = "test4">Текст с добавленной тенью</div>
	</body>
</html>

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

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

Рис. 68а Пример создания множественной текстовой тени.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)

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

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

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