Размытие вокруг блока css

Русские Блоги

На веб-странице мы видим некоторые элементы с размытыми краями или изображения с размытыми краями.
1. Обычно мы можем установитьboz-shadow(Shadow) для достижения, box-shadow общий формат: border: 20px 20px 50px inset; Параметры, в свою очередь, представляют собой: смещение горизонтальной тени, смещение вертикальной тени и степень размытия тени. Тень по умолчанию находится вне div. Последний параметр не может быть передан внутрь. Inset указывает, что тень div установлена ​​внутри. Если она не передана, тень устанавливается снаружи.
Примечание. Типы границ можно разделить на сплошные, пунктирные, пунктирные и двойные.text-shdow используется для установки тени текста, а box-show — для установки тени блока.
Отображение кода:

style type="text/css"> .div1< width: 200px; height: 200px; background: skyblue; box-shadow:20px 20px 50px white inset; margin:100px; > .div2< width: 200px; height: 200px; background: pink; box-shadow:20px 20px 50px yellow; margin:100px; >  style> head> body> div class="div1">div1 div> div class="div2">div1 div> body>

2. Установите градиентный фон для div.linear-gradientСвойство, но есть проблемы совместимости.
Установить направление линейного градиента: влево: установить градиент справа налево. вправо: установите градиент слева направо. к началу:
Установите градиент снизу вверх. к низу: установите градиент сверху вниз. Это значение по умолчанию. Если значение не записано, это означает, что используется значение по умолчанию. Направление также можно задать значением угла, например, 30 градусов.
Общий формат: линейный градиент (снизу, colorStrat, colorEnd) Первый параметр указывает направление линейного градиента, второй параметр указывает начальный цвет, а третий параметр указывает конец. цвет. Вы также можете передать несколько цветов и установить градиент нескольких цветов.
Отображение кода:

style type="text/css"> .div1< width: 300px; height: 300px; background: linear-gradient(30deg,skyblue,deeppink,red); background: -moz-linear-gradient(30deg,skyblue,deeppink,red);/ * Совместимо с Firefox * / background: -o-linear-gradient(30deg,skyblue,deeppink,red); / * Совместимая опера * / background:-webkit-gradient(linear,70% 0%, 20% 0% , from(skyblue),to(deeppink)); / * Совместимо с Chrome, Safari * / / * Сафари на ядре Webkit, основной синтаксис линейных градиентов Chrome (линейный градиент): background: -webkit-Gradient (тип, x1 y1, x2 y2, от (начальное значение цвета) до (конечное значение цвета), [color- стоп (десятичное смещение, значение цвета остановки), . ]); * / margin:50px; > .div2< width: 300px; height: 300px; background: linear-gradient(to left,yellow,lightgreen); margin:50px; >  style> head> body> div class="div1">div1 div> div class="div2">div2 div> body>

Совместимость:

Источник

How To Get Crisp Edges with the CSS Blur Filter

I wanted to create a hover effect (currently seen on my portfolio page) where the picture blurs when the user hovers over it so the text on top is legible. Simple enough, right? There’s even a handy little CSS blur filter. All you have to do is pass in an argument for the blur radius.

The Problem

Here is an image with the class blur that gives it the property filter: blur(4px) . As you can see, it looks simply horrendous.

HTML

SASS

.blur-wrapper width: 50% // this is where you style the image width overflow: hidden // clips feathery edges .blur width: 100% // necessary for photo to scale correctly -webkit-transform: scale(1.05) // makes fuzzy edges go to overflow of .blur-wrapper transform: scale(1.05) -webkit-filter: blur(4px) filter: blur(4px)

Designed and built by Chloe Atchue-Mamlet in 2015 using Jekyll and hosted on Github Pages. View the source code.

Источник

Эффект размытия и фокуса на CSS

На этом уроке мы реализуем интересный эффект с фокусировкой размытого фона и размытия изображения при наведении в CSS.

При наведении на элемент (самолет), размытый фон масштабируется и приобретает фокус. Одновременно с фокусировкой фона, самолет размывается до состояния полупрозрачности. Таким образом взгляд пользователя фокусируется то на фоне, то на картинке.

HTML разметка

Создадим секцию на весь первый экран, внутри которой поместим блок с фоновым изображением и вставим картинку.

CSS стили

