ени скролла

Сверстал тут довольно старый эффект, но вот только на чистом CSS.

Изначально делал с враппером и двумя лишними псевдоэлементами и box-shadow, но потом чуть подумал и реализовал только на одном блоке — с помощью радиальных градиентов.

У метода есть некоторое число ограничений: фон должен быть сплошным (хотя, если взять background-attachment: fixed…), блок должен иметь определённое позиционирование, но в остальном — метод довольно ударопрочный. Если делать не через CSS-градиенты, а используя обычные изображения, то метод должен будет заработать и в IE, но я не проверял.

Update: Lea Verou обновила мой эксперимент использовав background-attachment: local. Подробности можно прочитать в её посте.

  • Not enough content to scroll
  • 2
  • 3
  • 4
  • 5
  • Ah! Scroll below!
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • The end!
  • No shadow there.

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано с метками: #Experiment #Practical #CSS