Изучаем css: тень блока
Содержание:
Введение
Тени часто используются в веб-дизайне и полиграфическом дизайне, чтобы придать элементам больше глубины. Для того, чтобы создать тени для веба, обычно используется несколько изображений, созданных в графических редакторах, и затем включенных в страницу в качестве фонового изображения в CSS. Этот прием работает, но он также является трудоемким в плане создания необходимой графики, он также требует засорения html-кода кучей лишних -ов, т.к. каждый элемент может иметь только одно изображение, присоединенное в качестве фона.
CSS3 теперь позволяет нам создавать несколько теней на любой элемент блочного типа при помощи CSS-свойства . Это экономит много времени в графических редакторах и позволяет избавиться от кучи лишних -ов, но к сожалению не поддерживается браузером Internet Explorer. Что же нам теперь лучше сделать?
В этой статье я покажу вам возможное кроссбраузерное решение — технику с использованием , которая также добавляет поддержку IE для этого свойства. Я не буду описывать использование базового синтаксиса этого свойства, т.к. это итак хорошо описано в англоязычной статье CSS3 borders, backgrounds and box-shadows.
Ü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 |
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-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 ❯
Базовая настройка
Создайте новый 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;
}
Представление в браузере этого текста с тенью будет выглядеть так:
Созданная тень
Вариации
Дальше мы будем по-разному изменять цвет фона элемента body. Делаем мы это потому, что для некоторых теней CSS нужен определенный фон, иначе они не будут заметны.
Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.
Эффект оттиска
Установите для цвета текста немного более темный оттенок, чем фон.
Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:
body {
background: #222;
}
.text {
font-size: 5em;
color: rgba(0,0,0,0.6); /* цвет текста */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* добавление тени */
}
Используя код RGBA, вы можете установить непрозрачность цвета
Обратите внимание на то, что цвет текста имеет непрозрачность 60% (0.6), а тени div CSS 10% (0.1)
Эффект оттиска букв
Ограничения фильтра drop-shadow
Недостатки использования фильтра:
- Чтобы создавать такую объемную тень внизу блока CSS, как с помощью box-shadow, фильтр drop-shadow должен поддерживать четвертое значение spread. Но в текущей реализации Webkit box shadow четвертое значение будет расцениваться как ошибка, и тень в этом случае не выводится вообще;
- Спецификация фильтра не поддерживает значение inset, поэтому с помощью кода фильтра вы не сможете легко создавать внутреннюю тень.
Другие различия
Оба эффекта тени учитывают border-radius и transform. Но CSS тень блока снизу, созданная с помощью фильтра, будет выводиться под элементом, не учитывая фон, в то время как box-shadow будет учитывать сплошной фон элемента. Если граница неоднородная (например, пунктирная), фильтр будет учитывать это, а box-shadow нет:
border: 3px solid #262b57; width: 150px; height:150px; border-radius: 10px; transform: rotate(8deg); box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);
border: 3px dashed #262b57; box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);
Так как фильтр создает тень по бокам блока CSS только для рамки (которая в данном случае имеет толщину всего в четыре пикселя), то версия тени с помощью фильтра выглядит светлее.
Вердикт
Фильтр (drop-shadow), безусловно, является победителем в этом раунде: он имеет большую гибкость, а его недостатки проявляются только, если речь идет о внутренней тени и отсутствии ее распределения.
Скорость и качество
Качество отображения теней, полученных с помощью этих двух способов, примерно одинаково. Фильтры drop-shadow имеют преимущество аппаратного ускорения, если браузер поддерживает его; box-shadow не имеет доступа к нему. При других равных условиях фильтр drop-shadow CSS внутреннюю тень блока выводит быстрее.
Вывод
На данном этапе мы можем установить несколько простых правил:
- если элемент является сплошным и имеет сплошную рамку, тогда box-shadow. Это свойство имеет лучшую поддержку, и будет давать тот же визуальный результат, что фильтр и drop-shadow, хотя и на несколько миллисекунд медленнее;
- если вам нужно создать внутреннюю тень — также box-shadow.
Если у вас есть PNG-изображение с альфа-маской, существует несколько вариантов реализации:
- Создайте тени с помощью Photoshop, чтобы все браузеры отображали их одинаково;
- Оставьте изображение без изменения и используйте фильтр drop-shadow, учитывая, что на данный момент только Webkit-браузеры будут выводить эту тень.
- Попробуйте применить к контенту SVG-фильтр drop-shadow, чтобы тень одинаково распознавалась в других браузерах.
Если элемент имеет неоднородный контур, который не задается с помощью border-radius, почему бы не создать CSS тень вокруг блока с помощью обоих методов?
Webkit будет «дублировать» тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow.
Как видите, эти два способа во многом отличаются друг от друга. Надеюсь, эта статья поможет вам решить, какой из них использовать в своих проектах.
Вадим Дворниковавтор-переводчик статьи «box-shadow property vs. drop-shadow filter: a complete comparison»
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
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 ❯
Генераторы CSS-теней – эффективные решения
Для упрощения создания нужных эффектов существуют специальные CSS3-генераторы. Вот самые удобные и функциональные из них:
CSS3 Generator
С помощью CSS3 Generator можно создать до десяти разных эффектов, таких как, например, закругленные углы, плавный переход, тень блока CSS. Генератор очень прост и удобен в использовании:
CSS3Gen
Хороший генератор тени CSS, позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3-генератор позаботится обо всех префиксах для популярных браузеров:
CSS3 Please
Отличный вариант для тестирования CSS3-кода: с помощью редактора вносите изменения в CSS-стили, и блок мгновенно изменится, а вы сможете увидеть результат:
Удачной работы!
НПНаталья Патлахаавтор
Значения свойства
Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.
| Значение | Описание |
|---|---|
| смещение-x и смещение-y | Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры) |
| размытие | Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение) |
| размер тени | Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение) |
| цвет | Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета. |
| inset | Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение) |
| none | Указывает на отсутствие тени. |
Пример
CSS Свойство:
box-shadow:
Результат:
CSS Код:
div#myDIV { background-color: yellow; width: 200px; height: 100px; box-shadow: 10px 10px black; }
Кликните на любое значение свойства, чтобы увидеть результат
Box Shadow CSS Property
The box-shadow property is a CSS3 property that allows you to
create a shadow effect for almost any element of a web page. It is similar to the Drop Shadows
effect in Photoshop, using this property it creates the illusion of depth on 2-dimensional pages.
Using the box-shadow property, you can add one or more shadows to an element. A shadow is
a copy of an element offset by a specified distance. Shadows can be external or internal,
blurry or flat, they can also follow the contours of blocks with rounded corners — using the
border-radius property. Using the keyword inset,
shadows are created inside the element, making the element visually voluminous or depressed.
Syntax
The property takes on a composite value of five different parts: horizontal offset,
vertical offset, blur, spread and shadow color. In addition, you can specify whether the
shadow is external or internal by using the keyword inset.
box-shadow: inset offset-x offset-y blur spread color;
Unlike other properties, such as border, which can be divided into sub-properties
(border-width, border-style, etc.), the box shadow CSS property stands alone. Furthermore,
the order in which you write the property values is important (except the inset keyword, which can
be at the beginning or end.)
Horizontal Offset (X-axis)
The first value offset-x, shifts the shadow along the X axis. A positive value will shift
the shadow to the right, and a negative value — to the left.
Box 1
Box 2
Vertical Offset (Y-axis)
The second value offset-y, shifts the shadow along the Y axis. A positive value will shift the shadow down, and a negative value — up.
Box 3
Box 4
Blur
The third value — blur, is the radius of the shadow blur, see how it works on the box shadow
generator above. A value of 0 means that the shadow will not be blurry at all, the edges and
sides will be absolutely clear. The higher the value, the more blurry the shadow will become.
Negative values are not allowed.
Box 5
Box 6
Spread
The fourth value — spread, represents the size of the shadow or the distance from the
shadow to the element. With a positive value, the shadow will increase, go beyond the element.
A negative value will reduce and compress the shadow.
Box 7
Box 8
Color
The shadow color can be absolutely any color and can be written in different formats
available in CSS (HEX, RGB, RGBA, etc.), we use RGBA, so that you can set the opacity level of the shadow.
Box 9
Box 10
Inset
The inset value determines the position of the shadow. By default, it is not specified,
which means that the shadow will be on the outside of the element. In order for the shadow
to be inside the element, you can add the inset keyword at the beginning or end of the property.
Box 11
Box 12
Multiple Shadows
With the CSS box-shadow property, you can add multiple shadows to an element.
To add multiple shadows, just write them in a single property, separated by commas.
Or, just use the generator above … it’s so much easier!
Box 13
Box 14
Box 15
Box 16
Box 17
Box 18
Соединяя примеры вместе
Вы можете скачать пример для выпадающей тени и пример для внутренней тени, чтобы иметь больше представления, как эта техника работает. Ниже я привёл полный код для базового метода. Первый листинг кода содержит 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
Property Values
| Value | Description |
|---|---|
| none | Default value. No shadow is displayed |
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
| blur | Optional. The blur distance |
| spread | Optional. The size of shadow |
| color | Optional. The color of the shadow. The default value is black. 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. |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Sintaxe
Especificando uma única box-shadow usando:
-
Dois, três ou quatro valores para .
- Se apenas dois valores forem definidos, eles serão interpretados como valores de .
- Se o terceiro valor for dados, é interpretado como .
- Se o quarto valor for dados, é interpretado como .
- Opcionalmente, o atributo .
- Opcionalmente, o valor .
Para especificar mais de uma sombra, separe-as com virgula.
- Se não for especificado, a sombra ganha o efeito de como se a caixa fosse aumentada acima do conteúdo).
A presença da palavra-chave muda a sombra para dentro da moldura (como se o conteúdo estivesse pressionado dentro da caixa). As sombras de inserção são desenhadas dentro da borda (mesmo as transparentes), acima do plano de fundo, mas abaixo do conteúdo. - Existem dois valores (en-US) para configurar o desvio (offset) da sombra:
- especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.
- especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.
- Consulte (en-US) para as unidades disponíveis.
- Se ambos os valores forem , a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso e/ou estiverem configurados).
- Este é um terceiro valor para (en-US). Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:
- Este é um quarto valor de (en-US). Valores positivos farão com que a sombra expanda e cresça maior, valores negativos farão com que a sombra encolha. Se não for especificado, o valor padrão é (a sombra terá o mesmo tamanho do elemento)
- Consulte para possiveis palavras-chave e notações. Se não for especificada, a cor que será utilizada vai depender do navegador — geralmente é o valor da propriedade , mas tenha em mente que o Safari atualmente imprime uma sombra transparente neste caso.
Each shadow in the list (treating as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not , then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one and the other not , the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is , all lengths are , and whose (or not) matches the longer list.
none
where
where
where
where
Значения
none Отменяет добавление тени. <цвет> Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. <сдвиг по x> Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. <сдвиг по y> Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. <радиус> Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания. Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
