Тень элемента в css

Введение

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

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

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

CSS Properties

Работа с фоном элемента в 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-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 урок 9. видимость элемента, оформление ссылок css и списков, курсор

С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

body {
    background: #222;
}
 
#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

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

Border

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

Чтобы создавать такую объемную тень внизу блока 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

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

Данная публикация является переводом статьи «box-shadow property vs. drop-shadow filter: a complete comparison» , подготовленная редакцией проекта.

Styling slotted content

Now let’s consider the situation with slots.

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

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

The result is bold, but not red.

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

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

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

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

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

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

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

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

CSS 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

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

Summary

Shadow DOM can include styles, such as or .

Local styles can affect:

shadow tree,
shadow host with -family pseudoclasses,
slotted elements (coming from light DOM), allows to select slotted elements themselves, but not their children.

Document styles can affect:

shadow host (as it lives in the outer document)
slotted elements and their contents (as that’s also in the outer document)

When CSS properties conflict, normally document styles have precedence, unless the property is labelled as . Then local styles have precedence.

CSS custom properties pierce through shadow DOM. They are used as “hooks” to style the component:

The component uses a custom CSS property to style key elements, such as .
Component author publishes these properties for developers, they are same important as other public component methods.
When a developer wants to style a title, they assign CSS property for the shadow host or above.
Profit!

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)

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

Тень и свойство clip-path

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

В CSS существует фильтр, который тоже делает CSS тень блока — drop-shadow() . Но у вас не поучится использовать его непосредственно на элементе, так как clip-path просто отрежет эту тень. Поэтому создаем родительский блок и наложим тень на него.

Профессиональная разработка сайтов под заказ

Прекрасный способ визуально выразить главную мысль

Источник

Breaking it down

With the fundamentals in place, let’s look at how to create the 3D card effect showcased in the demo. The first step is to move the shadow to a pseudo-element, like we did above. Let’s also add all of the layout code to create the card:

Note that we’re adding a to both the , and , since we’re going to animate both of these elements: for , and for .

These styles give us a white box with a subtle . The stronger shadow from is completely hidden at this point, and you can’t interact with the box:

To create the same effect as in the demo, now all we need to do is to scale up the on hover, and fade in the pseudo-element and its shadow:

That’s it! Hover the box to preview the effect:

To summarize, here’s all the CSS, with all vendor prefixes, and some custom easing for additional :

That’s certainly a lot of CSS to achieve the same effect as simply animating , just with improved performance. Why bother?

Even if your desktop likely handles animating without any issues, your phone may not, and even your desktop may start to stutter when animating a more complex layout.

Keep transitions and animations to only and , and you’re certain to achieve the best possible performance, and with that, the best possible user experience.

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

Text shadow effect!

Example

h1
{
text-shadow: 2px 2px 5px red;
}

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 ❯

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.

Значение	Описание
смещение-x и смещение-y	Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)
размытие	Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени	Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет	Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset	Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none	Указывает на отсутствие тени.