Добавление отражения к изображению

Ранее в теме Отражение изображения на воде мы рассмотрели скрипт формирования отражения для изображений. Тот скрипт имел много недостатков, главным из которых является корректная работа только в браузерах семейства IE.

Теперь хотим предложить Вам более функциональный и универсальный скрипт для добавления отражения к любому изображению.

Для добавления отражения к изображениям на своем сайте Вам потребуется небольшой JavaScript код, который Вы можете скачать у нас в виде внешнего js файла по ссылке reflection.rar.

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

Здесь просто добавили желтый фон.


Здесь добавили дополнительный класс rheight80, отвечающий за высоту отражения.


А этому отражению добавили класс ropacity20, отвечающий за прозрачность.

Как видите, использование скрипта по добавлению отражения не составляет труда и все его настройки довольно просты и понятны. Вам нужно лишь подключить скачанный скрипт в коде Вашей странички:

А потом добавлять нужные классы к изображениям следующим образом:

Для изменения высоты отраженного изображения, просто измените цифры в конце класса rheight60. Точно так же можно изменить и прозрачность отраженного изображения путем изменения значения в классе ropacity20.

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