четверг, 19 февраля 2009 г.

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

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


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


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


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

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

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

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


Bamboo

7 Комментариев :

Mishka Dj комментирует...

спасибо. опробовал. работает и главное - нравится !

Croaker комментирует...

Пожалуйста. Рад, что совет пригодился.

Roman комментирует...

Спасибо за пример! очень доступно и понятно описанно.

peter комментирует...

Ещё красивее можно добавить закруглённые углы

Дамир Кипкаев комментирует...

+ тень (из записи Августа 2009 этого блога с заголовком "CSS3 Свойство box-shadow")

котэ комментирует...

спасибочки, полезно (:

Анонимный комментирует...

это было откровение. использовать бордер... обалденно!

Отправить комментарий

Жги!