Css blur text background

Blur-эффект на чистом css

В CSS3 есть множество новых свойств, которые могут значительно ускорить вёрстку тех или иных элементов страницы. Например, css-фильтры, об одном из которых сегодня предлагается поговорить.

Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на странице. Зачастую для его создания используется jQuery-библиотека bjurjs . Однако, не на всех сайтах целесообразно использовать jQuery, да и технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?

Пример простейшей разметки:

doctype html> html lang="en"> head> meta charset="UTF-8"/> title>Blurtitle> link href="style.css" rel="stylesheet"/> head> body> main class="wrapper"> div class="blur">div> div class="inner-wrapper"> h2>Welcome to our website!h2> div> main> body> html>

Итак, задан родительский 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; >

Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на одном уровне. Дело в том, что эффект размытия будет применяться и к тексту приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением блоков относительно друг друга при помощи 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; >

На данный момент получаем простейшую страничку с картинкой и текстом:

Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:

 svg version="1.1" xmlns="http://www.w3.org/2000/svg"> filter id="blur"> feGaussianBlur stdDeviation="5"/> filter> svg>

и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр всего один: тот, что определён под 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'); /* путь к svg */ >

А вот и итоговый вариант с применением эффекта размытия:

Единственный недостаток: нечёткие границы размытия, которые выходят за пределы родительского элемента. Часто такой побочный эффект может быть нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden .

Источник

CSS blur background behind the text

The following tutorial shows you how to use CSS to do «CSS blur background behind the text».

CSS Style

The CSS style to do «CSS blur background behind the text» is

html, body < margin:0; padding:0; > .page-title !—— ww w . d e m o 2 s . c o m ——> position:absolute; max-width:38%; top:50px; left:0; > .hero-title < background:rgba(0, 0, 0, 0.4); padding:15px 15px 15px 40px; > .hero-Title:CSSbefore < content:«»; position:absolute; left:0; right:0; background:rgba(0, 0, 0, 0.5); width:100%; height:100%; z-index:-1; > .text-wraper < z-index:700; color:#FFFFFF; width:100%; > .main-title < font-size:36px; font-weight:700; letter-spacing:-1pt; line-height:1em; text-transform:uppercase; > .sub—title < font-size:24px; font-weight:300; line-height:1em; text-transform:uppercase; > .blur_image

HTML Body

body> div >"hero-image"> span >"deskTop1280"> img src="http://via.placeholder.com/1280x500/246D5F" width="100%" height="" alt="" >"blur_image">   div >"page-title"> div >"hero-title"> div >"text-wraper"> div >"main-title"> Main title goes here div >"sub-title"> sub title goes here     

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> html, body margin:0;padding:0;> .page-title !-- w w w .d e m o 2 s . c om --> position: absolute; max-width: 38%; top: 50px; left: 0; > .hero-title < background: rgba(0, 0, 0, 0.4); padding: 15px 15px 15px 40px; > .hero-Title:CSSbefore < content: ""; position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: -1; > .text-wraper < z-index: 700; color: #FFFFFF; width: 100%; > .main-title < font-size: 36px; font-weight: 700; letter-spacing: -1pt; line-height: 1em; text-transform: uppercase; > .sub-title < font-size: 24px; font-weight: 300; line-height: 1em; text-transform: uppercase; > .blur_image body> div >"hero-image"> span >"deskTop1280"> img src="http://via.placeholder.com/1280x500/246D5F" width="100%" height="" alt="" >"blur_image"/>  div >"page-title"> div >"hero-title"> div >"text-wraper"> div >"main-title">Main title goes here div >"sub-title">sub title goes here      

Related

• CSS make the background of an li the same length as the text in it (Demo 2)
• CSS make the background of an li the same length as the text in it (Demo 3)
• CSS make transparent black background with non transparent text in front
• CSS blur background behind the text
• CSS make my background for a div have an opacity but not the text
• CSS stop this text from overlapping the background
• CSS make text automatically contrast with a gradient background

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Продвинутые CSS фильтры

Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop — то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background — тоже фон, но является частью элемента, к нему и относится свойство background.

Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций. В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).

CSS фильтры такие как blur(), contrast() или grayscale() — отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

Сегодня я хочу пойти чуть дальше, показав новые возможности CSS.

backdrop-filter

В первую очередь — это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение — это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub — прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное — размытие как в iOS:

Каждый элемент за header`ом размыт на 5px. Это так просто.

Живой пример на JSBin (только Safari 9).

для того, чтобы применить backdrop-filter вместе с небольшими корректировками (background-color и позиционирование), чтобы сохранить читаемость header`а в неподдерживаемых браузерах.

backdrop-filter может повысить читаемость текста, наложенного поверх изображения:

Живой пример на JSBin (только Safari 9).

Комбинируя несколько фильтров, вы можете сделать простые графические эффекты, близкие к тем, которые предлагает CSS blend-modes:

Живой пример на JSBin (только Safari 9).

• фон элемента, к которому применен backdrop-filter, должен быть полу-прозрачным. Если нет, то вы никогда не увидите эффект
• есть баг при комбинировании backdrop-filter с любым свойством, которое обрезает элемент (border-radius, mask, clip-path, etc). Это означает, что продвинутые эффекты пока невозможны
• backdrop-filter создает новый контекст наложения, как opacity
• backdrop-filter можно анимировать
• это свойство требует префикс: -webkit-backdrop-filter
• CanIUse

filter()

Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:

В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она — вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.

Источник