Как сделать тень для картинки в css

Эффект тени для картинки с помощью CSS

Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.
В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:

Css-тень: как сделать

Без тьмы нет света, без тени нет формы. Даже основной инструмент макияжа у женщин называется "тени". Если вы хотите навести красоту на страницах своего сайта, вам необходимо расставить правильные акценты — добавить CSS-тень там, где это необходимо.

Видео: Тень блока css

Материал, изложенный ниже, поможет вам научиться устанавливать тень для блока или картинки при помощи CSS-кода.

CSS-тень. Синтаксис

Собственно box-shadow, где box — это блок, а shadow — это сама тень.

Код записывается в фигурных скобках:

Видео: Понимание CSS: творческое использование свойства box-shadow для стилизации кнопок

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

  • 11px — смещение тени относительно блока по оси Х (положительное значение (20px) приведет к смещению тени вправо, отрицательное (-37px) — влево)-
  • 22px — смещение тени относительно блока по оси У (положительное значение (5px) приведет к смещению тени вниз, отрицательное (-17px) — вверх);
  • 33px — это параметр размытия, чем больше число, тем сильнее эффект;
  • 44px — радиус тени, также прямо пропорционален;
  • #333333 — цвет, в который окрашивается тень.

Последние три параметра необязательные и могут просто не указываться в строке, т. е. 10px 13px-> — такая строка не является ошибочной (цвет тени будет идентичным цвету текста в блоке).

Таким образом, создание тени на страницах вашего сайта не представляет собой сложности, зато сколько приятных глазу эффектов вы можете сотворить! Сделать свое детище более уникальным, неповторимым, ведь в дизайне важна каждая мелочь, каждая деталь. Вот, кажется, ничего особенного, а с ней гораздо интереснее и привлекательнее.

Видео: Красивая граница с тенью на CSS

css тень

Рассмотрим несколько наглядных примеров, как выглядит CSS-тень блока в зависимости от написания кода:

  1. — CSS-тень со смещением по осям на 25 пикселей.css тень блока
  2. — CSS-тень со смещением по осям на 25 пикселей и размытием краев на 10 пикселей.css тень картинки
  3. — CSS-тень со смещением по осям на 25 пикселей, размытием краев на 10 пикселей и заданным радиусом в 5 пикселейтень
  4. — CSS-тень со смещением по осям на 25 пикселей, размытием краев на 10 пикселей, заданным радиусом в 5 пикселей и цветом.color

Эффекты тени

Для создания более красивых, изящных, оригинальных теней есть различные эффекты. Вы можете сделать внутреннюю тень. Для этого достаточно в коде перед параметрами указать "inset", далее описание параметров пойдет как обычно:

inset

.

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

.multiple

Тень картинки

Помимо блоков на страницах сайта безусловно будут картинки, фотографии, фоны — все эти элементы тоже смотрятся намного интереснее с тенями. Можно оформлять картинки предварительно в графических редакторах и вставлять их на страничку уже с тенями. Но, во-первых, это не всегда возможно по разным причинам, в том числе и из-за отсутствия навыков работы с графикой, во-вторых, любые манипуляции с изображением прибавляют ему "вес", и такая картинка вполне может тормозить загрузку страниц. В таком случае вы можете сделать CSS-тень картинки.

images

Самое простое и синтаксически правильное решение этой задачи — создание блока, фоном в которм будет ваша картинка. Далее вы делаете необходимые тени для блока и они отображаются на фоне-картинке:

  • .block1

В данном примере мы создали внутреннюю тень без смещения по осям, с размытием и радиусом, определили цвет, высоту и ширину блока, а фоном (background) назначили куартинку. В итоге у нас получилась картинка со внутренней тенью.

Согласитесь, создавать тени при помощи CSS-кода — это довольно простое, вместе с тем увлекательное, а главное — полезное занятие.

Как сделать тень картинки в css?

Задумывались ли вы, что именно столкновение света и тени позволяет нам увидеть форму предметов. Если выключить свет, то в темноте мы не увидим никакой формы. Если все осветить очень ярким прожектором, то формы мы тоже не увидим. Только столкновение света и тени позволяют нам ее увидеть.

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

Основных форм, из сочетания которых можно построить любую сложную форму, четыре. Это: куб, цилиндр, конус и шар. У каждой из этих форм есть свои закономерности распространения светотени и свои отличия.

Рассмотрим их по порядку.

Собственная тень

