Css эффект матового стекла

Создание эффекта размытого стекла в CSS

Эффект размытого стекла украшает собой дизайн вашей страницы. В этой статье вы найдете 2 способа создать эффект стекла с помощью CSS.

Способ 1. CSS для старых и новых браузеров

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

Для начала установим фиксированный фон для body , чтоб эффект стекла был виден на фоне изображения.

CSS cвойства для предусматривают центрирование элемента внутри него:

Теперь добавим div с классом .container , который и станет нашей панелью из матового стекла. Для него запишем свойство background: inherit; для того, чтобы картинка была такой же. Сам контейнер меньше, чем размер , но фоновое изображение и все свойства для фона унаследованы от :

Теперь нужно добавить псевдоэлемент ::before для .container — это как раз то, что даст нам размытое стекло. Его свойства связаны с абсолютным позиционированием и координатами со значением 0, чтобы растянуть этот псевдоэлемент на весь родительский контейнер:

Цвет мы задаем, используя тень (свойство box-shadow ) с очень большим размытием, а затем с помощью фильтра ( filter: blur(10px) ) размываем еще наше стекло. Кроме того, важно, чтоб наш псевдоэлемент ::before также унаследовал фоновое изображение от родителя-контейнера (свойство background: inherit ).

Результат можно посмотреть ниже.

Способ 2. Современный подход к созданию эффекта стекла

Теперь об альтернативном способе размытия стекла, который использует немного меньше стилей CSS-фильтра фона, но также имеет меньшую поддержку браузера.

Мы используем ту же разметку: элемент .container внутри body с тем же фоновым изображением, но фиксировать его уже не обязательно.

Для контейнера нужно записать CSS-свойство, называемое backdrop-filter . Для некоторых браузеров на платформе Chrome понадобится еще указание свойства с префиксом: -webkit-backdrop-filter : blur(3px) .

Все остальные стили для .container определяют его размеры. Нам важен цвет фона — выбираем для примера полупрозрачный белый (свойство background-color: rgba(255, 255, 255, .15) ):

Результат css-свойств 2 способа вы увидите ниже.

Вот и все! Поиграйте со значением blur() , чтобы получить желаемый эффект, но больше ничего не нужно.

Генератор для создания эффекта

На сайте css.glass вы можете настроить несколько параметров для вашего эффекта стекла и скопировать полученный код.

В заключение

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

Недостатком использования второго из этих способов является недостаточная на данный момент поддержка браузерами. Прямо сейчас вы можете ожидать поддержки фонового фильтра css в Chrome, Edge и Safari и самых последних версиях Mozilla Firefox. Однако, web не стоит на месте, так что в дальнейшем это изменится.

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

Источник

Эффект «матового стекла» с помощью фильтров CSS

От автора: Этот пост написан Беаром Тревисом (BearTravis), инженером веб-стандартов в Adobe. Мне очень нравится, как Adobe развивает Сеть при помощи новых дизайнерских возможностей, и делает это весьма ответственно. Отличный пример этому– фильтры CSS. В Adobe понимают их важность из-за того, что протоптал эту дорожку Photoshop. Их внедрили в Веб с нормальным синтаксисом и помогли реализовать как спецификацию, так и браузер. Теперь мы видим эти фильтры в стабильных браузерах, и они рекомендованы к использованию в адаптивном прогрессивном улучшении. Аллилуйя. Предлагаем вашему вниманию Беарас учебник на эту тему.

Так как в редакторах изображений уже некоторое время существовали фильтры вроде контрастности (contrast), насыщенности (saturate) иразмытия (blur), то для их переноса в Веб исторически требовалась доставка изображений с уже примененными фильтрами. По мере включения этих фильтров браузерами как части веб-платформы мы смогли начать разбирать сложные визуальные эффекты на составные части и реализовать их в Сети. В этой статье изучается один из таких эффектов — «матового стекла» — и то, как фильтры CSS обеспечивают более чистое и гибкое решение, нежели статические изображения.

Старая школа: эффект «матового стекла» с помощью изображений

Эффект «матовогостекла» некоторое время уже употребляется в Интернете; мы даже наблюдали его здесь, на CSS-Tricks, году этак в 2008. Главная идея этого эффекта довольно проста: нужно размыть и подсветить область за перекрываемым содержимым. Содержимое становится более контрастным по отношению к своему фону, но все равно примерно понятно, что за ним происходит. Встатьена CSS-Tricks используются два изображения: стандартная версия и матовая версия (размытая с помощью белого оттенка). В нашем примере карточка сдвигается вверх и открывает содержимое, матируя при этом фон.

HTML

Разметка сравнительно простая. Унасвсегоодин article, содержащий контент.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Источник

Два эффекта матового стекла на CSS

Где будет просматриваться это в действии в таких интерфейсах, как MacOS и iOS, и даже в Windows где в настоящее время можно определить определенно эффект брендов. Здесь можем эмалировать матовое стекло на сайтах с помощью CSS, и в этом уроке, как говорилось, будет предоставлено два способа сделать.

