Тень блока (свойство box-shadow) | CSS
Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.
CSS тень с одной стороны
Снизу (под блоком div)
По бокам (справа и слева)
Многослойный блок с помощью box-shadow
Разноцветная CSS рамка
Еще варианты можно посмотреть у css.yoksel.ru.
CSS внутренняя тень блока (внутри элемента)
Как сделать вдавленный элемент
Как сделать выпуклый элемент с округлыми краями
box-shadow inset и картинка img
box-shadow и HTML тег input
Сначала поле как-будто вдавленное, при наведении появляется голубая обводка, а при фокусе виден эффект плавно появляющегося свечения. Вот так может выглядеть всплывающая форма обратной связи.
Или подсветка внутри input (получилась красивая форма входа CSS):
box-shadow и transition или animation
box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:
да нет да
75 комментариев:
Анонимный Спасибо, вам большое.
Статья очень пригодилась NMitra Рада слышать.) VjokerA интересно Versus Отличная статья, огромное спасибо автору! Анонимный Отличная статья, большое спасибо. Marina Здорово, что Вы опять открыли коменты.
Спасибо за статью! Очень понравилось.
Но опять вопрос, как этим пользоваться?
Например если я хочу на блоге сделать так блок со статьями.
Вставила Ваш код перед ]]> и получилась Ваша катринка выше всего блога, пробовала вставить перед header и тоже ужас.
Можно поподробнее рассказать как пользоваться этими тенями по применению к конкретному блоку на blogger.
Заранее спасибо.
Кстати с иконками в шапку я разобралась. Нашла интересное решение беж гаджетов и прочего. :)))
С Уважением Марина. NMitra Мне трудно представить как это сделать (объяснить). Нужно подбирать селекторы http://shpargalkablog.ru/2011/10/css-selectors.html http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Другое дело если нужно добавить в тело статьи или гаджет HTML/JavaScript: копируете весь код. Анонимный NMitra — Ты Мужик и я Тя уважаю)) Статья просто класс! NMitra ))) Спасибо за комментарий! Анонимный Спасибо большое! Очень полезная статья 🙂 Анонимный Спасибо. Очень-очень пригодилось! NMitra Отлично! Анонимный круто NMitra Благодарю за отзыв! Віталій Данілов Класно! Спасибо! Анонимный А как сделать тень внутри и только сверху? NMitra box-shadow: 0 3px 3px #575555 inset, 0px -6px 4px -4px; Анонимный Спасибо, Наташа 🙂 А у меня еще и вот так получилось: box-shadow: 0 6px 4px -4px #dadada inset; Тоже подходит. Правда, не до конца понял как оно работает. NMitra Аааа, я не правильно поняла. Вместо внутренней тени только над верхней стороной, дала вариант внутренней тени и тени над верхней стороной. Ужас какой, язык сломаешь :))
Анонимный 😀 да я сам просмотрел, решение то уже описано Вами в варианте тени «снизу», а для верха добавил только inset и все получилось. Здоровские решения на Вашем блоге всегда находятся, спасибо за чудеса CSS! 😉 Анонимный спасибо большое намного облегчает труд. Анонимный И снова я в поиске нашел Ваш блог. Как и прежде кликал по всем рекламным блокам. Спасибо! NMitra Приходите ещё) teller Несколько раз находил и опять терял вашу страницу, в конце концов внес в закладки) NMitra ))) А в моих закладках сам чёрт ногу сломает 🙂 Но найти эти статьи через поиск совсем не предоставляется возможным. Вспомнить правильный запрос, а потом просмотреть выдачу просто нереально. Порой час приходится на закладки тратить, плюс отвлекает дико, там же другие хорошие материалы, содержание которых уже подзабылись. В общем это мой больной вопрос ))) Айнур Шакиров Не давно перебрался с делфи на веб программирование, php освоил быстро, но вот css.. его выучить мало.. тут такое воображение надо, что я прямо не знаю, и всегда у меня все криво). Благо ваш блог нашел, все понятно и удобно и все начинает получатся! Огромное спасибо!! Прошелся по всем рекламным ссылкам).. Просто уже не знаю как отблагодарить)) Нигде таких внятных уроков я еще не видел)) NMitra Ох, да у меня тоже с воображением туго. Из той серии, что знаю как, но не знаю что. Порой что-то выходит только в результате случайных действий. Когда с тенью разбиралась, то бегала по квартире с фонариком, смотрела как кнопки на пульте, листок бумаги и т.п. смотрится, когда на них свет падает. ))) Анонимный Спасибо ,статья дельная. очень пригодилось для реализации. Даже не знал, и не мог подумать, что у тени так много реализаций . Спасибо Анонимный Огромный респект и вселенская уважуха. Roman Lozinsky офигенно.
спасибо. NMitra Очень-очень приятно видеть восторженные реплики! Благодарю! Натааша супер! спасибо! Анонимный Отличная страница, полезная! Анонимный Замечательно)) Чпасибо автору! Здесь то что нужно, можно точно и правильно подобрать значения!! NMitra Благодарю за комментарии! Виктория Понравилось оформление блока тенью по бокам (справа и слева). Оформила себе блок подписки. Огромное спасибо за код стилей. Анонимный Я только не могу понять где HTML код. NMitra
Один селектор, я посчитала лишним писать каждый раз HTML. К тому же тут не нужен даже весь код CSS, нужно только значение box-shadow. У «box-shadow inset и картинка img» и ниже есть HTML после CSS. Анонимный Отлично СПАСИБИЩЕ! Анонимный Спасибо за статью. А что нужно добавит, чтоб это работало и в сафари 5.1. ? у меня не получается! NMitra Добавьте -webkit-
-webkit-box-shadow: 0 0 8px; Анонимный Нет, не помогает. Я взял на вооружения boxShadow18. Сафари не реагирует. NMitra Он вообще box-shadow не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект box-shadow можно заменить с помощью фоновой картинки. Анонимный #leftmenu width: 100%;
max-width: 180px;
margin: 1em auto;
padding: 1em;
border-radius: 40px;
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));/*(Скорее всего тут я допускаю ошибку*/
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
-webkit-box-shadow: inset 0px 0px -3px 8px rgba(0, 0, 0, 0.6),
-webkit-box-shadow: inset 0px 0px 3px 8px rgba(252, 255, 255, 0.7),
-webkit-box-shadow: 0px 3px 8px -3px rgba(0, 0, 0, 0.8);
>
NMitra Вместо одной
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
background-color: #646464;
background-image: -webkit-radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); Анонимный #leftmenu
День добрый! Я Вас не оставляю в покое. Спасибо что откликнулись. Просто действительно понравилось ваша статья и примеры, и решил некоторые свой блоки оформить подобным образом. Что касается моей проблемы, такова эффекта я и вчера добился, но тогда пропадает эффект выпуклости, а это для меня как-то важно. А именно почему можете посмотреть, при желании, на сайте www.dlcompany.org спасибо за отзывчивость. Анонимный Скажите пожалуйста, как для движка mozilla применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда — на движке web-kit работает всё 100% — и в chrome и в maxthon — и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon — нет, в internet explorer — тоже неработает (я имел ввиду запись типа:
box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-moz-box-shadow: 0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-webkit-box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);) NMitra Вы хоть имя подставляйте.
Комментарий 46:
сделать так, чтобы на всех браузерах на всех устройствах при использовании всех операционных систем картинка 3D выглядела одинаково крайне не просто. Или просто, коли использовать нарисованный background: url(). Разработчик может лишь следовать общим стандартам w3.org и сделать так, чтобы при отсутствии поддержки box-shadow или другого свойства макет сайта не разъехался и были доступны основные функции регистрации, заказа, формы связи и т.п.
Комментарий 47:
у меня всё работает на windows, префиксы пишутся в другом порядке
box — shadow
Свойство, с помощью которого можно задать блоку тень.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Как понять
- Подсказки
- На практике
- Никита Дубко советует
- Алёна Батицкая советует
- Татьяна Фокина советует
Контрибьюторы:
Обновлено 6 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство, бросающее тень на ваши блоки ��
Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.
Пример
Скопировать ссылку «Пример» Скопировано
Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.
button class="button">Купить немедленно!button>Помимо основных оформительских стилей задаём нашей кнопке тень:
.button box-shadow: -15px 15px 0 0 #ED6742;>.button box-shadow: -15px 15px 0 0 #ED6742; >Получаем псевдообъёмную кнопку, которая парит над страницей:
+ Развернуть
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� С помощью тени можно создать блок с несколькими рамками!
div class="box square">div> div class="box circle">div>.box width: 120px; height: 120px; box-shadow: inset 0 0 6px 0 #c000ff, 0 0 0 3px #c000ff, 0 0 6px 3px #c000ff, 0 0 0 7px #18191C, 0 0 0 10px #6e4aff, 0 0 6px 10px #6e4aff, 0 0 0 14px #18191C, 0 0 0 17px #c000ff, 0 0 6px 17px #c000ff;>.box width: 120px; height: 120px; box-shadow: inset 0 0 6px 0 #c000ff, 0 0 0 3px #c000ff, 0 0 6px 3px #c000ff, 0 0 0 7px #18191C, 0 0 0 10px #6e4aff, 0 0 6px 10px #6e4aff, 0 0 0 14px #18191C, 0 0 0 17px #c000ff, 0 0 6px 17px #c000ff; >�� Тени можно использовать для ховер-эффектов. При помощи теней кнопка сделана выпуклой, а при нажатии она становится вдавленной за счёт изменения положения теней.
button class="btn">Зажмиbutton>.btn box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5;> .btn:active box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, inset -6px -6px 8px 0 #3185d5, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5, inset 6px 6px 8px 0 #c9c9c9;>.btn box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5; > .btn:active box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, inset -6px -6px 8px 0 #3185d5, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5, inset 6px 6px 8px 0 #c9c9c9; >Открыть демо в новой вкладке + Развернуть
Татьяна Фокина советует
Скопировать ссылку «Татьяна Фокина советует» Скопировано
�� Если используете box — shadow для стилей фокуса, то они не поддерживаются в режиме высокой контрастности в Windows. Режим ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона.
Чтобы фокус был виден всем пользователям, задайте альтернативные стили в директиве @media со значением forced — colors .
a:focus outline: none; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;> @media (forced-colors: active) a:focus outline: 0.2em solid; >>a:focus outline: none; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato; > @media (forced-colors: active) a:focus outline: 0.2em solid; > >Второй способ решения проблемы с видимостью box — shadow в режиме высокой контрастности — прозрачный outline .
a:focus outline: 2px solid transparent; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;>a:focus outline: 2px solid transparent; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato; >Как задать тень блока в css
В этой статье я хотела бы рассмотреть, как сделать с помощью CSS тень блока.
Когда мы разрабатываем дизайн своего сайта, нам хочется придать ему оригинальный внешний вид. Используя специальное свойство, мы можем задать тень блока CSS практически любому элементу на странице, и это позволят нам добиться определённой объёмности.
Навигация по статье:
Как сделать в CSS тень блока?
Для добавления тени элементу на странице мы можем воспользоваться свойством CSS box-shadow, которое позволяет задать тень блока в любых вариациях.
Вот самый простой способ использования данного свойства:
Первым значением мы задаем сдвиг тени блока по горизонтали вправо, а вторым – по вертикали вниз. При таком задании значений у тени не будет размытия, а цвет тени блока будет таким же, как цвет текста в данном блоке, то есть, значение цвета будет браться из свойства color.
В этом случае мы получим вот такую тень:
Для того, что бы указать смещение тени влево и вверх мы должны задать сдвиг со знаком минус (-).
Расширенное задание параметров box-shadow
В этом свойстве можно так же указать размытие и цвет тени блока. В этом случае наше свойство будет выглядеть вот так:
Значение 5px задает размытие тени, а #cccссс – цвет тени в шестнадцатеричной системе.
Для задания смешения и размытия мы можем указывать величину в пикселях или относительных единицах измерения (em).
Цвет так же можно задавать различными способами. Мы можем задать цвет тени шестнадцатеричным значением, использовать формат RGB или же можно задать полупрозрачную тень с помощью формата RGBA. Например, вот так:
Здесь первый три цифры (120,120,120) – это значения цветов красный, зелёный, синий.
Последнее число (0.5) – это уровень прозрачности, который может иметь значения от 0 до 1Для точного определения шестнадцатеричного значения цвета вы можете воспользоваться одним из инструментов, описанных в этой статье.
И тогда мы получим такой результат:
Как делается внутренняя тень CSS?
Для задания внутренней тени нужно в свойстве box-shadow, перед заданием смешения указать параметр inset.
Запись свойства в этом случае будет выглядеть так:
И получим такой результат:
Использование нескольких теней одновременно
Так же вы можете сделать несколько теней для одного блока одновременно. Например, можно поставить тень снизу, по бокам и внутри элемента. В этом случае параметры нужно записать через запятую:
Вот как это выглядит:
Еще один момент! Так как свойство box-shadow относится к разряду свойств CSS3, то оно может не поддерживаться более старыми версиями браузеров, поэтому если вам нужно сделать коссбраузерную верстку с поддержкой теней, то свойство box-shadow нужно задавать для каждого браузера со специальными кроссбраузерными префиксами:
-webkit – для вебкит браузеров (Яндекс-браузер, GoogleChrome, новая версия Opera и т.д.)
-moz – для Mozilla Firefox
-о – для старых версий Opera
-ms — для Internet Explorer 8Как видите, сделать с помощью CSS тень для блока не так уж и сложно. Главное понять какой параметр за что отвечает, и, подключив фантазию, вы сможете сделать очень интересное оформление для своего сайта. На мой взгляд, сайты с грамотно расставленными тенями для элементов выглядят очень красиво.
Так же, при помощи box-shadow можно сделать реалистичную тень блока CSS разной сложности, но для этого нужно использовать дополнительные приемы. Поэтому, созданием таких теней мы займемся в следующий раз.
Надеюсь, у меня получилось разобрать данную тему достаточно подробно, и у вас не возникнет сложностей при добавлении теней. Если статья вам понравилась, не забывайте поделиться ею в социальных сетях и подпишитесь на рассылку, а так же на мой канал на YouTube. До встречи в следующей статье!
Свойство CSS box-shadow
Свойство CSS box-shadow позволяет задать тень элементу html. Используется дизайнерами сайтов довольно часто, чтобы как-то украсить и выделить рамки с текстом, изображения, сделать более читабельным контент.
Синтаксис CSS box-shadow
- X — смещение по оси Х (горизонтали)
- Y — смещение по оси У (вертикали)
- R1 — размытие (чем больше значение, тем плавне переход)
- R2 — радиус растяжения (если положительный, то растягивает, отрицательный — сжимает)
- color — цвет (можно задавать в любом формате: #RGB, название цвета)
- inset — при наличии этого значения тень будет располагаться внутри блока (элемента)
Пример 1. HTML рамка с тенью box-shadow без смещения
Ниже представлен самый простой вариант использования тени свойством CSS box-shadow на странице html, когда она равномерно обтекает всю рамку без смещений.
На странице преобразуется в следующее
Пример 2. HTML рамка со смещенной тенью box-shadow
Практически тот же пример, что и первый, но только со смещением рамки.
На странице преобразуется в следующее
Пример №3. Свечение рамки html
Реализация тени в виде свечения
На странице преобразуется в следующее
Пример 4. Внутреннее свечение границы html
Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .
На странице преобразуется в следующее
Пример 5. Совмещение теней в html
Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.
На странице преобразуется в следующее
IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow
Как сделать красивую тень для блока (элемента) с помощью CSS. (8 примеров)
Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS. Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.
Посмотреть пример
Тень блока с CSS
Данные блоки мы будем делать только при помощи CSS. Соответственно никаких изображений, только стили.
В частности мы будем использовать тег box-shadow. Так же можно будет задать любой цвет для тени, размер, смещение, или же использовать его для других элементов, главное экспериментировать. Но в данном случае это будут блоки.
Поддержка браузеров
В основном все современные браузеры поддерживают эффекты тени:
- Internet Explorer 9.0 и выше;
- Firefox 3.5 и выше;
- Chrome 1 и выше;
- Safari 3 и выше;
- Opera 10.5 и выше.
Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz-, для Chrome и Safari нужно использовать префикс -webkit.
Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все эффекты тени по отдельности, эффектов будет 8.
Эффект тени 1
В данном примере тень от блока находится снизу.
Эффект тени 2
В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект.
Эффект тени 3
Здесь тень от блока только слева.
Эффект тени 4
Эффект тени 5
В данном случае тень с двух сторон сильнее сдвинулась вниз.
Эффект тени 6
Здесь эффект изогнутых теней на дне блока.
Эффект тени 7
Такой же эффект только тень снизу и сверху блока.
Эффект тени 8
Эффект изогнутых теней по бокам блока.
Пример
Обязательно посмотрите живой пример
Посмотреть пример
Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.
CSS тень у блоков
На этой странице описаны способы, позволяющие создать CSS тень у блоков или других элементов HTML-страницы. Вообще обычно тени задают именно блокам, причем это не обязательно блочные элементы по типу, это могут быть и встроенные (уровня строки), но расширенные с помощью внутренних отступов. В CSS 3 уже появились свойства для создания теней без изображений, но так как старые браузеры их не понимают, то здесь будут рассмотрены и варианты использующие картинки.
Тень с помощью CSS 3, без изображений
В этом примере используются возможности CSS 3, которые с легкостью позволяют создавать тени у элементов без изображений.
Пример HTML и CSS: создание теней с помощью CSS 3
Описание примера
- Чтобы сделать у блока тень, применяем к нему свойство CSS box-shadow. Но это свойство понимают не все (особенно старые) браузеры, поэтому для некоторых из них были добавлены свойства с приставками -moz- (Firefox) и -webkit- (Chrome и Safari), которые ввелись разработчиками еще до поддержки стандартного свойства. Однако они не проходят валидацию. Обратите внимание, что свойства с приставками стоят в коде выше основного, это было сделано для того, чтобы браузеры понимающие оба варианта, использовали последний (в соответствии с приоритетом стилей CSS).
- Для версий IE 8 и ниже используем специальный фильтр Shadow , которым Microsoft снабдила свои браузеры, где color — цвет тени, Direction — направление тени, Strength — ее размах. Так как в нашем примере тень от элемента расходится во все четыре стороны, причем внизу и справа она больше, то фильтр приходится указывать тоже четыре раза — для верхней и правой стороны, для правой и нижней, для нижней и левой, для левой и верхней. Так тени наложатся друг на дружку и сольются в единую картину. Кстати цвет для фильтра пришлось подбирать вручную, чтобы тень стала похожа на ту, которая создается свойствами CSS.
- Фильтры не проходят валидацию и нужны только для IE, поэтому закрываем их в условные комментарии. Будет лучше, если их вообще вынести в отдельный CSS-файл и подключить как внешние стили.
- Для корректной работы для совсем старых IE добавляем невалидное свойство zoom :1, которое понимают только они и которое заставляет отображаться блок в натуральный размер, и включает так называемый layout.
Минус данного примера в том, что тень блока в старых IE будет выглядеть не совсем так, как в других браузерах. Кроме этого фильтры могут «тормозить» работу браузеров IE.
Тень с помощью CSS 3, без изображений (вариант 2)
В этом примере мы сделаем более реалистичную тень для старых браузеров IE. Для этого добавим в основной блок еще два — блок с основным содержимым и блок специально для создания тени в IE, который закроем в условные комментарии. Затем с помощью абсолютного позиционирования мы положим его под блок с контентом и добавим специальный фильтр. Этот фильтр не просто добавит тень, он превратит в нее весь блок, но так как он будет лежать внизу, выглядывая только по краям, то и получится нужный нам эффект.
Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 2)
Описание примера
- Добавляем внутрь основного элемента два блока — «cont_block» и «shadow_block» (блок-тень), где второй закрываем в условные комментарии, чтобы его увидели только IE8 и младше.
- Задаем основному блоку «block» относительное позиционирование (CSS position:relative), так как позиционировать блок-тень будем относительно него, а самому «shadow_block» — абсолютное.
- C помощью свойств CSS width и height растягиваем блок-тень во всю ширину и высоту родителя. Также добавляем ему отрицательное значение z-index, чтобы «положить» его под блок с контентом.
- Применяем к блоку-тени фильтр Blur , где PixelRadius — радиус размытия тени, MakeShadow — указывает, что блок будет тенью, а ShadowOpacity — уровень прозрачности тени, который изменяется от 1 до 0. Важно! Параметр PixelRadius не просто размывает тень по краям, он еще и увеличивает размеры блока, у нас это увеличение составило по 5px с каждой стороны.
- Чтобы тень стала видна слева и сверху от «cont_block» , применяем к блоку-тени отрицательные значения свойств CSS left и top. Но это еще не все. В нашем примере снизу и справа тень имеет больший размер, чтобы этого добиться, добавляем блоку-тени нижний и правый внутренний отступ (CSS padding), расширяя его. Все, готово.
- Изменяя параметры из четвертого и пятого пунктов, вы можете сделать другие варианты тени.
- Для IE6 здесь было использовано несколько хаков, чтобы и в нем все правильно работало. Не забывайте, что вместо них, вы всегда можете вынести эти свойства в отдельный файл и подключить его с условными комментариями.
Тень с помощью CSS 3, без изображений (вариант 3)
По своей сути этот пример похож на предыдущий, однако здесь немного поменяется структура CSS, что положительно отразится на удобстве применения способа. Правда из-за этого придется пожертвовать поддержкой IE6.
Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 3)
Описание примера
- Как я говорил, этот пример похож на предыдущий, но здесь мы избавились от использования свойства CSS float в основном блоке, которое часто не нужно. И еще — ширина и высота теперь регулируется разными блоками.
В IE6 этот пример работает некорректно, поэтому все свойства и хаки предназначенные для него были убраны. Кроме этого были изменены условные комментарии — теперь их понимают только IE7 и IE8.
CSS тень с помощью изображений
В этом примере мы будем создавать тень с помощью изображений. Для этого сначала нам придется нарисовать нужную тень в графическом редакторе, а потом вырезать ее по кусочкам. Затем мы обернем контент в несколько блоков, где каждому в качестве фона зададим один из вырезанных кусочков тени. В итоге у нас получится «резиновый» блок с тенью, который будет одинаково выглядеть во всех браузерах.
Делаем заготовки для тени.
Обратите внимание, что кусочек правого нижнего угла ( rb ) при вырезании захватит часть самого блока. Поэтому после вырезания мы удаляем внутреннюю часть и делаем ее прозрачной (это позволяет формат PNG).
Пример HTML и CSS: тени с использованием изображений
Описание примера
- По правилам HTML, если элементы вложены друг в друга, то те, которые находятся внутри, будут располагаться поверх тех, которые находятся снаружи. Это же относится и к фону элементов.
- Для самых внешних блоков нашего примера ( «rc» и «cb» ) указываем фон с помощью свойства CSS background. Причем у «rc» позиционируем фон к правой стороне блока и разрешаем ему размножение только по вертикали, а у «cb» — к нижней стороне с размножением только по горизонтали. В итоге получаем две полоски тени, которые находятся справа и снизу от контента. Но по углам эта тень выглядит совсем не так, как нам надо, особенно в правом нижнем углу, где полоски накладываются друг на дружку. Идем дальше.
- Внутрь внешних блоков помещаем еще три ( «lb» , «rb» и «rt» ), каждому из которых фоном задаем по одному уголку тени. Позиционируем фоновые изображения в нужные углы блоков и запрещаем им размножение (no-repeat). В результате эти фоновые кусочки частично накрыли в нужных нам местах фоновые полоски, которые были созданы ранее. Все, вот теперь тень готова.
- По умолчанию блоки растягиваются во всю ширину родителя, поэтому для ее регулировки будем использовать самый внешний элемент ( «cb» ), применив к нему свойство CSS width с нужным значением. У него же указываем фоновый цвет (если указать цвет фона у другого блока, то он перекроет часть тени).
- Высоту (если нужно) и внутренние отступы наоборот задаем самому внутреннему элементу ( «rt» ). Особенно здесь важно указать нижний и правый отступ, чтобы контент не наложился на тень.
- Чтобы в IE6 и IE7 все отображалось, как положено, прописываем для них свойство zoom :1. Свойство отсутствует в спецификации CSS.
Таким образом можно создать тень не только с двух сторон, но и, например, с четырех, правда понадобится больше оберточных блоков, что и является основным минусом данного способа.
Похожие публикации:
- Как сделать мобильное меню на сайте на css
- Как сделать объект поверх другого css
- Как сделать отступ сверху в css
- Как сделать перечеркнутый текст в css
Тень блока накладывается на соседний блок
У меня есть неопределённое кол-во блоков с тенью которые генерируются динамически. Я размещаю их в нормальном потоке документа и происходит так, что тень нижнего накладывается на верхний. Я пробовал разные махинации с z-index, но ничего не помогло Как избежать наложения на соседний элемент?
.box < width: 200px; height: 100px; margin: 0 auto; background: #fafafa; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; >div.box:nth-child(1) < width: 150px; >div.box:nth-child(3)
Отслеживать
Денис Беспалов
задан 25 янв в 9:14
Денис Беспалов Денис Беспалов
308 3 3 серебряных знака 14 14 бронзовых знаков
А нельзя родителю тени вешать? Так вроде проще
25 янв в 9:54
Overflow:hidden пробовали?
25 янв в 9:57Слегка поправил код, что бы было нагляднее . Родителя нет т.к. ширина блока может быть разная. В роли родителя выступает переменная которая задаёт общий max-width, но некоторый блоки могут быть другой ширины
25 янв в 10:06
@ДенисБеспалов тогда добавить дочерний элемент с width: 100%; height: 100%; и фоном #fafafa . задать позиционирование и z-index . И в него уже пихать все содержимое, которое предназначалось элементам .box
25 янв в 10:13
Пробовал, не работает. z-index отсчитывается от родителя, т.е. следующий ниже блок получит то же значение z-index и перекроет его своей тенью