Как сделать тень у картинки в css
Перейти к содержимому

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

  • автор:

Как создать градиентную тень с помощью CSS?

Как создать градиентную тень с помощью CSS

Привет всем! Сегодня листал ленту новостей, и понял, что достаточно большое количество запросов посвящено теме: «Как создать градиентную тень с помощью CSS?». Стало интересно разобраться с этим вопросом самостоятельно ��

В качестве эксперимента — будем делать градиентную тень с помощью CSS для двух цветов: красный и синий.

.box { box-shadow: 0 0 10px 5px rgba(128,0,128,0.5), 0 0 20px 10px rgba(255,0,0,0.5); }

В этом примере мы используем две тени: одна имеет начальный цвет фиолетовый (rgba(128,0,128,0.5)), а вторая имеет конечный цвет красный (rgba(255,0,0,0.5)). Первая тень имеет бОльший радиус (20px), чем вторая тень (10px) — это создает иллюзию градиента.

Пример создания градиентной тени с помощью CSS доступен по ссылке. И да — как всегда, в случае возникновения вопросов пишите на почту, или в Telegram.

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

02

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

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

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

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

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

box-shadow : 4px 4px ;

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 (с прозрачностью)

box-shadow : -4px -4px #0ea8f4 ;
text-shadow : -10px -10px #94a7af ;

Блок с тенью

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

box-shadow : 4px 4px 5px #0ea8f4 ;
text-shadow : 10px 10px 2px #94a7af ;

Блок с тенью

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

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

box-shadow : 0px 0px 0px 5px #0ea8f4 ;
border-radius : 10px ;

Блок с тенью

К огромному сожалению, четвёртое значение для text-shadow , браузерами не поддерживается, поэтому растянуть тень для текста можно только при помощи сдвигов, и только в двух направлениях.

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

text-shadow : 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;

Блок с тенью

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

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

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

Это же свойство — множество теней, отлично применяется к box-shadow , принимающего четвёртое значение (растяжение тени).

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

box-shadow : 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
border-radius : 10px ;

Блок с тенью

Тут тоже простор для творчества. Кстати, все приведённые выше стили, можно подключать встроенным способом, то есть прописывать их прямо в html тег, с помощью атрибута style .

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

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

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

Сначала применим псевдокласс :hover . Он изменяет цвет элемента, при наведении на него курсора.


< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Как сделать тень CSS< /title >
< style >
.blok background : #fcdd76 ;
width : 300px ;
height : 100px ;
box-shadow : 0px 0px 0px 5px #0ea8f4 ;
border-radius : 10px ;
>
.blok:hover background : #fcdd76 ;
width : 300px ;
height : 100px ;
box-shadow : 0px 0px 0px 5px #f26522 ;
border-radius : 10px ;
>
p padding : 40px 0 0 80px ;
font-size : 24px ;
text-shadow : 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;
font-weight : bold ;
>
< /style >
< /head >
< body >
< div class color: #008080;">blok «>< /div >
< /body >
< /html >

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

41

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

42

Далее обратимся к псевдоэлементам :before и :after , а так же свойству transform

При помощи псевдоэлементов :before и :after , можно добавить дополнительные стили до и после элемента.

Свойство transform , согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.

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


< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Как сделать тень CSS< /title >
< style >
.blok position : relative;
width : 30em ; /*1em = font-size, в нашем случае — 20px*/
height : 10em ;
padding : 0.5em ; /*Сдвиг левой тени*/
background : #ffe5b4 ;
border-radius : 0.5em ;
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.7) ;
/*Тень дублируется, для более чёткого отображения границы*/

>
.blok:before,
.blok:after content:»» ; /*обязательная строка, для правильного отображения псевдоэлементов*/
position : absolute ;
z-index : -5 ;
bottom : 1em ;
width : 90% ; /*Ширина тени относительно блока*/
height : 20% ;
box-shadow : 0 15px 7px rgba(0, 0, 0, 0.7) ;
-webkit-transform : rotate(-3deg) ; /*поворот угла*/
-moz-transform : rotate(-3deg) ;
-ms-transform : rotate(-3deg) ;
-o-transform : rotate(-3deg) ;
transform : rotate(-3deg) ;
>
.blok:after right : 0.5em ; /*Отступ тени от правого края*/
left : auto ;
-webkit-transform : rotate(3deg) ; /*обратный поворот угла*/
-moz-transform : rotate(3deg) ;
-ms-transform : rotate(3deg) ;
-o-transform : rotate(3deg) ;
transform : rotate(3deg) ;
>
p font-size : 20px ;
font-weight : bold ;
padding-left : 9em ;
text-shadow : -0.4em -0.4em #94a7af ;
margin : auto ;
>
< /style >
< /head >
< body >
< div class color: #008080;">blok «>
< p >Блок с тенью< /p >
< /div >
< /body >
< /html >

08

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


< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Как сделать тень CSS< /title >
< style >
.blok position : relative ;
width : 30em ;
height : 9em ;
padding : 1em ;
margin : 2em 0.5em 4em ;
background : #ffe5b4 ;
box-shadow : 0 1px 5px #464451 ;

.blok:before,
.blok:after content : «» ;
position : absolute ;
z-index : -2 ;

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

p font-size : 20px ;
font-weight : bold ;
padding-left : 10em ;
text-shadow : -0.4em -0.4em #94a7af ;
margin : auto ;
>

Блок с тенью

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

Неужели не осталось вопросов? Спросить


Перемена

Две бывшие одесситки на Brighton Beach
— Фирочка! Вы слышали весь этот ужас?
— А какой именно?
— Ну, если выбрали Обаму, так значить придут негры и нас всех будут насиловать!
После долгой паузы…………
— Сима, во-первых, попритушите Ваши радостные глазки! Во-вторых, я
смотрю на вас и удивляюсь. Вы что, всему этому верите? Это же все их
предвыборные обещания!

Тень для clip-path

Тень для clip-path

Решается такая задача просто, нужно обернуть эту область в тег с фильтром.

Пример:

HTML:

CSS:

.clip-shadow < filter : drop-shadow ( 10px 10px 24px rgba ( 0, 0, 0, 0.8 ) ) ; background-image : url ( 'photo.jpg' ) ; background-size : cover ; height : 460px ;

clip-path : polygon ( 20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 100% 20%, 80% 0% ) ;

Нравится 6
В закладки

  • Опубликовано: 17.07.2020
  • Рубрики: Вкладки, блоки и списки — простые решения
  • Метки: CSS
  • 6792 просмотра
Смотрите также:

SVG фильтры для создания эффекта дрожания

SVG фильтры для создания эффекта дрожания

SVG фильтры, которые заставляют дрожать любые элементы сайта

Предупредительные сообщения на CSS

Предупредительные сообщения на CSS

Оформление предупредительных сообщений success, warning, danger и info

Длинная тень от блоков

Длинная тень от блоков

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

Эффект тени для картинки с помощью CSS

Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.
В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:

.shadow

Не уверен что на картинке с белым фоном это выглядит так как надо, но все же 🙂
С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.
Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.
P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *