Как сделать тень картинки css

CSS box-shadow генератор

Box shadow CSS свойство

box-shadow — это CSS3 свойство, которое позволяет создавать эффект тени для, практически, любого элемента веб страницы. Оно похоже на эффект Drop Shadows в Photoshop, с помощью этого свойства создается иллюзия глубины на 2-мерных страницах.

Синтаксис

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

В отличие от других свойств, каких как border, которые разбиты на подсвойства (border-width, border-style и тд), box shadow CSS стоит особняком. Соответственно, важен порядок, в котором вы записываете значения свойства.

Горизонтальное смещение (по оси X)

Вертикальное смещение (по оси Y)

Размытие

Третье значение (blur) представляет собой радиус размытия тени, посмотрите как он работает на box shadow генераторе выше. Значение 0 означает, что тень будет совсем не размыта, края и стороны будут абсолютно четкие. Чем выше значение, тем более мутную и размытую тень вы получите. Отрицательные значения не допускаются.

Растяжение

Четвертое значение (spread) представляет собой размер тени или дистанции от тени до элемента. При положительном значении тень увеличится, выйдет за пределы элемента. Отрицательное значение уменьшит и сожмет тень.

Цвет тени может быть абсолютно любым и записан в разных форматах, доступных в CSS (HEX, RGB, RGBA и пр), попробуйте разные оттенки в css box shadow generator.

Внешняя/внутренняя

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

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

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

Круглая тень

Тень может быть круглой, для этого достаточно добавить свойство border-radius

Эффект увеличения с тенью

Используя свойства box-shadow и transform, можно создать иллюзию приближения и отдаления элемента от пользователя.

Эффект парения элемента с помощью box-shadow

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

Тень и свойство clip-path

Профессиональная разработка сайтов под заказ

Прекрасный способ визуально выразить главную мысль

Источник

Как сделать красивую тень для блока (элемента) с помощью CSS. (8 примеров)

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS. Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.

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

Тень блока с CSS

Данные блоки мы будем делать только при помощи CSS. Соответственно никаких изображений, только стили.

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

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

В основном все современные браузеры поддерживают эффекты тени:

Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz-, для Chrome и Safari нужно использовать префикс -webkit.

Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все эффекты тени по отдельности, эффектов будет 8.

Эффект тени 1

В данном примере тень от блока находится снизу.

Эффект тени 2

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

Эффект тени 3

Здесь тень от блока только слева.

Эффект тени 4

Эффект тени 5

В данном случае тень с двух сторон сильнее сдвинулась вниз.

Эффект тени 6

Здесь эффект изогнутых теней на дне блока.

Эффект тени 7

Такой же эффект только тень снизу и сверху блока.

Эффект тени 8

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

Пример

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

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

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

Источник

Тень элемента в CSS

С появлением стандарта CSS 3 введено свойство box-shadow, которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.

В предыдущий статье мы с Вами рассматривали свойство border-radius, используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadow), вы сможете создавать множественные тени, они наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Давайте детально рассмотрим синтаксис этого современного свойства:

Рис. 95 Схема работы CSS свойства box-shadow.

Рассмотрим по порядку возможные значения этого свойства:

Основные моменты, которые вам необходимо понять, чтобы создавать тени для элементов:

Хочу обратить Ваше внимание на то, что свойство box-shadow в настоящее время поддерживается всеми современными браузерами:

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
box-shadow	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Перейдем к практике и начнем с простого примера, в котором добавим по одной тени к элементам:

В данном примере мы добавили на страницу:

Реэультат нашего примера:

Рис. 96 Пример использования свойства box-shadow в CSS.

Использование множественных теней

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

В данном примере мы добавили на страницу:

Реэультат нашего примера:

Рис. 97 Пример использования множественных теней в CSS.

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

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

Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника «Работа с фоном элемента в CSS», а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:

В данном примере мы добавили на страницу:

Реэультат нашего примера:

Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 25.

Подсказка: Обращаю Ваше внимание, что задачи 4, 5 и 6 считаются продвинутыми и расположены по мере нарастания сложности. Для их выполнения необходимо использовать множественные тени (две для четвертой задачи, четыре для пятой и три для шестой).

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

Источник

text-shadow: и box-shadow: как сделать тень для текста, картинки, блока

Здравствуйте уважаемые начинающие веб-мастера

В предыдущей статье мы научились делать на странице различные блоки.

А сейчас, я расскажу и покажу, как и какую тень можно сделать для блока, текста и изображения, при помощи средств CSS.

Для создания тени в CSS существуют два свойства:

1. box-shadow — создание тени для блоков;
2. text-shadow — создание тени для текстa

text-shadow : 4px 4px ;

Значений, определяющих форму тени, может быть больше двух, и ниже на примерах, мы это подробно разберём.

Раньше у этих свойств были проблемы с кросбраузерностью, и при их написании применялись префиксы. Однако в последних версиях браузеров Chrome 31.0.1650.63, Yandеx 13.1, Opera 12.15, Internet Explorer 11, Firefox 23.0, Safari 5.1.4, эти свойства работают без префиксов.

