Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  пятница, февраля 03, 2012  

Как сделать оригинальную рамку у изображений в блоге
На днях знакомая изъявила просьбу коим образом помочь ей немного выделить изображения у себя в блоге, посвященном смыслу женского существования и сумочкам из кожи.
Не мудрствуя лукаво, оформил картинки в постах рамкой из симпатичного узора, разбавив это дело несколькими дополнительными эффектами. Дешево, сердито, но весьма нарядно. Отчего заодно решил поделиться этой милой безделицей с читателями BloggaRolla. Почему бы и нет? К месту, однако.

Для создания красивой рамки вокруг картинок в постах достаточно добавить в шаблон несколько строк кода.

Пример:

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

Добавление стильной рамки к изображениям:

Итак, в административной панели вашего блога проследуйте Шаблон > Изменить HTML. Далее с помощью клавиш CTRL+F найдите в нагромождении ужасных символов отрезок ]]></b:skin> и до него вставьте следующий код:
.img {padding: 10px; /* отступ от каждого края рамки, 10 пикс */
        background: #efea88 url('http://ссылка_на_изображение'); /* фоновый цвет и изображение для рамки */
        box-shadow:0 0 30px #000000; /* тень и ее цвет, 30 пикс */
        -moz-box-shadow:0 0 30px #000000;
        -webkit-box-shadow:0 0 30px #000000;
        border-radius: 5px; /* закругление углов, 5 пикс */
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}
К сожалению, эффект тени и закругленных углов не работает в браузере Internet Explorer.
В случае, если в шаблоне уже присутствует определения img {} либо аналогичные - .post-body img {}, .post img {}, - что весьма вероятно, - замените код между фигурными скобками найденного в блоге одного из перечисленных определений на код между ними же, только данный выше. Несмотря на тупиковую тавтологию, надеюсь, я все-таки был понят.
Остается прописать участок кода http://ссылка_на_изображение ссылкой на свою картинку. Здесь для эстетичного внешнего вида важно, чтобы картинка была с зацикленным узором.
Сохраните шаблон и взгляните на изображения в блоге. Они должны приобрести холеный блеск и относительную оригинальность.
Следует учитывать, что теперь все изображения в постах будут иметь прописанные вами стили и отделены рамкой. При разочаровании или за ненадобностью просто удалите внесенный код.

Сервисы для создания рамок и узоров.

Помимо прочего, при выборе оригинальных бордюров и орнаментов могу посоветовать воспользоваться несколькими простыми, но весьма удобными в использовании, онлайн-генераторами для создания узоров к фонам и рамкам:

Онлайн-генератор для создания узоров Stripe Generator

Онлайн-генератор для создания узоров Tartan Maker

Таким образом, любое изображение в блоге можно оформить по собственному усмотрению, как с помощью озорного бордюра вокруг картинки, так и старинного орнамента в виде рамки, либо просто стильной окаймовкой.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


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