Блок с тенью

How to Create a Drop Shadow for PNG Images

Shadows always give an image a fresh look and make it eye-catching.

The CSS box-shadow property allows adding shadows on images, but we cannot use it with png images as the effect will always put a square image shadow.

So, if you want to create a drop shadow for the png image, the best choice is the filter property, which has many values that can help you to solve a lot of styling problems.

How to Apply a Drop Shadow to PNG Image.

There are four values: «offset-x» specifies the horizontal distance. «offset-y» specifies the vertical distance. We set the «offset-x» and «offset-y» to «5px». The next is «blur-radius», which applies more blur on the image. We set it to «5px». The fourth value is the color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. You can pick colors from our Color Picker tool.

Example of creating a drop shadow for a PNG image:

html> html> head> title>Title of the document title> style> img < width: 250px; -webkit-filter: drop-shadow(5px 5px 5px #666666); filter: drop-shadow(5px 5px 5px #666666); > style> head> body> h2>Drop Shadow on PNG image h2> img src="/build/images/w3docs-logo-black.png" alt="w3docs logo"> body> html>

Result

Drop Shadow on PNG image

Earlier we told about the difference between the box-shadow property and drop-shadow() CSS function, now let’s make it more evident in the following example.

Example of creating a drop-shadow and box-shadow for a PNG image:

html> html> head> title>Title of the document title> style> img < width: 200px; > .box-shadow < float: left; box-shadow: 7px 7px 7px #666666; > .drop-shadow < float: right; > .drop-shadow img < filter: drop-shadow(7px 7px 7px #666666); -webkit-filter: drop-shadow(7px 7px 7px #666666); > style> head> body> h2>Difference between box-shadow and drop-shadow h2> div class="images"> div class="box-shadow"> p>Box-shadow img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" /> p> div> div class="drop-shadow"> p>Drop-shadow img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" /> p> div> div> body> html>

As you see in the example, we use the same png image, but we put box-shadow in the first case and drop-shadow in the second case.

Источник

Как сделать тень картинки в CSS?

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

Навигация по статье:

Для создания тени картинки в CSS существует специальное свойство, которое называется box-shadow. Данное свойство имеет следующий набор параметров:

• Смещение тени по горизонтали. Здесь может стоять как положительное, так и отрицательное значение. Если мы задаем положительное значение, то тень смещается вправо. Если отрицательно, то тень смещается влево.
• Смещение тени по вертикали. Если мы задаем отрицательное значение, тень смещается вверх, а если положительное – тень смещается вниз.
• Размытие тени. Чем больше здесь значение, тем более размытая получается тень.
• Растяжение тени. Чем это значение больше, тем на большее расстояние от картинки или блока будет расходиться тень.
• Цвет. Можно задавать как в шестнадцатеричной системе, так при помощи кодовых слов или в формате RGB.

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

• -moz-box-shadow — для Mozilla Firefox
• -webkit-box-shadow — для браузеров, работающих на Webkit-платформе, таких как Opera, Google Chrome, Яндекс.Браузер и др.

Как применить тень для картинки?

Чтобы добавить тень картинке присваиваем ей какой нибудь класс или обращаемся к уже существующему классу и в CSS файле темы или сайт дописываем нужные стили.

Источник

CSS — два способа создания тени для картинки

Столкнулся с интересным примером или задачей — не знаю, как сказать.

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя — повторение мать учения, как говорится.

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

Первый способ — это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут — не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

.block2 box-shadow: inset 0 0 12px 8px rgba(0,0,0,.6); width: 481px; height: 361px; background: url(images/charlize_theron_2.jpg) 0 0 no-repeat; >

Картинка — результат работы этого кода:

Код более краткий. Единственный минус — изображение должно быть только в качестве фона для блока.

Красивая функция trackBy

Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:public trackByNumber = (_. … Continue reading

Источник

Тени

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

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

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

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

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

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

Код	Результат	Описание
box-shadow: 5px 5px;		Резкая тень справа и снизу.
box-shadow: -5px -5px;		Резкая тень слева и сверху.
box-shadow: 0 0 5px;		Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px;		Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red;		Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);		Полупрозрачная тень.
box-shadow: inset 0 0 6px;		Тень внутри.

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

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

        
Не идти против знамён противника, когда они в полном порядке; не нападать на стан противника, когда он неприступен; это и есть управление изменениями.
 
Сунь-цзы, пер. Николай Конрад
 
  

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

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

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

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

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

       
Заголовок 
 
  

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

     img 
  

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

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

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

Источник