Если Вы время от времени читаете мой блог, то должны быть знакомы с
эффектом Tilt-Shift, про который я уже неоднократно писал. Если же нет, тогда рекомендую заглянуть в пост с уроком Photoshop (текст и видео) или посмотреть красивый видеоролик на эту тему .
Сегодня я хотел бы рассказать о возможности использования этого эффекта на сайте без графического редактора, а только с помощью кода. Для этого нам понадобиться библиотека jQuery, браузер с поддержкой CSS3 и скрипт tiltShift.js. Пример и использование в продолжений записи.
Пример
Живой пример работы скрипта можно увидеть на этой страничке.
Использование
Прикручиваем css и js в шапке страницы:
[sourcecode language=”html”]
[/sourcecode]
Вставляем саму картинку и прописываем к ней специальные атрибуты и параметрами, с которыми можно смело экспериментировать (радиус размытия, позиция, размытие по вертикали/горизонтали)
[sourcecode language=”html”]
[/sourcecode]
На этом и все, пробуйте, экспериментируйте. Приятного Вам дня 🙂