box-shadow в CSS


Содержание

CSS box shadow — создаем тени для блоков

June 14, 2013

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

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

Можно также создать тень, которая будет размещена не снаружи элемента, а внутри него.

Синтаксис свойства :

  • — смещение тени по горизонтали;
  • — смещение тени по вертикали;
  • — размытие границ тени;
  • — размер тени;
  • — цвет тени;
  • — создать тень внутри элемента.

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

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

Браузеры Firefox, Chrome, Opera и IE9 отобразят серую тень под этим блоком.

Код, выводящий данный результат:

Однако, приведенный пример будет не совсем работоспособным. Для браузеров Firefox и Chrome более ранних версий может понадобиться добавление префиксов. Тогда полная версия кода будет выглядеть следующим образом:

Как говорилось выше, порядок следования значений свойства необязателен. Более того, из всех шести значений обязательными являются только два первых — смещение по горизонтали и по вертикали. Все остальные можно опустить, если в них нет необходимости.

Примеры использования кода:

Последняя строка наиболее интересна, поэтому разберем ее подробнее.

Смещения по горизонтали и вертикали могут принимать как положительные, так и отрицательные значения. В последнем случае тень будет перемещаться не вправо, а влево. Размытие тени blur и размер тени spread могут иметь только положительные значения или 0. Несколько теней для одного элемента можно задавать последовательно, через запятую. В нашем примере было задано три тени с разными цветами и смещением.

Теория

По умолчанию, для элемента создается внешняя тень.

Тень создается как минимум с посощью двух обязательных параметров — горизонтального и вертикального смещения.

Горизонтальное смещение определяет смещение тени относительно элемента по горизонтали. Может принимать положительное или отрицательное значение. При положительном значении тень смещается вправо от элемента. При отрицательном — влево от элемента.

Вертикальное смещение задает смещение тени по вертикали относительно элемента. Может рпинимать положительное или отрицательное значение. При положительном значении тень смещается относительно элемента вниз по вертикали. При отрицательном значении смещение происходит вверх по вертикали.

Третье и необязательное значение свойства box-shadow, это размытие . По умолчанию оно равно 0 и граница тени четкая. Размытие может принимать только положительные значения. Чем больше число, тем сильнее происходит размытие. В спецификации не разъясняется точного алгоритма, по которому происходит усиления размытия при увеличении его значения.

Размер тени spread также явлется необязательным параметром и может принимать как положительные, так и отрицательные значения. При положительном значении тень увеличивается по всем направлениям. При отрицательном наоборот уменьшается.


Несколько примеров теней

Ниже приведены несколько небольших примеров создания теней с разными смещениями, размытием и размером.

В примере A смещение тени происходит влево и вверх на 5 пикселей.

В примере B точно также происходит смещение на пять пикселей вверх и влево, но при этом добавлено размытие тени величиной в 5 пикселей. Хорошо видно, что тень имеет нечеткие границы.

В примере С таже самая тень имеет размер в 5 пикселей.

Пример D показывает тень, имеющую размытие в 5 пикселей и размер в 5 пикселей.

В примере E показана тень, которая не имеет смещения по горизонтали и вертикали, но у нее задано размытие в 5 пикселей.

В примере F тень также не имеет смещения, но имеет размытие и размер в 5 пикселей.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

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

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 не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект 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 box-shadow Свойство

Пример

Добавление теней к различным элементам

#example1 <
box-shadow: 5px 10px;
>

#example2 <
box-shadow: 5px 10px #888888;
>

Подробнее примеры ниже.


Определение и использование

Свойство box-shadow присоединяет одну или несколько теней к элементу.

Значение по умолчанию: none
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 20px 30px blue»

Поддержка браузера

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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Свойство
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

Синтаксис CSS

Примечание: Чтобы прикрепить к элементу более одной тени, добавьте список теней с разделителями-запятыми (SE «Попробуйте сами» пример ниже).

CSS box-shadow Property

Example

Add shadows to different

#example1 <
box-shadow: 5px 10px;
>

#example2 <
box-shadow: 5px 10px #888888;
>

More «Try it Yourself» examples below.

Definition and Usage

The box-shadow property attaches one or more shadows to an element.

Default value: none
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.boxShadow=»10px 20px 30px blue» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS Syntax


Note: To attach more than one shadow to an element, add a comma-separated list of shadows (see «Try it Yourself» example below).

Box-shadow: тень для элемента

Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.

Свойство box-shadow: синтаксис

Данный стиль записывается следующим образом:

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

  • Ключевое слово inset : параметр, который необязательно указывать; рисует тень внутри элемента.
  • Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение 0 означает, что тень без сдвига.
  • Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение 0 — это тень без сдвига.
  • Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — 0 . В таком случае тень будет идеально четкой.
  • Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — 0 .
  • Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.

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

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

Генератор тени блока CSS box-shadow онлайн бесплатно

При помощи генератора тени CSS можно легко и быстро создать тень для любого элемента страницы html, за исключением текста.

Пример блока
Сдвиг по оси X: px
Сдвиг по оси Y: px
Прозрачность тени: px
Растяжение тени: px
Размытие тени: px
Тень внутрь:
Выбор цвета:

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

  • box-shadow – для большинства браузеров,
  • -webkit-box-shadow — для браузеров Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0,
  • -moz-box-shadow – для браузеров Firefox до версии 4.0