На всякий случай, если кто то пользуется браузерами более ранних версий, привожу список префиксов.

-moz-box-shadow — значение для Mozilla Firefox 3.6 + ;

-webkit-box-shadow — Safari, Chrome, iOS, Android 2.1-3.0 ;

-o-box-shadow — значение для Opera 11.10 + ;

-ms-box-shadow — значение для IE10 + ;

Для text-shadow — аналогично.

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

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

Для текста тень задаётся аналогично.

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

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

По умолчанию, все браузеры отображают тень того же размера, что и объект её отбрасывающий. Можно её увеличить. Для этого в значения вводиться четвёртый параметр.

И если при этом обнулить сдвиг, и размывание, то получается довольно оригинальный эффект рамки вокруг блока, что очень хорошо смотрится в сочетании с border-radius

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

Можно сделать обводку текста тенью. В посте Анимация для шапки сайта у меня есть пример и набор теней необходимый для этого.

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

Можно изменить последовательность теней, от большей к меньшей, и в самой большой применить третье значение (размывание). Короче — простор для творчества.

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

Хотя делать это нужно очень ограничено, только в нестандартных ситуациях. А лучше всего все стили выносить в отдельный файл.

Дальше ещё интереснее, так как обратимся к таким средствам CSS3, как псевдоклассы.

Псевдоклассы и псевдоэлементы не входят в html код страницы, поэтому у них и приставка «псевдо», но что касается стилей, то стили к ним можно применять так же, как к обычным элементам.

До наведения курсора:

При наведении курсора:

Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.

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

.blok:before <
top : 0px ;
bottom : 0px ;
left : 10px ;
right : 10px ;
box-shadow : 0px 1px 15px #464451 ;
border-radius : 120px / 15px ;
>

/style >
/head >
body >
div class =» blok «>
p >Блок с тенью /p >
/div >
/body >
/html >

Пока всё. Желаю творческих успехов.

Перемена

Источник

Тень для картинки с помощью CSS. Revamped.

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно <. cut. >, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

И так далее. There is a better way!

Нет, здесь не будет никаких контейнеров, никаких бордеров и никакого яваскрипта, а всего одна строчка CSS:

img < background: url(shadow.jpg) right bottom no-repeat; padding: 0 12px 14px 0; >

Да-да! Именно. Для img можно тоже задавать фон в виде рисунка, а не только цвета. И… *барабанная дробь* оно работает везде! ( а с чего бы ему не работать? )
Видимо, у большинства веб-разработчиков сложилось мнение, что img — рисунок, и всё, зачем ему бэкграунд? 🙂 И начали совать тень в контейнеры… Ломаем стереотипы!

Да, тень у нас фиксированного размера и должна быть заранее нарисована либо в Photoshop, либо где-то ещё.

Ой, у вас баннер убежал!

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

Похожие публикации

CSS var в rgba или удобное использование цветов в Sass

PhpStorm 2020.3: PHP 8, атрибуты, PHPStan и Psalm, Xdebug 3, Tailwind CSS и совместная разработка

DRY CSS: Как использовать каждое объявление только один раз

Средняя зарплата в IT

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Минуточку внимания

Комментарии 37

Но, вообще-то, всеми нелюбимая студия использовала то, чего мы как раз хотели избежать: ДОПОЛНИТЕЛЬНЫЕ контейнеры.

Судя по минусам, я недостаточно ясно выразил свою мысль. Попробую еще раз 🙂

Итак, насколько я понял, смысл этого топика в следующем:

Цель: сделать рамку вокруг картинки;

Плохое решение: поместить картинку во ВНЕШНИЙ Div, фоновое изображение которого будет играть роль рамки;

Хорошее решение (предлагаемое в этом топике): применить фоновое изображение к САМОЙ картинке.

Т.е. суть топика не в том что «тень как фоновое изображение» (это есть в обоих решениях), а в том, что «не плодить ЛИШНИХ блоков».

Так вот, Студия предлагала как раз первое решение (с лишними блоками). Это же решение предлагалось в топике «Эффект тени для картинки с помощью CSS».

А n1mnul в ЭТОМ топике показал, как лишних блоков можно избежать. Поэтому, топик не тупо повторяет решение 2-летней давности, а развивает его.

P.S. Прошу прощения за выделение ЗАГЛАВНЫМИ буквами, у меня пока недостаточно кармы, чтобы выделять курсивом.

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

итог: твой вариант индивидуален и требует личного подхода с дополнительной картинкой и минимальными знаниями HTML, вариант студии может быть универсальным и прописан в движке в качестве postprocess(), а человеку можно будет только сказать что нужно сделать, чтобы появился такой бокс.

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

Я же в своем комментарии хотел показать, что оно, наряду с недостатками, имеет определенные преимущества перед студийным: отсутствие лишних блоков, семантическая верстка и т.д. За что и поплатился 🙂

Уделите внимание жирному тексту в самом начале топика. Повторю здесь : «либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.»

В-третьих, я не предлагал технику, цель топика гласит : избегайте оформительного мусора

Источник