Свет и тень на кубе встречаются в одну жесткую прямую линию, которую называют «линией разлома на светотень» или просто «разломом».

При этом напряжение тени в сторону света усиливается, также как и напряжение света в сторону тени. Другими словами тень на теневой грани куба будет самой темной там, где она соприкасается с освещенной гранью. В свою очередь и свет на светлой грани будет светлее у линии разлома. Таким образом получается, что ни самая темная часть тени, ни самая светлая часть света не лежат на самом краю формы. У куба разлом на светотень будет «жестким».

Цилиндр.

Разлом на светотень на цилиндре ведет себя в чем-то похожим образом. Свет и тень здесь тоже как и у куба образуют прямую линию. Тень так же, как и на кубе будет более напряжена в сторону света. Такое усиление тени в сторону света – это общая закономерность для любых форм. Свет тоже не лежит на краю формы. И это тоже общая закономерность.

Но есть и существенные отличия в распространении света по цилиндру. Здесь свет и тень не встречаются в одну линию, а между ними есть промежуточные полутона более светлые к свету, и более темные к тени. На цилиндре мы видим «мягкий» разлом.

Конус

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

Тем не менее, конус выделен как одна из четырех основных фигур и у него есть одно существенное отличие. Чем ‘уже форма, тем напряженнее и контрастнее становится тень, а там, где форма, становится шире, тень светлеет и как бы расплывается по форме.

У шара наблюдается несколько иная картина. Линия разлома проходит по окружности, лежащей перпендикулярно направлению источника света.

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

Это то, что касается «собственных» теней, т.е. теней на самой форме. А есть еще и «падающие тени». «Падающей» называют тень, которую форма отбрасывает на другие поверхности.

Падающая тень

«Падающей» называют тень, которую форма отбрасывает на другие поверхности.

У трех из этих форм – куба, цилиндра и конуса – падающая тень строится по одному принципу, а у шара – по другому.

В первом случае есть точка, где разлом встречается с поверхностью, на которой стоит форма. Это так называемая «мертвая точка». Это то место, где заканчивается собственная тень и начинается падающая. Через эту точку обе тени связаны.

У шара мы наблюдаем другую картину. Линия разлома проскакивает мимо точки соприкосновения шара с поверхностью, на которой он стоит. И «мертвая точка» отсутствует. Падающая тень ложится вокруг точки соприкосновения шара, как бы обводя ее.

Рисуя формы, которые напоминают эти геометрические фигуры, мы должны помнить о закономерностях распространения светотени на них.

И еще. Надо различать светотень и тон в рисунке. И то, и другое может быть сделано с помощью штриховки. Но задачи у светотени и тона разные.

Светотень – это формообразующее начало. Светотень будет одинаково ложиться как на белый, так и на черный или цветной предмет. Любая раскраска предмета или фактура поверхности не изменят законов распространения светотени.

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

Эффект тени 6

Здесь эффект изогнутых теней на дне блока.

Создание эффектов при наведении на картинки при помощи тени

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

.shadow-4:hover <
box-shadow:0 0 6px 6px #555;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
>

Для того, что бы не было резкого скачка при убирании курсора, нам необходимо дописать свойство transition не только для данного класса с псевдоклассом hover, но и просто для класса shadow4.

.shadow-4 <
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
>

Вот что получится в итоге.

Так же мы можем не просто добавлять тень при наведении курсора, а изменять ее параметры. К примеру, мы можем для изображения сделать, что бы при наведении указателя у нас изменялись цвета тени.

Так же воспользуемся для этого псевдоклассом hover. Скопируем значение тени, и немножко его изменим, к примеру, поменяем цвета местами.

.shadow-3:hover <
box-shadow: 0 0 0 1px #ccc,
0 -20px 10px -5px #6BFA76,
20px 0 10px -5px #FBC16A,
0 20px 10px -5px #F4F171,
-20px 0 10px -5px #6BA5FA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

Эффект тени 5

В данном случае тень с двух сторон сильнее сдвинулась вниз.

Вдавленный текст

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

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

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

More Examples

Example

Add a blur effect to the shadow:

Example

Define the spread radius of the shadow:

Example

Define multiple shadows:

Example

Add the inset keyword:

Example

Images thrown on the table. This example demonstrates how to create &#171;polaroid&#187; 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;>

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

Шаг 2. Отбрасывание тени

