Красивая рамка для изображений

Итак, рамка для изображений в блоге с помощью CSS. Несмотря на попсовое название (у меня творческий запор), рамка получается довольно зачетная и функциональная. Дальше будет немного «воды», т.е. следующий абзац можно смело пропустить.

Сегодня писал функционал для пользователей, устанавливающих на сервисе собственные торговые площадки. В-частности, помимо установки/изменения шаблонов, владельцы могут загружать собственное логотипы магазинов. Понятное дело, какое будет у них лого я знать заранее не могу. Если у изображения будет белый фон, то на белом фоне страницы будет смотреться... отнюдь... отнюдь! Добавлять бордюр -- тоже прямо скажем «не айс» -- а ну как логотип тоже будет с бордюром? Решил несколько минут потратить, собственно на оформление изображений.

Та же техника, применительно к блогам на Blogspot. Как и обещал, тут мы используем инструмент Stripe Generator.

1. С помощью Stripe Generator генерируем полосатый узор и загружаем, например, в свой альбом Picasa. Копируем прямую ссылку на изображение из альбома
2. Добавляем в стили CSS своего блога следующее:



img {
  padding: 5px; /* отступ 5 пикселей с каждого края */
  border: 1px solid #E3635C; /* толщина, стиль и цвет бордюра */
  background: #F1F0E5 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswjVa9U74DVcw63UUk6NUNC9n_6h0wLmznRKSjExMfQzQXVbgYsVUBmugiigIvz5T0LnLS0Ny7ZNPZRlniCtkm0MlSD9pyB-alWDBCiNn1Qv05Sj340q9rjhbte4qFdMrm7rsk4aUPO3e/');
  /* базовый цвет фона и адрес картинки ВАШЕГО фонового изображения */
}



3. Сохраняем шаблон.

Ниже приведу, что получилось.