Как достигается эффект размытия на icloud.com?

Когда пользователь выйдет из icloud.com, он отображает значки "app", размытые за рамкой модального знака. Если вы измените размер браузера, значки будут перемещаться позади фильтра размытия. Когда вы подписываете его, размытие оживает.

Blurred icloud.com app icons

Я просмотрел источник, но не могу понять, как достигается этот эффект размытия. Сразу же я подозревал, что CSS filter свойство, но я не могу найти его в CSS. Кроме того, это работает в Firefox, который в соответствии с MDN не должен.

Единственное, что у меня есть, это тот эффект, который он, вероятно, применил к элементу #sc1095, родительскому знаку значков.

Разъяснение

Решение Apple уникально по следующим причинам:

  • Он работает в Firefox.
  • Он не полагается на предварительно сгенерированное фоновое изображение.
  • Он может быть анимированным (предположительно, используя transition).
  • Он не использует <svg> (на странице нет тегов <svg>).

ОТВЕТЫ

Ответ 1

Он использует (для каждого изображения) скрытый <img/> с размытием, скрытый <img/> со значком и видимый холст, в котором они нарисованы.

Посмотрите на источник (сгенерированный, затем с FireBug) для

<a style="left: 140px; width: 142px; top: 129px; height: 142px; z-index: 15; -moz-transform: scale(1)" class="atv4 sc-view springboard-button-view escapes-gpu-disabled" id="sc2301" href="#mail" tabindex="0" role="button" aria-labelledby="sc2301-label">

и вы найдете внутри него (внизу) размытое изображение base64:

<img class="sb-shadow sb-el" style="height: 204px; width: 204px; left: -31px; top: -17px; opacity: 0; display: none;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAABzElEQVR42u3a3Y6DIBCG4f6IUpEF3b3/a10OTD7DaKYMtc5uNXnPNuk+AdIKXCqe627t/FwVtBvittK9ohuNR8kR/D/eSOOAchSPaFJmUfvCzKKGQ0kg9wzRvjGgUqUgOiKAtKnugFqA6AhVQ/SDtiHmUAgyWyBmVAjEKoiC6OjQUckWu1VUCxAZHYIh60QVhq4fHpONykNPGB0Gs7pWHtraXjv8FOsVYuzWVOOmWK8uYAyLyaaYUwZxmGoCjMJ4DF38+jFYNx+IGbQlwVjlGCvFeC2dmAzzpaUT858xQUsnJsNELUkxnXJMV4MZFVSNccowjsGQ9xm1GPnLGV6bQ2pSUMBrMzClewBeCcZL9gCwO4OpFlLfBxYwxZiNQIKh68an4kGQOH++e2bfjJ9q+I0WU9ObEFMq4jcZN8Xw8FMNoJAaF6iflwXEmArz53lmihWfAvQroAhUqnYUgIgrkJ47BSg6n8lGyGcoVPjdgQhiwIiUnc9c2CNAgPolCrDqfIboAWGOAgvPNM0KCjA0CHJzAFCE4c40RSCgZhhwtVkAZoQUwt8DAIrAaJYPf78OAAIBgmpvaCCzQw1ibmh80N0Z/beazvtmf/Em4C+GnVIq6T5d5wAAAABJRU5ErkJggg==">

то изображение значка:

<img src="/system/cloudos/1T.111208/en-us/source/resources/images/mail_icon.png" class="sb-icon sb-el" style="height: 142px; width: 142px; display: none;">

enter image description here

и, наконец, холст:

<canvas height="54" width="54" style="height: 216px; position: absolute; top: -37px; left: -37px; width: 216px;" aria-hidden="true"></canvas>

Измените display: none; на display: block; на изображениях, чтобы показать их.

Вы можете посетить тур HTML5 Canvas Tutorial

Ответ 2

Это то, что я сделал в своем портфолио для просмотра мобильного навигатора.

Эффект с размытием CSS <= Я сделал скрипку, чтобы показать, как эффект CSS Blur может работать.

JQuery

$('.yourBtn').on('click', function() {
   $('#yourID').toggleClass('blur');
});

CSS

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Эта строка: $('.max, .mainContainer').toggleClass('blur'); нацеливает все, кроме заголовка /nav, для добавления эффекта размытия.

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

Port

SVG-фильтры

Вот веб-сайт о том, как использовать эффект размытия SVG в Firefox и во всех браузерах.

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

Размытие SVG

Шкала SVG для каждого браузера