Тень блока (свойство box-shadow) | CSS — Примеры

Тень блока (свойство box-shadow) | CSS

box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.



Тень блока CSS

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.
цвет одной стороны

цвет другой стороны

толщина тени


<div id="cube"></div>

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком. Смайлик улыбка

CSS тень с одной стороны

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css.yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

Понадобится статья "Как убрать отступ под изображением"

котёнок мечтает стать львом

<span class="boxShadow20"><img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"/></span>

box-shadow и HTML тег input

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


<input type="text" placeholder="псевдоним или email" class="shadow"/>
<input type="password" placeholder="пароль" class="shadow">

Или подсветка внутри input (получилась красивая форма входа CSS):


<input type="text" placeholder="псевдоним или email" class="backlight"/>
<input type="password" placeholder="пароль" class="backlight">

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

? нет да

<span class="dva1">да</span>
<span class="dva2">нет</span>
<span class="dva3">да</span>

Продолжение следует: box-shadow и :before и :after.

в f t
наверх ↑

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
Аааа, я не правильно поняла. Вместо внутренней тени только над верхней стороной, дала вариант внутренней тени и тени над верхней стороной. Ужас какой, язык сломаешь :))
Анонимный
:D да я сам просмотрел, решение то уже описано Вами в варианте тени "снизу", а для верха добавил только inset и все получилось. Здоровские решения на Вашем блоге всегда находятся, спасибо за чудеса CSS! ;)
Анонимный
спасибо большое намного облегчает труд!!!
Анонимный
И снова я в поиске нашел Ваш блог. Как и прежде кликал по всем рекламным блокам. Спасибо!
NMitra
Приходите ещё)
teller
Несколько раз находил и опять терял вашу страницу, в конце концов внес в закладки)
NMitra
))) А в моих закладках сам чёрт ногу сломает :) Но найти эти статьи через поиск совсем не предоставляется возможным. Вспомнить правильный запрос, а потом просмотреть выдачу просто нереально. Порой час приходится на закладки тратить, плюс отвлекает дико, там же другие хорошие материалы, содержание которых уже подзабылись. В общем это мой больной вопрос )))
Айнур Шакиров
Не давно перебрался с делфи на веб программирование, php освоил быстро, но вот css.. его выучить мало.. тут такое воображение надо, что я прямо не знаю, и всегда у меня все криво)... Благо ваш блог нашел, все понятно и удобно и все начинает получатся! Огромное спасибо!! Прошелся по всем рекламным ссылкам).. Просто уже не знаю как отблагодарить)) Нигде таких внятных уроков я еще не видел))
NMitra
Ох, да у меня тоже с воображением туго. Из той серии, что знаю как, но не знаю что. Порой что-то выходит только в результате случайных действий. Когда с тенью разбиралась, то бегала по квартире с фонариком, смотрела как кнопки на пульте, листок бумаги и т.п. смотрится, когда на них свет падает. )))
Анонимный
Спасибо ,статья дельная. очень пригодилось для реализации. Даже не знал, и не мог подумать, что у тени так много реализаций . Спасибо
Анонимный
Огромный респект и вселенская уважуха!!!
Roman Lozinsky
офигенно.
спасибо.
NMitra
Очень-очень приятно видеть восторженные реплики! Благодарю!
Натааша
супер! спасибо!
Анонимный
Отличная страница, полезная!
Анонимный
Замечательно)) Чпасибо автору! Здесь то что нужно, можно точно и правильно подобрать значения!!
NMitra
Благодарю за комментарии!
Виктория
Понравилось оформление блока тенью по бокам (справа и слева). Оформила себе блок подписки. Огромное спасибо за код стилей.
Анонимный
Я только не могу понять где HTML код???????:???
NMitra
<div class="boxShadow"></div> К boxShadow подставляйте необходимые цифры.

Один селектор, я посчитала лишним писать каждый раз 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, префиксы пишутся в другом порядке

-webkit-box-shadow
-moz-box-shadow
box-shadow (должен идти последним)
Владимир Трофымлюк
Спасибо! Клас! Давно искал теперь доволен как слоненок!
NMitra
Ура ))
Леонид Кирьянов
Подробно... Спасибо, огромное :)
NMitra
Хм, только сейчас поняла, что никак не прокомментировала значения box-shadow, предоставив только генератор. На эту мысль натолкнуло меня слово "Подробно". Благодарю за него :))
Victor
Увидел .boxShadow15 и .boxShadow17 и пришёл в полный восторг!
NMitra
Ой, уголки эти для резинового блока ведут себя непредсказуемо. В новых свойствах с помощью border-clip легче и приятней они реализуется http://dev.w3.org/csswg/css-backgrounds-4/#propdef-border-clip да только пока ни одним браузером не поддерживается.
Анонимный
А можно выложить блок с двумя тенями вертикальными изгибами
NMitra
"блок с двумя тенями вертикальными изгибами" - у меня очень плохо с фантазией, не представляю как это
Анонимный
Спасибо большое! Однозначно в закладки!
Анонимный
Подскажите - internet explorer 11 не умеет правильно отображать тени? Или это у меня что-то с ним не то...? Просто я посмотрел отображение тени через opera, chrome и mozilla - все отлично, проверил через IE11 - так сущий кошмар - тени ездят по экрану - то появятся, то исчезнут и т.д.
NMitra
У меня вполне корректно. Не должно быть проблем, разве что с генераторами, так как нет поддержки oninput.
Анонимный
Спасибо за ответ - переустановить наверно нужно. Кстати эта страница с примерами в IE, у меня тоже ужасно отображается. А подскажите еще - что такое oninput.
NMitra
Событие JavaScript
Радик
Здравствуйте! Можно еще костылики для нескольких IE? Для shadow8
NMitra
Здравствуйте, здесь есть похожий пример http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/ Честно говоря, я не разбиралась как фильтр работает в IE
Liuda Nizhnik
Спасибо, NMitra. Статья очень пригодилась, хорошие примеры.
NMitra
Благодарю за отзыв!
Анонимный
класс! спасибо

Kai | http://www.dogica.com
Анонимный
СПАСИБИЩЕ!!!
Анонимный
Ставлю в закладки!
NMitra
Рада помочь!
Павел Корнилов
Здравствуйте! А возможно ли сделать такую тень средствами CSS? - http://test.kpa-ing.ru/Oformlenie/shadow_bottom.png
Павел Корнилов
Что, сайт умер? Никто не отвечат?
NMitra
Пока некогда. Возможно, в течение недели напишу. В Фотошопе красивше выходит
Павел Корнилов
Хорошо, спасибо, буду ждать. Тут просто для меня принцип важен - возможно такое или нет. А в фотошопе и так этот образец нарисован.
NMitra
Вот тут есть http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/
Павел Корнилов
Жуть, да и не функционально. Насколько я понял все подвязывается под единственный идентификатор изображения #inner, то есть применить, получается, можно только к одному изображению? Нет, ну понятно, можно на классы переделать, но сама технология многодельна. Я ожидал наличие какой-нибудь встроенной функции у box-shadow, которая бы делала нечно подобное, но уже понял, что ошибался.
Написал скрипт, который позволяет использовать такой эффект намного проще, лишь присваивая изображению соответствующий класс - http://kpa-ing.ru/Javascripts/Изображения/Изменение%20оформления.htm
Возможно, кому-то пригодится.