Дрессируем box-shadow

Property Values

Value	Description	Play it
none	Default value. No shadow is displayed	Play it »
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box	Play it »
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box	Play it »
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be	Play it »
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow	Play it »
color	Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.	Play it »
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner 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)

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

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
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
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-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
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
row-gap

scroll-behavior

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<title>CSS Buttons</title>
</head>
<body>
	<!-- Раздел стилей -->
	<style type="text/css">
  	</style>
	<!-- Раздел HTML -->
</body>
</html>

В раздел HTML добавьте тег <h1> с классом text:

<!-- Раздел HTML -->
<h1 class="text">Web Code Geeks</h1>

Для этого элемента мы будем добавлять тень текста CSS.

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

<!-- Раздел стилей -->

<style type="text/css">

body{
	font-family: "Arial", "sans-serif"; /* пользовательский шрифт */  
}

h1 {                                /* выравнивание текста */
	margin-left: 7em;
	margin-top: 5em;
}
</style>

Теперь давайте зададим для текста атрибут text-shadow.

Но сначала разберемся, какие значения принимает этот атрибут:

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

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

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

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

где цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA (0,0,0,0.3);.

В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:

<!-- Раздел стилей -->

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

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

Созданная тень

Property Values

Value	Description	Play it
none	Default value. No shadow is displayed	Play it »
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box	Play it »
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box	Play it »
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be	Play it »
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow	Play it »
color	Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.	Play it »
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner 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

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

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 Text Shadow Examples

Text-shadow on a white text:

h1 {
  color: white;  text-shadow: 2px 2px 4px #000000;}

Text-shadow with red neon glow:

h1 {
  text-shadow: 0 0 3px #ff0000;}

Text-shadow with red and blue neon glow:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;}

Example 4

h1 {
  color: white;  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
0 5px darkblue;}

Tip: Go to our CSS Fonts chapter to learn about how to change fonts, text size and the style of a text.

Tip: Go to our CSS Text Effects chapter to learn about different text effects.

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 ❯

Значение свойств

Значение	Описание	Воспроизвести
none	Значение по умолчанию. Тень не отображается	Воспроизвести »
h-offset	Требуется. Горизонтальное смещение тени. Положительное значение помещает тень на правую сторону бокса, отрицательное значение помещает тень на левую сторону бокса	Воспроизвести »
v-offset	Требуется. Вертикальное смещение тени. Положительное значение помещает тень ниже бокса, отрицательное значение помещает тень выше бокса	Воспроизвести »
blur	Необязательный. Радиус размытия. Чем выше число, тем более размытой будет тень	Воспроизвести »
spread	Необязательный. Радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени	Воспроизвести »
color	Необязательный. Цвет тени. Значение по умолчанию цвет текста. Смотреть на CSS Значение цвета для получения полного списка возможных значений цвета.Примечание: В Safari (на ПК)требуется параметр color. Если цвет не указан, тень не отображается вообще.	Воспроизвести »
inset	Необязательный. Изменяет тень с внешней тени (начало) на внутреннюю тень	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитайте о inherit

Совет: Подробнее о допустимых значениях (CSS Единицы длины)

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

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

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

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

CSS3 Generator

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

CSS3Gen

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

CSS3 Please

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

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

НПНаталья Патлахаавтор

Синтаксис

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

• Два, три и четыре значения .

  • Если задано только два значения, они интерпретируется как 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  

где

где

где

где

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 — два варианта реализации

Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:

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

Тени текста в CSS — text-shadow

Свойство text-shadow поддерживают все популярные браузеры (Google Chrome, Firefox, Opera, Safari). Text-shadow имеет четыре параметра:

• Смещение по горизонтали (положительное – вправо, отрицательное – влево);
• Смещение по вертикали (положительное — вниз, отрицательное – вверх);
• Радиус размытия;
• Цвет тени.

По синтаксису text-shadow во многом напоминает box-shadow:

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

What Is CSS box-shadow?

The box-shadow property is used to apply a shadow to HTML elements. It’s one of the most used CSS properties for styling boxes or images.

CSS Syntax:

1. horizontal offset: If the horizontal offset is positive, the shadow will be to the right of the box. And if the horizontal offset is negative, the shadow will be to the left of the box.
2. vertical offset: If the vertical offset is positive, the shadow will be below the box. And if the vertical offset is negative, the shadow will be above the box.
3. blur radius: The higher the value, the more blurred the shadow will be.
4. spread radius: It signifies how much the shadow should spread. Positive values increase the spread of the shadow, negative values decrease the spread.
5. Color: It signifies the color of the shadow. Also, it supports any color format like rgba, hex, or hsla.

The blur, spread, and color parameters are optional. The most interesting part of box-shadow is that you can use a comma to separate box-shadow values any number of times. This can be used to create multiple borders and shadows on the elements.

Вариации

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

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