Сегодня я хотел бы рассказать о возможности использования этого эффекта на сайте без графического редактора, а только с помощью кода. Для этого нам понадобиться библиотека jQuery, браузер с поддержкой CSS3 и скрипт tiltShift.js. Пример и использование в продолжений записи.
Пример
Живой пример работы скрипта можно увидеть на этой страничке.
Использование
Прикручиваем css и js в шапке страницы:
[sourcecode language=”html”]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tiltShift.js"></script>
<script type="text/javascript"> <![CDATA[
jQuery(document).ready(function() {
$(‘.tiltshift’).tiltShift();
});
]]></script>
[/sourcecode]
Вставляем саму картинку и прописываем к ней специальные атрибуты и параметрами, с которыми можно смело экспериментировать (радиус размытия, позиция, размытие по вертикали/горизонтали)
[sourcecode language=”html”]
<img class="tiltshift" src="url" alt="" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y" />
[/sourcecode]
На этом и все, пробуйте, экспериментируйте. Приятного Вам дня 