Хотя изначально все делается на одном варианте, ведь изначально все проверял, где для этого вам предоставлены 2 demo страницы, что реально почти не отличается, но разве на первом примере идет матовый оттенок в светлом формате, на втором немного темнее, и сами края не так сильно выступают. Здесь уже сам веб мастер может выставить свое значение, как он хочет видеть на сайте.

Первый метод имеет достаточно широкую поддержку браузера, но требует больше CSS, чем второй подход, который мы рассмотрим. Начните с создания div с классом .matovoye-steklo. Мы будем использовать это для представления нашей панели из матового стекла, где затем можно задействовать изображение к элементу body.

Как создать эффект матового стекла в CSS

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

.matovoye-steklo <
width: 28rem;
height: 17rem;
box-shadow: 0 0 1rem 0 rgba(41, 39, 39, 0.2);
border-radius: 3px;
position: relative;
z-index: 1;
background: inherit;
overflow: hidden;
>

.matovoye-steklo:before <
content: «»;
position: absolute;
background: inherit;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(241, 241, 241, 0.5);
filter: blur(10px);
margin: -20px;
>

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

Переходим к альтернативному методу, который использует немного меньше стилей, но пользуется чуть меньшей поддержкой браузера. Где аналогично начинаем с класса .frosted-glass-effect — где также пропишем фоновое изображение к элементу body.

Затем мы обратим наше внимание на CSS-свойство с именем backdrop-filter, где начнем с добавления некоторых стилей отображения в наш класс .frosted-glass-effect, включая цвет фона того, что подходит по стилистике к основному дизайну.

body <
background: url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/manudastub.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
>

.frosted-glass-effect <
width: 28rem;
height: 17rem;
box-shadow: 0 0 1rem 0 rgba(33, 31, 31, 0.2);
border-radius: 5px;
position: relative;
z-index: 1;
background: inherit;
overflow: hidden;
>

.frosted-glass-effect:before <
content: «»;
position: absolute;
background: inherit;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(243, 237, 237, 0.5);
filter: blur(10px);
margin: -20px;
>

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

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

Источник

Эффект «матового стекла» посредством CSS-фильтров

Мне нравится, что компания Adobe продвигает новые веб-технологии для дизайна, причем подходит к этому очень ответственно. CSS-фильтры являются тому хорошим примером.

Компания Adobe знала, что фильтры будут востребованы, потому что уже проложила им путь посредством Photoshop .

В web-инструментарий CSS-фильтры попали c уже осмысленным синтаксисом, к тому же « адобовцы » помогли разработчикам со спецификацией и внедрением в браузеры.

На данный момент мы можем видеть работу фильтров в стабильных версиях большинства браузеров. Аллилуйя.

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

Пока такие фильтры, как « контраст », « насыщенность » и « размытие » существовали только лишь в графических редакторах, в web-технологиях мы видели их в уже готовых изображениях, к которым эти фильтры применялись заранее.

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

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

Старая школа: Эффект матового стекла из нескольких картинок

Использовать эффект матового стекла в web-дизайне начали довольно давно. Эффект реализовывался относительно просто: имелось два изображения – оригинальное и обработанное (матовое, « заблёренное » ( blur ) белым оттенком и размытое, с повышенной яркостью).

Затем оригинал применялся фоном к тегу body , а обработанное изображение – задавалось фоном для контейнера div . После чего, для div’а задавались размеры, граница и позиционирование, так что в итоге мы получали нужный эффект.

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

HTML

Разметка относительно проста. У нас всего один тег article , внутри которого находится все содержимое:

 
Птица-Секретарь
 
наводит справки .
 

CSS

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

В конце добавляем белый оттенок. Переполнение спрятано, дабы предотвратить появление скроллинга и чтобы закрепить эффект за элементом .glass :

html, body, .glass body .glass::before .glass

Этот CSS-код создает наше матовое и осветленное наложение. Нам также понадобится кнопка, которая будет сдвигать наложение к низу страницы, высвобождая пространство для отображения самого текста.

Так как матовое изображение является зависимым от наложения, нам также нужно сдвинуть и его для выравнивания с фоном.

Так как демонстрационный режим использует переходы, я предпочел CSS-преобразования свойству background-attachment , так как CSS-преобразования могут работать с помощью аппаратного ускорения :

.glass.down .glass.down::before .glass.up, .glass.up::before

На заметку

Если вам понадобятся дополнительные пояснения, я сделал версию-конструктор .

Эта техника проста и поддерживается большинством браузеров.

Также я немного приукрасил демонстрационный пример с помощью переходов, сгенерированного контента, прозрачности, преобразований и свойства background-size ; все они поддерживаются большинством браузеров вплоть до IE9, за исключением OperaMini .

Новая школа: Матовое стекло с помощью фильтров

Техника наложения двойных изображений требует одновременно иметь « заблёренное » изображение и оригинал, что может доставить кучу неудобств если понадобится применять эффект к множеству картинок.

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

Для этих случаев будет правильным использовать только исходные изображения. И далее матировать их. Вот здесь и приходят на помощь CSS-фильтры.

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

Источник