CSS — два способа создания тени для картинки
Столкнулся с интересным примером или задачей — не знаю, как сказать.
box-shadow
text-shadow
Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.
Но пример так мне понравился, что решил его описать у себя — повторение мать учения, как говорится.
Данную задачу можно решить двумя способами. Ни один из них не является достаточно универсальным, это всего лишь выход из положения. Итак, имеется изображение, для которого нужно создать внутреннюю тень.
Первый способ — это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут — не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.
Код такого способа представлен ниже:
.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; >Картинка — результат работы этого кода:
Код более краткий. Единственный минус — изображение должно быть только в качестве фона для блока.
Jest — использование skip
В Karma\Jasmine есть варианы для игнорирования выборочных тестов — xit, xdescribe. В этом посте — разберусь, какие есть варианты для этог. … Continue reading
Эффект тени для картинки с помощью CSS
Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.
В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:
.shadow
Не уверен что на картинке с белым фоном это выглядит так как надо, но все же 🙂
С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.
Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.
P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы 🙂
Как наложить тень на картинку?
Есть картинка. Нужно наложить на нее как-бы прозрачную, черного цвета пленку, чтобы картинка была тусклой.
Я написал так:
Но почему-то не работает. Что я пишу не так?
Отслеживать
user262779
задан 27 фев 2019 в 15:01
319 1 1 серебряный знак 11 11 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
А Вы точно уверены, что Вам нужна тень? Или всё-таки равномерный полупрозрачный слой поверх всей картинки? Если слой, то с помощью box-shadow Вы такого эффекта не добьётесь — придётся использовать дополнительный элемент.
К сожалению, у img нет своих псевдоэлементов, поэтому как вариант — обернуть картинку в блок и уже с помощью его :after наложить плёнку на изображение:
.img-wrap < float: left; position: relative; >img < max-width: 100%; display: block; margin: 0; >.img-wrap:after
Отслеживать
ответ дан 27 фев 2019 в 18:39
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Создание эффектной цветной тени от изображения на HTML и CSS
Стандартные средства CSS3 позволяют задать изображению или блоку свойство box-shadow, тем самым создать однотонную тень от объекта. В нашем случае мы откажемся от привычных приемов и сделаем цветную тень, эффектно дополняющую картинку. Цвет тени будут составлять оттенки, используемые в краях изображения, что добавит уникальности в оформлении сайта.
Как выглядит цветная тень?
Совершенно потрясающий эффект, который вы можете увидеть на примерах ниже.