No Image

Эффект матового стекла css

СОДЕРЖАНИЕ
0 просмотров
10 марта 2020

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 54ee6bd42a529778 • Your IP : 91.146.8.87 • Performance & security by Cloudflare

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

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

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

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

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

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

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

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

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

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

Читайте также:  В какую сторону закрывается водопроводный кран

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

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

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

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

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

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

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

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

На заметку

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

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

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

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

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

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

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

Читайте также:  Acer nitro 5 инструкция

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

Мы настраиваем CSS для наложения матовости на оригинальное изображение с применением фильтра blur .

Ложка дегтя

Проще пареной репы, верно? Увы, но на данный момент технология CSS-фильтров довольно сыра. Это значит, что поддержка может быть встроена разработчиками в браузер, но не означает, что данная технология поддерживается всеми браузерами.

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

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

Для того чтобы добавить SVG-фильтр, мы включаем тег в наш html-код и ссылаемся на фильтр с помощью тега url() .

Также не стоит исключать тот вариант, когда ни CSS, ни SVG-фильтры не поддерживаются.

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

Заключение

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

В сравнении со статическими изображениями фильтры проще использовать и легче изменять. Фильтры прекрасно работают в текущих версиях Google Chrome , Safari , и Opera , а также в Firefox . Об IE пока что умолчим.

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

Данная публикация представляет собой перевод статьи « Frosting Glass with CSS Filters » , подготовленной дружной командой проекта Интернет-технологии.ру

Я хотел бы создать div то зафиксировано в одном положении и делает его просвечивающим — делающ содержание за им частично видимым и размытым. Стиле Я ищу подобное div миниатюр "видеть все" в веб-сайт Apple.

единственное, что я могу сделать, это настроить opacity: 0.9 но я не могу размыть содержание под div .

Читайте также:  Русский телефон с двумя экранами цена

Примечание: div имеет фиксированное положение и фоновые прокрутки. Фон это смесь текста и фотографий.

6 ответов

в CSS

IE 4-9 поддерживает нестандартный фильтр

для дальнейшего использования Вот таблица совместимости для CSS filter. Firefox, похоже, получает функцию в v35+, в то время как даже IE11 делает кажется, нет никакой совместимости.

альтернативой является использование svg (безопасно для в основном IE9 и выше):

в JavaScript

вы достигнете самой высокой совместимости браузера с javascript, но обычно самой медленной производительности и добавленной сложности js.

вы можете использовать фильтр изображений CSS.

дополнительная информация о фильтрах изображений CSS:

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

вы заставили меня захотеть попробовать, поэтому я сделал, проверьте пример здесь:

  1. HW ускоренные CSS фильтры
  2. JS для присвоения класса и событий со стрелками
  3. изображения CSS Clip property

просто поместите то же изображение (или его части) с непрозрачностью .9 на несколько пикселей влево/вправо/вверх/вниз — вуаля

Это должны быть ближайшие браузеры в будущем в качестве CSS-фильтра под названием backdrop-filter . В настоящее время практически нет никакой поддержки. Для поддержки браузера см.:http://caniuse.com/#feat=css-backdrop-filter

этот фильтр CSS будет делать матовое стекло без каких-либо смешных дел или хаков. Он просто сделает это.

кто-то записал демонстрацию этого на Vine, и это выглядит очень хорошо. Они использовали Safari nightly, чтобы получить доступ к фильтру CSS. https://vine.co/v/OxmjlxdxKxl

прежде всего OP заявляет, что фон прокручивается. Ни один из доступных ответов не позволяет прокручивать. Исходя из того, как настроен html, это невозможно. Но с использованием известных / угловых можно иметь несколько движков рендеринга для достижения этого эффекта. У меня он построен здесь.

идея заключается в двух рендерингах сайта. Один из них-версия заголовка, которая размыта. Другой-тело. Я использовал Famous / Angular и использую templating для рендеринга шаблон в голове и теле. Заголовок нуждается в смещении для высоты заголовка, чтобы все совпадало. У меня скоро будет фактический код, размещенный здесь и на сайте.

Комментировать
0 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector