Размытие фона средствами CSS | Заметки на полях
В CSS3 есть множество новых свойств, которые могут значительно ускорить вёрстку тех или иных элементов страницы. Например, css-фильтры, об одном из которых сегодня предлагается поговорить.
Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на
странице. Зачастую для его создания используется jQuery-библиотека bjurjs. Однако, не на всех сайтах целесообразно использовать jQuery, да и
технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?
Пример простейшей разметки:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Blur</title> <link href="style.css" rel="stylesheet"/> </head> <body> <main> <div></div> <div> <h3>Welcome to our website!</h3> </div> </main> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Итак, задан родительский div с классом wrapper, служащий контейнером для двух
вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur —
изображение, к которому нужно применить эффект размытия.
Обратимся к стилям.
.wrapper {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
}
.inner-wrapper,
.blur {
position: absolute;
width: 500px;
height: 300px;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на
одном уровне. Дело в том, что эффект размытия будет применяться и к тексту
приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением
блоков относительно друг друга при помощи z-index. Сделаем это, а также
зададим необходимый бэкгрануд для .blur:
.inner-wrapper {
z-index: 100;
color: #fff;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,.5);
}
.blur {
z-index: 99;
background-image: url(image.png);
background-size: cover;
background-repeat: no-repeat;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
На данный момент получаем простейшую страничку с картинкой и текстом:
Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter> <feGaussianBlur stdDeviation="5"/> </filter> </svg>
1
2
3
4
5
6
и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр
всего один: тот, что определён под id blur. Вот как должен быть преобразован
css-код для получения эффекта размытия:
.inner-wrapper {
z-index: 100;
color: #fff;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,.5);
}
.blur {
z-index: 99;
background-image: url(image.png);
background-size: cover;
background-repeat: no-repeat;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
filter: url('blur.svg#blur');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
А вот и итоговый вариант с применением эффекта размытия:
Единственный недостаток: нечёткие границы размытия, которые выходят за пределы
родительского элемента. Часто такой побочный эффект может быть
нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden.
Эффект размытия с помощью CSS3 и jQuery
Сегодня вы увидите, как создать простой эффект размытия для текстовых элементов. Основная задача – есть набор текстовых блоков, которые будут размываться и уменьшаться, когда мы проводим над ними указателем мыши. Элемент в фокусе будет увеличиваться. Это создаст эффект фокуса, который привлечет внимание к элементу, над которым указатель мыши находится сейчас.
Демо – Исходный код
Мы будем использовать переходы CSS3 и некоторые скрипты jQuery, чтобы применить соответствующие классы. Так как переходы CSS3 не поддерживаются в старых браузерах, пример лучше смотреть в браузерах Safari или Chrome, в них будут наиболее плавные переходы.
Так как мы используем переходы, этот эффект будет работать правильно только в браузерах, которые их поддерживают.
Итак, начнем!
Разметка
Структура будет представлять из себя блок, содержащий несколько статей. Каждый элемент статей будет иметь заголовок и содержимое:
<section>
<article>
<header>
<h4><a href="#">Some Headline</a></h4>
<span>Some other text</span>
</header>
<p>Some introduction</p>
</article>
<article>
<!-- ... -->
</article>
<!-- ... -->
</section>
Давайте рассмотрим стили.
CSS
Основной контейнер будет отцентрирован и будет иметь фиксированную ширину:
.ib-container{
position: relative;
width: 800px;
margin: 30px auto;
} Давайте сделаем так, чтобы наши блоки, всплывающие влево, отталкивались друг от друга, используя псевдо-элементы :before и :after.
.ib-container:before,
.ib-container:after {
content:"";
display:table;
}
.ib-container:after {
clear:both;
}Теперь давайте зададим стили для элементов статей. Мы заставим их всплывать влево и добавим две тени к блокам, из которых белая будет иметь большую ширину распространения. Также мы добавим переходы для трех свойств: прозрачности, трансформации, так как мы хотим масштабировать блоки, и тени у текста:
.ib-container article{
width: 140px;
height: 220px;
background: #fff;
cursor: pointer;
float: left;
border: 10px solid #fff;
text-align: left;
text-transform: none;
margin: 15px;
z-index: 1;
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 1px 3px 10px rgba(0,0,0,0.2);
transition:
opacity 0.4s linear,
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
}Для браузеров на движке Webkit мы еще добавим:
-webkit-backface-visibility: hidden
чтобы избежать короткого мигания. Хотя Вы можете убрать это, если предпочитаете, чтобы текст выглядел четко.
Давайте зададим стили для текстовых элементов и создадим приятное оформление. Цвета и тень у текста каждого элемента будут соответствовать:
.ib-container h4 a{
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 1);
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
opacity: 0.8;
}
.ib-container article header span{
font-size: 10px;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
padding: 10px 0;
display: block;
color: rgba(255, 210, 82, 1);
text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
text-transform: uppercase;
opacity: 0.8;
}
.ib-container article p{
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 13px;
color: rgba(51, 51, 51, 1);
text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
opacity: 0.8;
} А теперь мы добавил переход ко всем трем. Опять у нас будет три свойства: прозрачность, тени у текста и цвет:
.ib-container h4 a,
.ib-container article header span,
.ib-container article p{
transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
}Класс blur будет применен ко всем потомкам элемента, над которыми сейчас находится указатель. Мы хотим немного уменьшить их и добавить большую белую прямоугольную тень, чтобы блок выглядел размыто. И еще мы немного увеличим прозрачность:
.ib-container article.blur{
box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
transform: scale(0.9);
opacity: 0.7;
}Чтобы текстовые элементы выглядели размыто, мы сделаем цвет прозрачным, устанавливая значение прозрачности параметра
.ib-container article.blur h4 a{
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.ib-container article.blur header span{
text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
color: rgba(255, 210, 82, 0);
opacity: 0.5;
}
.ib-container article.blur p{
text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
color: rgba(51, 51, 51, 0);
opacity: 0.5;
}Элемент, над которым сейчас находится указатель, будет слегка увеличен вместе с тенью. Мы также поставим высокий z.index, чтобы элемент всегда гарантированно был выше других элементов, когда мы наводим на него указатель:
.ib-container article.active{
transform: scale(1.05);
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 11px 15px 10px rgba(0,0,0,0.4);
z-index: 100;
opacity: 1;
} Последнее, но не менее важное. Мы установим значение прозрачности текстовых элементов равным 1:
.ib-container article.active h4 a,
.ib-container article.active header span,
.ib-container article.active p{
opacity; 1;
}И это все со стилями! Давайте рассмотрим JavaScript.
JavaScript
Итак, когда мы наводим указатель на статью, мы установим всем остальным статьям класс blur, и текущая статья получит класс active:
var $container = $('#ib-container'),
$articles = $container.children('article'),
timeout;
$articles.on( 'mouseenter', function( event ) {
var $article = $(this);
clearTimeout( timeout );
timeout = setTimeout( function() {
if( $article.hasClass('active') ) return false;
$articles.not($article).removeClass('active').addClass('blur');
$article.removeClass('blur').addClass('active');
}, 75 );
});
$container.on( 'mouseleave', function( event ) {
clearTimeout( timeout );
$articles.removeClass('active blur');
});И это все! Надеемся, Вам понравился этот урок и он Вам пригодится!
Демо – Исходный код
Автор урока Mary Lou
Перевод — Дежурка
Смотрите также:
html — Прозрачность и размытость цветного фона блока
Stack Overflow на русскомLoading…
- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
Создание эффектов размытого текста с использованием CSS3
В этом уроке мы расскажем об интересном эффекте для текста. Размытый текст можно создать с помощью CSS3, применяя прозрачный цвет текста и тень текста. Сегодня вы узнаете как это сделать и сможете попробовать эффект в собственных работах.
.blur-text
{
color: transparent;
text-shadow: 0 0 5px #000;
}К сожалению, не все старые версии браузеров поддерживают свойство тени текста. Браузер Internet Explorer версий 9 и ниже применяет свойство прозрачного цвета текста, но не создает эффект тени, так что текст становится невидимым. И нужно или прибегать к помощи библиотеки JavaScript Modernizr, или писать свой код для определения поддержки браузером свойства тени текста.
Если браузер поддерживает это свойство, следующий код JavaScript добавит класс “.textshadow” элементу HTML. Таким образом можно задавать свойства CSS классам .textshadow .blur-text, чтобы они применились, только если эффект размытого текста не вызовет проблем с отображением:
if (document.createElement("detect").style.textShadow === "") {
document.getElementsByTagName("html")[0].className += " textshadow";
}Браузеры Chrome и Firefox всех версий выводят размытый текст.
А у браузера Opera некоторых старых версий есть особенность — он поддерживает свойство тени текста, но не применяет его к прозрачному тексту. Вероятно, это ошибка браузера, так как применение цвета в формате rgba(0,0,0,0) решает проблему.
Браузер Internet Explorer поддерживает свойство тени текста, только начиная с версии 10. При этом и у поддерживающих версий встречаются проблемы с отображением.
Размытые ссылки
Используя возможности CSS3, можно создать эффект плавного появления или исчезания размытия у ссылок при наведении указателя мыши или при выделении. Это можно использовать как необычный эффект для меню.
Мы создадим класс “blur” или класс “blur in”, который можно применить к любой ссылке. Ссылка изначально будет размытой и вернется к нормальному состоянию, когда станет активной. Подобным образом зададим класс “blur out”, который сделает ссылку размытой при наведении указателя мыши или при выделении, например:
<a href="#">starts blurred, ends un-blurred</a> <a href="#">starts un-blurred, ends blurred</a>
Теперь нужны основные свойства CSS, которые применяются во всех браузерах, даже тех, которые не поддерживают свойство тени текста:
a.blur
{
text-decoration: none;
color: #339;
}
a.blur:hover, a.blur:focus
{
text-decoration: underline;
color: #933;
} Следующие свойства применятся ко всем элементам класса .blur, как выделенным, так и неактивным:
- удаляются подчеркивание и рамка у ссылки
- задается прозрачный цвет текста
- применяются переходы CSS3, которые создадут плавную анимацию от состояния без тени текста до полной тени текста. Эффект начнется через 100ms и закончится через 400ms.
.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}После этого мы определяем оба состояния тени текста. Третье значение свойства тени текста устанавливает степень размытия. В нашем примере анимация начнется с 0 и закончится на 4px, но эти значения можно менять, если нужно больше или меньше размытия:
/* без размытия */
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
text-shadow: 0 0 0 #339;
}
/* полное размытие */
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
text-shadow: 0 0 4px #339;
}Посмотрите демонстрацию работы размытия ссылок.
Надеемся, Вам пригодится эта информация, но при использовании этого эффекта не забывайте об особенностях отображения и поддержки разных браузеров.
Автор урока Craig Buckler
Перевод — Дежурка
Смотрите также:
Эффект размытия при наведении + описание для изображений на чистом CSS3
.container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 33.33333333%;
height: 50vh;
overflow: hidden;
background: #000;
}
.container:hover h2 {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.container:hover .photo {
-webkit-filter: grayscale(80%) blur(8px);
filter: grayscale(80%) blur(8px);
}
.container h2 {
position: relative;
opacity: 0;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
color: #fff;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.container .photo {
position: absolute;
top: -1rem;
left: -1rem;
right: -1rem;
bottom: -1rem;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-filter: grayscale(80%) blur(0px);
filter: grayscale(80%) blur(0px);
-webkit-transition: -webkit-filter 0.4s ease-out;
transition: -webkit-filter 0.4s ease-out;
transition: filter 0.4s ease-out;
transition: filter 0.4s ease-out, -webkit-filter 0.4s ease-out;
}
.container .photo.photo1, .container .photo.photo5 {
background-image: url(«/img/photo-1.jpg»);
}
.container .photo.photo2, .container .photo.photo6 {
background-image: url(«/img/photo-2.jpg»);
}
.container .photo.photo3, .container .photo.photo4 {
background-image: url(«/img/photo-3.jpg»);
}