По умолчанию для всех элементов родителем служит тег body, относительно которого они позиционируются на странице. Мы изменим это правило и назначим родителем секцию, относительно которой будут позиционироваться остальные элементы. Кроме того, расположим все элементы внутри секции (фон и картинка) по центру.

.section position: relative; // устанавливаем родителя
overflow: hidden;
width: 100%; // ширина секции
height: 100vh; // высота секции на высоту окна
display: flex; // это flex-контейнер
justify-content: center; // горизонтальное выравнивание
align-items: center; // вертикальное выравнивание
>

Изначально наш фон будет размытым, для этого зададим свойство filter со значением blur с радиусом размытия в 10 пикселей.

.bg position: absolute;
top: 0;
left: 0;
width: 100%; // растянуть на всю ширину секции
height: 100%; // растянуть на всю высоту секции
background-image: url(‘../img/bg.jpg’);
background-size: cover; // масштабируется без потери пропорций
filter: blur(10px); // размытие фона
transition: 2s; // плавный переход от размытия до получения фокуса
>

.airline width: 250px; // ширина картинки
height: auto; // высота картинки подстроится автоматически
position: relative; // для корректной работы z-index
z-index: 1; // слой с картинкой выше слоя с фоном
transition: 2s; // плавный переход эффекта размытия
>

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

.airline:hover filter: blur(10px); // радиус размытия
transform: scale(1.2); // масштабирование
opacity: 0.5; // полупрозрачность
cursor: pointer;
>

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

.airline:hover~.bg filter: blur(0); // вернет фону резкость
transform: scale(1.5); // трансформирует фон в сторону увеличения
>

Усиление эффекта

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

.text position: relative;
color: transparent;
z-index: 2;
bottom: 30px;
transition: 2s;
font-size: 30px;
font-weight: 800;
font-family: Impact;
text-transform: uppercase;
>

.airline:hover~.text transform: scale(1.5);
z-index: 2;
color: rgb(226, 43, 134);
>

Демонстрация эффекта размытия и фокусировки

Самостоятельно изучая HTML/CSS, наверняка вас должна заинтересовать тема по заработку сайтов на заказ. Основываясь на своем личный опыт, я записал пошаговое руководство по «Заработку на создании сайтов под заказ».

Создано 15.04.2020 10:35:54

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

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

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Размытие отдельных областей изображения в CSS

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

Сделаем это!

Компонент, который мы создадим в этом руководстве, основан на фреймворке CodyHouse.

В качестве примера мы создадим копию изображения, применим к ней filter: blur . После этого наложим маску, чтобы размыть лишь нужную часть фотографии.

Создаем копию изображения с помощью псевдоэлемента ::before , примененного к элементу .team__caption :

.team--blurred-img < .team__caption < overflow: hidden; &::before < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../../assets/img/img-01.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); transform: scale(1.1); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Устанавливаем background-position: center bottom ; и background-size: 100% auto; , чтобы копия изображения полностью перекрывала оригинал.

Используя идентификаторы, устанавливаем для каждого снимка разные background-image.

.team--blurred-img < // . #james < .team__caption::before < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before < background-image: url('../../assets/img/img-04.jpg'); >> >

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

После применения фильтра blur заметно, что края изображения стали полупрозрачны. Это можно исправить, создав дополнительную копию изображения с помощью псевдоэлемента ::after . А также увеличив размер псевдоэлемента ::before с помощью масштабирования через transform: scale.

.team--blurred-img < .team__caption < overflow: hidden; &::before, &::after < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); >&::before < transform: scale(1.1); >> #james < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-04.jpg'); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Также можно настроить таргетинг на браузеры, которые поддерживают свойство backdrop-filter . Это позволит реализовать размытие всего одной строкой кода.

К сожалению, на данный момент это свойство поддерживается не всеми браузерами. Поэтому мы решили использовать оба варианта.

браузерами. Поэтому мы решили использовать оба варианта. @supports (backdrop-filter: blur(10px)) < .team--blurred-img .team__caption < backdrop-filter: blur(10px); &::before, &::after < display: none; >> >

Готово! Теперь можно размыть еще больше изображений!

Вадим Дворников автор-переводчик статьи « How to create clipped, blurred background images in CSS »

Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, отклики, лайки, подписки, дизлайки огромное вам спасибо!

Источник