Скроллируемые тени на чистом CSS при помощи background-attachment: local

Несколько дней назад невероятно талантливый Роман Комаров опубликовал свой эксперимент «Скроллируемые тени» на чистом CSS. Если вы используете Google Reader вы, вероятно, знакомы с этим эффектом:

Google Reader

 

В эксперименте Романа он использует абсолютно позиционированные псевдоэлементы чтобы прикрыть тени (которые сформированы радиальным градиентом в качестве фона). Он воспользовался тем фактом, что когда вы прокручиваете скроллируемый контейнер, его бэкграунд не прокручивается вместе с ним, но, при этом, абсолютно позиционированные элементы внутри контейнера прокручиваются. Таким образом, когда вы проскролливаете содержимое блока, тень становится видно из-под псевдоэлемента. Более того, эти псевдоэлементы представляют собой линейный градиент от белого к прозрачному, что позволяет теням проявляться постепенно.

Когда я увидела демо Романа, мне стало интересно возможно ли добиться того же эффекта без дополнительных контейнеров (включая псевдоэлементы). И, похоже, это идеальный случай для использования background-attachment: local. На самом деле, это был единственный реальный вариант использования этого правила, который я когда либо видела.

«background-attachment… что? Я знаю только scroll и fixed!»

scroll и fixed были единственными значениями для background-attachment во времена CSS 2.1. scroll — это дефолтное значение, которое позиционирует фоновое изображение относительно элемента, которому оно назначено, в то время как fixed позиционирует его относительно области просмотра (viewport), в результате чего бекграунд остается на месте, в то время когда страница прокручивается. Как результат этих определений, в случае если скроллируемой была только часть страницы (например, <div> с overflow: auto), его бекграунд не прокручивался когда прокручивался сам контейнер.

В модуле CSS, посвященному границам и фоновым изображениям Backgrounds & Borders Level 3 было добавлено новое значение, чтобы снять это ограничение: local. Когда применяется background-attachment: local фоновое изображение позиционируется относительно содержимого элемента. В результате этого оно прокручивается когда прокручивается элемент. Это не новая фича, она была нам доступна со времен первых черновиков Backgrounds & Borders 3 в 2005 году (конечно, реализация заняла некоторое время, так что можно считать, что с 2009).

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

«Хорошо, я понял. Вернитесь к скроллируемым теням пожалуйста?»

Основная идея заключалась в том, чтобы превратить эти абсолютно позиционированные псевдоэлемнты в фоновые слои, к которым применено правило background-attachment: local. Я попробовала это, это сработало и помогло довольно сильно сократить код. Вот как выглядит CSS:

Недостаток этого подхода в том, что мы немного понижаем кроссбраузерность. Оригинальный эксперимент Романа мог работать даже в IE8, если заменить градиенты картинками (градиенты не влияют на функциональность). Когда вы полагаетесь на background-attachment: local, вы сужаете поддержку браузерами до IE9+, Safari 5+, Chrome и Opera. Firefox оказался самым явным прогульщиком из этого списка, вы можете проголосовать за баг #483446, если вы заинтересованны в том, чтобы они реализовали это.

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

Перевод статьи Pure CSS scrolling shadows with background-attachment: local автор Lea Verou

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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