blog image reflection wet floor - эффект мокрого пола для картинки в блоге

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

fender.ru

Конечно, отражение можно сделать в фотошоп, но это не самое изящное решение, так как требует дополнительной возни. Вот бы картинки сами отражались...
Непродолжительно погуглив, сразу вышел на сайт reflect-o-matic, предлагающий готовый, крохотный (5кб) скрипт, который можно интегрировать в блог, будь то блог на движке blogger или, скажем, на Wordpress.

Первым делом скачал c reflect-o-matic этот скрипт, далее зашел на страничку, с информацией по интеграции скрипта в blogger.

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


<script src='_адрес_скрипта_' type='text/javascript'></script>


Мне захотелось самому контролировать местонахождение скрипта, не подключая его со стороннего сайта. К сожалению я пока не нашел решения от Google, позволяющего хранить такой скрипт. Поэтому закачал скрипт на свой хостинг сайтов, связанный с учетной записью в Яндекс, запомнил ссылку и подставил ее вместо _адрес_скрипта_.

Теперь достаточно к желаемой картинке в редакторе заметки blogger дописать атрибут class="reflect". На этом все труды заканчиваются. По желанию, если не лень, можно указать дополнительные настроки в виде:
class="reflect rheight40 ropacity33"
rheight - регулирует высоту отражения, в процентах к высоте картинки;
ropacity - имзменяет прозрачность.

Проверил: скрипт работает в IE, FireFox, Opera. А если где-то не сработает, то ничего страшного, просто не будет украшения в виде отражения.

Готовый примерчик вы видите в начале заметки.

Еще заметки на схожие темы: