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
Есть картинка. Нужно наложить на нее как-бы прозрачную, черного цвета пленку, чтобы картинка была тусклой.
Я написал так:
Но почему-то не работает. Что я пишу не так?
А Вы точно уверены, что Вам нужна тень? Или всё-таки равномерный полупрозрачный слой поверх всей картинки? Если слой, то с помощью box-shadow Вы такого эффекта не добьётесь — придётся использовать дополнительный элемент.
К сожалению, у img нет своих псевдоэлементов, поэтому как вариант — обернуть картинку в блок и уже с помощью его :after наложить плёнку на изображение:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.4.14.41981
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
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
К огромному сожалению, четвёртое значение для text-shadow , браузерами не поддерживается, поэтому растянуть тень для текста можно только при помощи сдвигов, и только в двух направлениях.
Делается это следующим образом: задаётся несколько значений теней, сдвиг у которых последовательно увеличивается на 1 пиксель. Каждая тень пишется через запятую.
Можно сделать обводку текста тенью. В посте Анимация для шапки сайта у меня есть пример и набор теней необходимый для этого.
Если продолжить экспериментировать в этом направлении, то можно получить довольно таки оригинальные результаты. Ведь кроме сдвига у каждой тени можно менять цвет, и направление сдвига.
Можно изменить последовательность теней, от большей к меньшей, и в самой большой применить третье значение (размывание). Короче — простор для творчества.
Это же свойство — множество теней, отлично применяется к box-shadow , принимающего четвёртое значение (растяжение тени).
При помощи него можно сделать для блока очень красивую рамку. Например такую:
Тут тоже простор для творчества. Кстати, все приведённые выше стили, можно подключать встроенным способом, то есть прописывать их прямо в html тег, с помощью атрибута style .
Хотя делать это нужно очень ограничено, только в нестандартных ситуациях. А лучше всего все стили выносить в отдельный файл.
Дальше ещё интереснее, так как обратимся к таким средствам CSS3, как псевдоклассы.
Псевдоклассы и псевдоэлементы не входят в html код страницы, поэтому у них и приставка «псевдо», но что касается стилей, то стили к ним можно применять так же, как к обычным элементам.
Сначала применим псевдокласс :hover . Он изменяет цвет элемента, при наведении на него курсора.
До наведения курсора:
При наведении курсора:
Далее обратимся к псевдоэлементам :before и :after , а так же свойству transform
При помощи псевдоэлементов :before и :after , можно добавить дополнительные стили до и после элемента.
Свойство transform , согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.
Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.
Вот такой получается вогнутый блок, теперь давайте сделаем выгнутый.
Пока всё. Желаю творческих успехов.
Перемена
Две бывшие одесситки на Brighton Beach
— Фирочка! Вы слышали весь этот ужас?
— А какой именно?
— Ну, если выбрали Обаму, так значить придут негры и нас всех будут насиловать!
После долгой паузы…………
— Сима, во-первых, попритушите Ваши радостные глазки! Во-вторых, я
смотрю на вас и удивляюсь. Вы что, всему этому верите? Это же все их
предвыборные обещания!
Как добавить тень прозрачной картинке через CSS свойства?
В сегодняшнем небольшом посте хочу разобрать чисто рабочую ситуацию с которой однажды столкнулся. Попадает мне в работу очередной макет для верстки шаблона. В нем присутствовали картинки (png формата) на которых было изображение на прозрачном фоне, вроде бы ничего необычного, но нарисованный элемент был окантован элегантной тенью.
Вставить это изображение вместе с тенью, как цельную картинку я не мог, т.к. нужна была возможность грузить подобные картинки из админки, а тень к ним должна добавляться автоматически с помощью кода.
Решив эту задачу, она на самом деле не является мега сложной, но как мне кажется может быть весьма полезной и помочь вам если вы однажды столкнетесь с подобны таском ��
Да просто добавим box-shadow и делов то …
Обычно в макетах присутствую тени на блоках или jpg картинках, вот для них использование CSS свойства box-shadow является отличным решением проблемы. В нашем же случае применить такое свойство к изображению с прозрачным фоном, не даст нам желаемого результата.
Ниже я добавил пример:
Если открыть вкладку Result в примере выше, то станет понятно, что тень обрамила нашу картинку по периметру, а нам всеже хочется дать тень непосредственно нарисованному объекту.
Даем тень нарисованной картинке
К счастью есть весьма элегантное решение этой задачи. Мы воспользуемся свойством filter.
Синтаксис очень прост: мы задаем первой парой параметром смещение по осям X и Y соответственно, третье значение – это размытие тени, а четвертое собственно цвет в возможных форматах (HEX, rgb(a), hsl(a)).
Вот такое решение поставленной задачи, надеюсь вам это тоже будет полезно и поможет в ежедневной работе, если остались вопрос или свои варианты решения, оставляйте их в комментариях к данному посту – пообщаемся!
drop-shadow()
Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.
Синтаксис
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color .
Пример
Результат данного примера показан на рис. 1. Обратите внимание, что тень повторяет линии изображения.
Рис. 1. Тень в изображении
Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter .
Спецификация
| Спецификация | Статус |
|---|---|
| Filter Effects Module Level 1 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 13 | 18 | 53 | 15 | 40 | 6 | 9.1 | 35 |
| 4.4 | 35 | 37 | 6.1 | 9.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Похожие публикации:
- Для чего node js
- За что на веб странице отвечает css
- Как сделать расстояние между картинками css
- Как сделать скролл внутри блока css
Как сделать тень картинки в CSS?
В данной статье я покажу вам, как можно создать красивые и интересные тени для картинок и блоков на вашем сайте, а так же, как их можно использовать для создания интересных эффектов при наведении.
Навигация по статье:
- Как применить тень для картинки?
- Как задать внутреннюю тень для картинки?
- Задаём несколько теней для картинки
- Онлайн сервис для создания тени для картинок
- Создание эффектов при наведении на картинки при помощи тени
- Видеоинструкция
Для создания тени картинки в CSS существует специальное свойство, которое называется box-shadow. Данное свойство имеет следующий набор параметров:
- Смещение тени по горизонтали. Здесь может стоять как положительное, так и отрицательное значение. Если мы задаем положительное значение, то тень смещается вправо. Если отрицательно, то тень смещается влево.
- Смещение тени по вертикали. Если мы задаем отрицательное значение, тень смещается вверх, а если положительное – тень смещается вниз.
- Размытие тени. Чем больше здесь значение, тем более размытая получается тень.
- Растяжение тени. Чем это значение больше, тем на большее расстояние от картинки или блока будет расходиться тень.
- Цвет. Можно задавать как в шестнадцатеричной системе, так при помощи кодовых слов или в формате RGB.
Не смотря на то, что данное CSS-свойство не является новым, и на сегодняшний день поддерживается большинством современных браузеров, тем не менее, в более старых версиях данное CSS-свойство может не поддерживаться. Поэтому для перестраховки, пока что еще используют коссбраузерные префиксы для этого CSS-свойства.
- -moz-box-shadow — для Mozilla Firefox
- -webkit-box-shadow — для браузеров, работающих на Webkit-платформе, таких как Opera, Google Chrome, Яндекс.Браузер и др.
Как применить тень для картинки?
Чтобы добавить тень картинке присваиваем ей какой нибудь класс или обращаемся к уже существующему классу и в CSS файле темы или сайт дописываем нужные стили.
как наложить border на картинку
В таком виде, как у вас в HTML, пожалуй никак. Но если обернуть изображение каким-нибудь , то самым простым способом будет:
.wrap-image < border-top: 100px solid green; display: inline-block; overflow: hidden; >img
UPD: запоздалая мысль вдогонку (. Гораздо эффектнее и правильнее было бы обернуть при помощи что позволит нам в CSS избавиться от правила display: inline-block;
Отслеживать
ответ дан 1 дек 2022 в 17:26
621 5 5 серебряных знаков 10 10 бронзовых знаков
попробуйте outline, но к сожалению его нельзя задать на конкретную сторону. А border это граница и она не ляжет на картинку. Можно попробовать через тень. Или заморочиться блоком div с отрицательным margin.
Отслеживать
ответ дан 1 дек 2022 в 17:26
Антон Иванов Антон Иванов
9 5 5 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.