Следующий шаг для CSS — смещение тени, которое создает эффект ее отбрасывания.
Проще не бывает. Все что требуется — это добавить свойство padding,
которое устанавливает поля справа и снизу для самого нижнего слоя. Когда padding
применяется к тегу <div>, то он изменяет размеры
объекта, и остальные два слоя изменяются вместе с ним. Как результат, все
три компонента тени, расположенные по правой и нижней стороне этих слоев,
смещаются одновременно. Теперь их можно увидеть через пустой промежуток, созданный
с помощью свойства
padding (пример 6).

Пример 6. Использование полей для отбрасывания тени

Результат данного примера продемонстрирован на рис. 5.

Рис. 5. Использование смещения содержимого

Модификация смещения

Изменение величины смещения тени делается почти также просто, как и замена
значений свойства padding для слоя wrap3.
Мы говорим «почти», поскольку настройка значения padding
просто перемещает тень, в то время как уголки продолжают прижиматься к краям
контейнеров. Чтобы точно смоделировать смещение тени, для обоих уголков следует
использовать свойство background-position.

Некоторые разработчики сказали бы, что достаточно настроить значение padding
и остановиться на этом

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

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

Судите сами. Рис. 6 используется ниже для демонстрации двух видов тени.

Рис. 6. Исходное изображение для создания тени

Все образцы в обоих наборах используют одинаковое значение свойства background-image.
Иными словами, одни и те же графические изображения применяются к каждому образцу.
Различается только степень смещения тени.

В наборе 1 сдвиг тени регулируется только значением свойства padding
для слоя wrap3, при этом перемещается только сама
тень без уголков. В наборе 2 значения padding и
background-position изменяются таким образом,
чтобы одновременно смещалась тень и ее уголки.

Набор 1. Результат использования свойства padding
8 пикселов 12 пикселов 18 пикселов

Если вы замечаете различия между приведенными наборами и предпочитаете второй
вариант, то к стилю уголков следует прибавить свойство background-position
и настроить его значение таким образом, чтобы компенсировать влияние
padding. Далее к изображению уголков с внешней
стороны следует добавить пустое белое пространство. Это позволяет рисунку перемещаться
на достаточно большое расстояние от границы слоя, без того, чтобы не терять
способность маскировать край тени. Каждый вид тени немного отличается от другого,
и как только вы начнете экспериментировать со смещением, то сразу станет понятно,
на какую величину следует увеличить белое пространство у картинки с уголками.

CSS тень с помощью изображений

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

Делаем заготовки для тени.

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

Пример HTML и CSS: тени с использованием изображений

Описание примера

По правилам HTML, если элементы вложены друг в друга, то те, которые находятся внутри, будут располагаться поверх тех, которые находятся снаружи. Это же относится и к фону элементов.
Для самых внешних блоков нашего примера (&#171;rc&#187; и &#171;cb&#187;) указываем фон с помощью свойства CSS background. Причем у &#171;rc&#187; позиционируем фон к правой стороне блока и разрешаем ему размножение только по вертикали, а у &#171;cb&#187; — к нижней стороне с размножением только по горизонтали. В итоге получаем две полоски тени, которые находятся справа и снизу от контента. Но по углам эта тень выглядит совсем не так, как нам надо, особенно в правом нижнем углу, где полоски накладываются друг на дружку. Идем дальше.
Внутрь внешних блоков помещаем еще три (&#171;lb&#187;, &#171;rb&#187; и &#171;rt&#187;), каждому из которых фоном задаем по одному уголку тени. Позиционируем фоновые изображения в нужные углы блоков и запрещаем им размножение (no-repeat). В результате эти фоновые кусочки частично накрыли в нужных нам местах фоновые полоски, которые были созданы ранее. Все, вот теперь тень готова.
По умолчанию блоки растягиваются во всю ширину родителя, поэтому для ее регулировки будем использовать самый внешний элемент (&#171;cb&#187;), применив к нему свойство CSS width с нужным значением. У него же указываем фоновый цвет (если указать цвет фона у другого блока, то он перекроет часть тени).
Высоту (если нужно) и внутренние отступы наоборот задаем самому внутреннему элементу (&#171;rt&#187;)

Особенно здесь важно указать нижний и правый отступ, чтобы контент не наложился на тень.
Чтобы в IE6 и IE7 все отображалось, как положено, прописываем для них свойство zoom:1. Свойство отсутствует в спецификации CSS.

Таким образом можно создать тень не только с двух сторон, но и, например, с четырех, правда понадобится больше оберточных блоков, что и является основным минусом данного способа.

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *