n-wp.ru — блог о WordPress

Вопрос читателя: как сделать на своем блоге точно такое же отображение изображений, как у вас, с тенями свечением и прочими восхитительными эффектами?

Я довольно часто получаю письма от читателей блога. И это хорошо — блог оказался полезен. В этих письмах в основном содержатся вопросы. Почти все ответы на эти вопросы можно найти в блоге. Однако некоторые ответы не лежат на поверхности, и чтобы найти их, иногда приходится проявлять смекалку при подборе поисковых выражений. Сегодня мне пришло письмо, в котором заданы вопросы, касаемые оформления изображений в моем блоге. Мне вопросы показались интересны для вынесения в отдельный пост.

Здравствуйте, для начала хочу поблагодарить за полезный блог (http://n-wp.ru) действительно нужный блог для блоггеров!

Спасибо! Я стараюсь не потерять из вида главную идею блога — помощь начинающим блоггерам в работе с WordPress. Ваше письмо показывает, что я иду в правильном направлении.

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

Наверное вы имеете ввиду выделение изображения тенью при наведении на него курсора? Этот эффект реализован с помощью файла стилей CSS моей темы. Оформление, прописанное в CSS — это отдельная, очень большая тема, и в двух словах все приемы, используемые мной, не описать. Скажу кратко: я прописал оформление для изображений в постах без курсора и с подведенным к ним курсором. в обоих случаях используется тень. Выглядит это так:

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

2. А в целом, меня очень интересует, как сделать на своем блоге точно же такое отображение изображений, как у вас, с тенями свечением и прочими восхитительными эффектами?

По поводу тени я уже написал — все тени прописаны в файле style.css, который находится в папке с моей темой. По поводу эффектов, которые сопровождают отображение изображений — это работает плагин Highslide 4 WordPress. Плагин умеет автоматически выводить изображения в отдельном всплывающем окне, которое показывается прямо над текстом. Если изображение большое, то оно плавно увеличивается до тех размеров, какие позволяет ему показать браузер. Если же оригинал изображения все равно больше, то над изображением будет показан специальный значок, кликнув по которому, вы откроете картинку в натуральную величину.

2 комментария

  • спасибо!!!! получилось поставить тень при наведении мышкой на изображение…
    а вот случай если мышка не наведена не сработал =(