Размиване на фона с CSS

В CSS3 има много нови свойства, които могат значително да ускорят оформлението на определени елементи на страницата. Например, css филтри, за един от които се предлага да говорим днес.

Всеки от нас поне веднъж имаше възможност да наблюдава ефекта на размазване на страницата. За създаването му често се използва библиотеката jQuery bjurjs. Не е препоръчително обаче да използвате jQuery на всички сайтове и технологиите не стоят неподвижни: сега можем да използваме чисто CSS решение. Да опитаме?

Пример за най-простата маркировка:

И така, имаме родителски div с клас на обвивка, който служи като контейнер за два вложени div: вътрешната обвивка ще съдържа приветствения текст, а размазването ще съдържа изображението, към което искате да приложите ефекта на размазването.

Нека да разгледаме стиловете.

Както можете да видите, дъщерните блокове са абсолютно позиционирани и изравнени. Въпросът е, че ефектът на размазване ще бъде приложен и към поздравителния текст, което бихме искали да избегнем. Следователно е по-добре да контролирате позицията на блоковете един спрямо друг, като използвате z-index. Нека направим това и също така зададем необходимия backgranud за .blur:

---