Как сделать тень под блоком css

Тень для блока эффект изгиба с помощью CSS

Плагины и Шаблоны для WordPress

Этот урок посвящен организации необычной тени с помощью CSS3. Данный способ, создает эффект изгиба блока. Это великий плюс в сравнении с использованием изображений, которые нужно нарисовать, потом подключить. Они занимают место и грузят сайт. Стили CSS же, можно настроить как угодно, быстро легко, а главное никакой разницы. У меня уже был похожий урок, там тоже все с помощью CSS и тоже по своей сути изгиб, но только в одном углу — Необычная тень для блоков и кнопок с помощью CSS.

Тень эффект изгиба

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

Пример

Плагины и Шаблоны для WordPress

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

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

Я сейчас распишу, что именно создает такой вид. Сначала, блоку присвоили позиционирование relative, потом ширину, высоту, и обязательно фон, даже если он будет у Вас белый. Потом присваиваем псевдоэлемент :after. Для него же, установлены следующие параметры:

  1. position — присваиваем позиционирование — absolute.
  2. z-index — устанавливаем в минусе -1, чтобы спрятать за блоком.
  3. top:0;bottom:0; — отступ от верха и от низа — 0 пикселей, то есть тень видно. Если установить значение для — top-50%, то верхняя тень спрячется за блоком и получится вид, как в третьем блоке примера. Если для — bottom установить 50%, то исчезнет нижняя тень. 50% — это как пример, можете установить что-то свое и спрятать тень не полностью, если это нужно.
  4. left:50px;right:50px; — это отступ от краев. Мы отступили по 50 пикселей, чтобы тень по бокам скрыть. Забегу на перед, чтобы сделать второй вариант эффекта, когда тень по бокам, нужно просто поменять значения. Для сторон установить — 0, а для верха и низа 50 пикселей. Значение 50, можно конечно менять, так вы измените размер тени.
  5. box-shadow — это тень, тут все понятно. Устанавливаем цвет, прозрачность и размер размытия тени, сейчас — 25 пикселей.
  6. border-radius — это закругление тени, чтобы создать тот самый эффект изгиба. первое значение — 200 пикселей, радиус по горизонтали, это половина от нашей ширины основного блока — 400 пикселей. 50 — это радиус по вертикали. Для осуществления второго примера — тень по сторонам, нужно делать так, чтобы второе значение было больше первого. Все зависит от размеров блока. В нашем случаи у второго примера соотношение 10px / 50px.

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

Я в первом разъяснении, по сути все расписал, так что для второго блока в примере, я просто представлю готовые стили, чтобы Вы видели и было понятнее.

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

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Тень для блока css

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи 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

Эффект изогнутых теней по бокам блока.

Пример

Обязательно посмотрите живой пример

Посмотреть пример

Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.

box-shadow generator

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

inset

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

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

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

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

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

Тень вокруг div 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 комментариев:

К 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 не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах &#8211; нет. Эффект 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 применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда &#8211; на движке web-kit работает всё 100% &#8211; и в chrome и в maxthon &#8211; и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon &#8211; нет, в internet explorer &#8211; тоже неработает (я имел ввиду запись типа:
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 , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

  1. ключевое слово inset устанавливает тень внутри элемента;
  2. сдвиг тени по горизонтали (5px — вправо, -5px — влево);
  3. сдвиг по вертикали (5px — вниз, -5px — вверх);
  4. радиус размытия тени (0 — резкая тень);
  5. растяжение тени (5px — растяжение, -5px — сжатие);
  6. цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Табл. 1. Сочетания параметров тени

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.

Рис. 2. Вид тени на фоновом рисунке

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

Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.

Рис. 3. Блок с тенью

В примере 2 показано создание такого блока.

Пример 2. Блок с тенью

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow . В примере 3 показано добавление двойной тени ко всем изображениям.

Пример 2. Блок с тенью

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 4. Изображение с двойной тенью

Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px). Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.

Как сделать тень на CSS

Как сделать тень на CSS

Дизайнеры очень любят добавлять всякие тени на свои блоки. В Photoshop это делается в течение двух секунд, а вот для верстальщика — это целая история. Если Вы будете искать в Интернете, как сделать тень на CSS, то обнаружите, что почти везде используется CSS3, который, как я уже писал, ещё рано использовать. Есть смесь CSS3 и JQuery (вообще ужас), чтобы тень была кроссбраузерной. В общем, одно решение хуже другого, а я же в этой статье покажу кроссбраузерный вариант без всяких JQuery и CSS3.

Первым делом Вам надо вырезать следующие картинки:

  • Верхнюю границу с левым углом, но без правого. Желательно, чтобы её длина была заведомо больше, чем потребуется для блока.
  • Верхний правый угол.
  • Полоски слева и справа от блока высотой по 1 пикселю.
  • Нижняя граница с левым углом и так же без правого. Снова надо, чтобы полоса эта была максимально длинной.
  • Правый нижний угол.

Вот эти 6 картинок у Вас должны быть, а далее надо написать следующий HTML-код:

Теперь CSS-код:

/* Прячем область за блоками */
.shadow-block,
.shadow-block .sh-sl,
.shadow-block .sh-content <
overflow: hidden;
>

/* Высота верхней и нижней рамки тени, а также углов */
.shadow-block .sh-top,
.shadow-block .sh-rt,
.shadow-block .sh-rb,
.shadow-block .sh-bottom <
height:20px;
>
/* Ширина углов, их выравнивание и подъём наверх */
.shadow-block .sh-rt,
.shadow-block .sh-rb <
float:right;
margin-top: -20px;
width:20px;
>

/* Отступ справа (для уголков) */
.shadow-block .sh-bottom,
.shadow-block .sh-top <
margin-right: 20px;
>

/* Длинная полоска с верхней тенью (левый угол уже на картинке) */
.shadow-block .sh-top <
background: url("images/st.png") no-repeat;
>

/* Верхний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rt <
background: url("images/rt.png") no-repeat;
>

/* Горизонтальная полоса тени (высота 1 пиксель) слева от блока */
.shadow-block .sh-sl <
background: url("images/sl.png") left repeat-y;
>

/* Горизонтальная полоса тени (высота 1 пиксель) справа от блока */
.shadow-block .sh-sr <
background: url("images/sr.png") right repeat-y;
>

/* Цвет блока и отступ от границ с тенями */
.shadow-block .sh-content <
background: #FFF;
margin: 0 20px;
>
/* Длинная полоска с нижней тенью (левый угол уже на картинке) */
.shadow-block .sh-bottom <
background: url("images/sb.png") no-repeat;
>

/* Нижний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rb <
background: url("images/rb.png") no-repeat;
>

Безусловно, это сложный способ, но я его использую в своей практике, как и другие профессионалы. А новички и всякие халтурщики используют box-shadow, плюс различные скрипты и htc, чтобы было кроссбраузерно. Когда наплевать на качество, а волнуют лишь время и деньги, то это наилучший вариант. Но если Вы хотите качество, то используйте мой способ.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 14 ):

Михаил, а можно для особо одаренных (как я) 🙂 выложить конкретно и НАГЛЯДНО какие должны быть картинки-запчасти для блока, рассмотренного в твоей статье. Например, прямо после слов "Вот эти 6 картинок у Вас должны быть . " выложить эти "картинки".

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

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