Тень блока (свойство 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 <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, префиксы пишутся в другом порядке
CSS: удаление теней на отключенных кнопках HTML
При отключении кнопок HTML в текст кнопки добавляется тень. Я сам моделирую кнопки, и я хотел бы иметь только один цвет (белый) без тени, но я не знаю, как это сделать эффективно.
Мой предыдущий метод состоял в том, чтобы оставить его включенным и повторно нарисовать кнопку hover + active state и игнорировать javascript click vai. Сказал вам, не очень эффективно!
EDIT: изображение, отображающее тень (просматривается в IE9) + увеличенная версия.
Это также работает:
Таким образом, вы можете специально настроить таргетинг на отключенный вход, не беспокоясь о вмешательстве в другие.
Вы уже разместили свой собственный ответ, но здесь немного больше информации.
Из моих экспериментов я пришел к такому же выводу: в IE вы не можете изменить его из CSS. Вот почему.
Цвета отключенных кнопок зависят от того, что Windows настроено для отображения для элемента «3D-объекты» в «Цвет и внешний вид окна» ( в настройках дисплея).
По умолчанию цвета отключенных кнопок: text = A0A0A0 , shadow = white. Они могут отличаться, если пользователь изменил настройки по умолчанию (в Windows 7 вы должны перейти в «дополнительные настройки», чтобы сделать это), но почти у всех это будет. Они были спроектированы так, чтобы соответствовать цвету системы по умолчанию для отключенной кнопки, которая F4F4F4 .
Мое решение этой проблемы состоит в том, чтобы создать CSS так, чтобы, по крайней мере, для настроек по умолчанию, в IE отключенная кнопка будет выглядеть нормально — лучший подход — установить фон при отключении до F4F4F4 :
Если вы используете Bootstrap, как я, вы должны сделать это вместо:
Вы также можете добавить некоторый условный селектор, чтобы включить это только для IE.
Как убрать тень у кнопки css
При помощи CSS можно создавать различные кнопки с разнообразными эффектами не прибегая к использованию картинок и JavaScript.
Стандартная кнопка, в вашем браузере, выглядит следующим образом:
Причём внешний вид кнопки будет зависеть не, только от браузера пользователя, но и от «темы» рабочего стола. Например, так выглядит кнопка в самых популярных браузерах (IE, Mozilla и Opera соответственно) в стандартном стиле Windows XP
А так она уже будет выглядеть, если пользователь предпочитает для своего рабочего стола использовать «классический стиль»
И конечно кнопка может измениться при применении какого-нибудь другого пользовательского стиля, например, так
Чтобы кнопки на Вашем сайте выглядели одинаково у всех пользователей, не нарушая задуманного дизайна, проще всего задать их внешний вид при помощи CSS.
Давайте пропишем в CSS такие параметры для тега <button>
Теперь кнопка, у всех пользователей, будет выглядеть следующим образом
Параметры кода можно менять в самых широких пределах, например, для придания объёма кнопке, давайте изменим параметры рамки кнопки, заменим
code CSS border: solid 1px #73C8F0;
На такие параметры
code CSS border: outset 2px #73C8F0;
И кнопка примет такой вид
Теперь давайте займёмся более серьёзным «украшением» нашей кнопки. Широкие возможности даёт применение CSS3, который понимают все современные браузеры. У тех же, кто испльзует браузеры ещё не адаптированные под CSS3, просто не будут видны некоторые эффекты, что ни как не скажется на работе кнопки, поскольку все «украшательства» идут как дополнение к внешнему виду кнопки.
Для разнообразия примера, и чтоб наш код сделать более уневирсальным, давайте создадим какой-нибудь класс, например .blue и пропишем для него всё то же самое, что мы писали для <button> в первом варианте.
Теперь наш код CSS будет выглядеть следующим образом
code CSS .blue
Для чего создаются классы? Например на Вашем сайте есть два вида кнопок созданных с помощью разных тегов, <button> и <input> и Вы хотите чтоб в одном случае кнопка имела стандартный вид (по умолчанию определяемым браузером), а в другом случае отображалась как задумано Вами, или хотите создать кнопки разных цветов, или ещё что-то. Вот тогда, в нужном Вам месте просто проставляете «класс» и, в данном случае кнопка, примет такой вид как Вы задумали.
Для примера давайте создадим две кнопки, и в одном случае укажем класс, а в другом нет. Для наглядности я кнопки сделаю рабочими
code HTML /* Кнопка без указания класса */ <form> <input type=»button» value=» Сообщение » onClick=»AlertButton()»> <script> function AlertButton() </script> </form> /* Кнопка с указанием класса */ <form> <input class=»blue» type=»button» value=» Сообщение » onClick=»AlertButton()»> <script> function AlertButton() </script> </form>
Скруглить углы, в кнопке, можно добавив в таблицу стилей следующий код:
code CSS border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Можно так же добавить градиент:
code CSS background: -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #73C2FD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73C2FD), to(#2E8CE3));
То есть, полностью код будет теперь выглядеть так:
Для придания кнопке объёма можно добавить внутреннюю тень, путём добавления белой полоски в верхней её части:
code CSS box-shadow: inset 0 1px 0 0 #FFFFFF; -moz-box-shadow: inset 0 1px 0 0 # FFFFFF; -webkit-box-shadow: inset 0 1px 0 0 # FFFFFF;
А для контраста нижний край рамки сделаем более тёмным:
code CSS border-bottom-color: #196ebb;
Так же добавим тень для текста, что сделает кнопку более выразительной:
code CSS text-shadow: 0 -1px 0 #196ebb;
Как видите вариантов огромное количество, можно экспериментировать с любыми параметрами. Например давайте создадим полупрозрачную тень вокруг кнопки. Для этого заменим
code CSS -moz-box-shadow: inset 0 1px 0 0 # FFFFFF; -webkit-box-shadow: inset 0 1px 0 0 # FFFFFF; border-bottom-color: #196EBB; text-shadow: 0 -1px 0 #196EBB;
На такие параметры
code CSS -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); border-bottom: 1px solid rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
А так, для сравнения возьму последний вариант, будет выглядеть данная кнопка в вашем браузере
Для ещё лучшего эффекта хорошо добавить параметры, чтоб кнопка меняла вид при наведению на неё курсора, а так же при нажатии на кнопку. Это делается с помощью псевдо классов :hover и :active
Добавим псевдо класс :hover к первому варианту кнопки, т.е. к тегу <button> изменим цвет кнопки при наведении на неё курсора мыши. В таблице стилей сделаем такую запись.
С помощью псевдо класса :active создадим эффект нажатия, например, к коду использованному при наведении мыши добавим тёмную тень вверху и слева внутренней части кнопки, а так же сместим текст вправо и вниз:
То есть, окончательный вариант CSS для Вашей кнопки должен принять примерно такой вид (показан вариант самого последнего вида кнопки)
4 простых эффекта CSS для кнопок
В данном уроке рассматриваются четыре очень простых кнопки CSS с эффектами анимации при наведении курсора мыши на них.
Общие установки
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
Для кнопок будет использоваться очень простой HTML код:
Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
Увеличивающаяся кнопка
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер — она увеличивается, показывая дополнительное сообщение.
Основной код CSS
Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
Эффекты CSS3
Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
Анимация CSS
Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мыши
Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSS
Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
Эффекты CSS3
Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
Анимация CSS
Анимация практически не отличается от предыдущего примера.
Наведение курсора мыши
При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
Сдвиг фонового изображения
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0». При наведении курсора положение сдвигается по вертикали.
Эффекты CSS3
В данном примере нет ничего особенного — скругленные углы и тени.
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
Наведение курсора мыши
В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.