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 и картинка imgbox-shadow и HTML тег inputСначала поле как-будто вдавленное, при наведении появляется голубая обводка, а при фокусе виден эффект плавно появляющегося свечения. Вот так может выглядеть всплывающая форма обратной связи. Или подсветка внутри input (получилась красивая форма входа CSS): box-shadow и transition или animationbox-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 < background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); background-color: #646464; Комментарий 46: Комментарий 47: CSS box-shadow СвойствоПримерДобавление теней к различным элементам #example1 <
#example2 < Подробнее примеры ниже. Определение и использованиеСвойство box-shadow присоединяет одну или несколько теней к элементу.
Поддержка браузераНомера в таблице указывают первую версию браузера, которая полностью поддерживает свойство. Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
Синтаксис CSSПримечание: Чтобы прикрепить к элементу более одной тени, добавьте список теней с разделителями-запятыми (SE «Попробуйте сами» пример ниже). CSS box-shadow PropertyExampleAdd shadows to different #example1 <
#example2 < More «Try it Yourself» examples below. Definition and UsageThe box-shadow property attaches one or more shadows to an element.
Browser SupportThe 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.
CSS SyntaxNote: 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: синтаксисДанный стиль записывается следующим образом: Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):
Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow. Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например: Примеры box-shadowЧтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок! Генератор тени блока CSS box-shadow онлайн бесплатноПри помощи генератора тени CSS можно легко и быстро создать тень для любого элемента страницы html, за исключением текста.
| ||||||||||||||||||||||||||||||||||||||||||||||||||