При использовании тени не следует забывать, что в ряде случаев, данное свойство расширяет границы элемента, и в этом случае может появиться полоса прокрутки или сместиться сама страница.
У свойств box-shadow, -webkit-box-shadow и -moz-box-shadow следующий синтаксис:
Свойство: none | [, ]*
Где:

  • Свойство — box-shadow, -webkit-box-shadow или -moz-box-shadow.
  • none – отменяет тень
  • тень состоит из следующий элементов:
    1. сдвиг по оси X
    2. сдвиг по оси Y
    3. размытие
    4. растяжение
    5. цвет

CSS3 Box Shadow Generator

Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project.

Generated CSS:

Box Shadow Explained

The CSS3 box-shadow property allows you to add depth to your website’s design without the need for images or extra container elements.

While the syntax is easy to understand, it is hard to visualise the style using just code. The handy box-shadow tool above allows you to quickly tweak your code and see the effect.

The box-shadow syntax works as follows:

The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. The third value defines the blur of the shadow and the last value sets the colour. The colour can be specified as a hex code, rgb or rgba value.

Optionally you can include an additional parameter after the blur distance:

This defines the spread distance of the shadow. This is essentially the distance the shadow extends before it starts to blur. Increasing the spread causes the shadow to extend in all directions.

Finally, you can add the ‘inset’ keyword at the start in order to apply the shadow to the inside of the box rather than on the outside:

Supporting Browsers

A lot of browsers now support the CSS3 box-shadow property, although some are still using vendor prefixes. It is advisable to use the vendor prefix syntax as users may still be using older versions of browsers that now support the standard box-shadow syntax.

CSS свойство box-shadow и его параметры

Box-shadow добавляет элементу одну или несколько теней

Смещение тени

У свойства box-shadow есть два обязательных параметра:

  1. смещение по оси X,
  2. смещение по оси Y.

Принципиально важен порядок записи. Первое значение — всегда смещение по оси X, второе — по оси Y.

Если по одной из осей смещение не нужно, ставим ноль:


Отрицательное значение для осей box-shadow

Тень сместится в противоположном направлении:

Радиус размытия тени

Третий параметр свойства box-shadow. Если его не указать, принимается значение 0, а размер тени равен размеру элемента, к которому применяется.

При значении больше нуля, края теряют чёткость, тень становится больше и визуально легче. Размытие применяется со всех сторон:

Отрицательное значение считается ошибкой и тень не отобразится вовсе.

Радиус растяжения тени

Четвёртый параметр свойства box-shadow. Меняет величину тени относительно элемента. Растягивает во все стороны:

В данном случае тень больше элемента на 16 пикселей по ширине и высоте: 8px слева + 8px справа и 8px сверху + 8px снизу.

Отрицательное значение растяжения тени в CSS

Тень не растягивается, а сужается со всех сторон на указанное значение:

Цвет тени

По умолчанию цвет тени дублирует цвет шрифта: как на примерах выше.

Цвет тени указывается в любом доступном CSS формате:

Зададим элементу синюю тень:

Внутренняя тень

Параметр inset отображает тень внутри блока.

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

Второй вариант удобней для восприятия при чтении кода.

Несколько теней

Несколько теней задаются через запятую. Порядок отображения сверху вниз:

Если поменять местами, голубую тень не будет видно:

Одновременно заданы внутренняя и внешняя тень:


Тень с закруглёнными углами

Если элементу задать свойство border-radius, тень будет с закругленными углами.

Задавая растяжение тени, мы увеличиваем и её скругление. Например, border-radius 8px, а растяжение тени — 4.

8+4=12px — это радиус скругления тени.

Этот же принцип распространяется и на сжатие тени, когда значение отрицательное.

8+(-4)=4px — получим скругление тени в два раза меньше.

Если сжатие тени больше, чем border-radius, получим тень с прямыми углами. Например, сжатие 16px.

8+(-16)=(-8), но у скругления не может быть отрицательного значения и применится ноль.

CSS свойство box-shadow поддерживается всеми популярными браузерами, кроме Opera Mini.

Про CSS

Box-shadow

Свойство box-shadow позволяет добавить элементам одну или несколько теней.

Синтаксис совсем простой:

Этот код даст вот такую тень:

Первое значение отвечает за отступ слева, второе — сверху. Значения могут быть отрицательными. Третье — радиус размытия. Если значение не задано или равно 0 — тень имеет четкие края. Четвертое — уменьшение или увеличение тени. Значения могут быть отрицательными.

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

Последнее значение — цвет. Очень удобно задавать его в hsla или в rgba, чтобы тень была прозрачной и затемняла нижележащий фон независимо от его цвета.

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

Есть ещё один параметр — inset . Если он задан, тень отбрасывается внутрь элемента.

При использовании нескольких теней они задаются одна за другой через запятую.

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

При этом если теней несколько, изменение порядка заданных теней при анимации дает интересный эффект:

С тенями можно сделать много интересного, от, собственно, теней, до разнообразных декоративных элементов.

Каждый из примеров ниже сделан с помощью теней на основе одного дива, в некоторых используются псевдоэлементы:


Ещё можно сделать радугу:

Или вот, например, пуговицы:

Или пузырь с текстом:

Просто удивительное количество возможностей предоставляет такое простое свойство.

Также в последнее время становятся популярными длинные тени (в данном случае это box-shadow + text-shadow ):

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

Руками такие штуки писать неудобно, поэтому проще будет воспользоваться генераторами:

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

Как сделать красивую тень для блока (элемента) с помощью 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

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

Илон Маск рекомендует:  Функции sybase
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL