Итак, рамка для изображений в блоге с помощью CSS. Несмотря на попсовое название (у меня творческий запор), рамка получается довольно зачетная и функциональная. Дальше будет немного «воды», т.е. следующий абзац можно смело пропустить.
Сегодня писал функционал для пользователей, устанавливающих на сервисе собственные торговые площадки. В-частности, помимо установки/изменения шаблонов, владельцы могут загружать собственное логотипы магазинов. Понятное дело, какое будет у них лого я знать заранее не могу. Если у изображения будет белый фон, то на белом фоне страницы будет смотреться... отнюдь... отнюдь! Добавлять бордюр -- тоже прямо скажем «не айс» -- а ну как логотип тоже будет с бордюром? Решил несколько минут потратить, собственно на оформление изображений.
Та же техника, применительно к блогам на Blogspot. Как и обещал, тут мы используем инструмент Stripe Generator.
- С помощью Stripe Generator генерируем полосатый узор и загружаем, например, в свой альбом Picasa. Копируем прямую ссылку на изображение из альбома
- Добавляем в стили CSS своего блога следующее:
- Сохраняем шаблон.
img {
padding: 5px; /* отступ 5 пикселей с каждого края */
border: 1px solid #E3635C; /* толщина, стиль и цвет бордюра */
background: #F1F0E5 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswjVa9U74DVcw63UUk6NUNC9n_6h0wLmznRKSjExMfQzQXVbgYsVUBmugiigIvz5T0LnLS0Ny7ZNPZRlniCtkm0MlSD9pyB-alWDBCiNn1Qv05Sj340q9rjhbte4qFdMrm7rsk4aUPO3e/');
/* базовый цвет фона и адрес картинки ВАШЕГО фонового изображения */
}
Ниже приведу, что получилось.
7 Комментариев :
спасибо. опробовал. работает и главное - нравится !
Пожалуйста. Рад, что совет пригодился.
Спасибо за пример! очень доступно и понятно описанно.
Ещё красивее можно добавить закруглённые углы
+ тень (из записи Августа 2009 этого блога с заголовком "CSS3 Свойство box-shadow")
спасибочки, полезно (:
это было откровение. использовать бордер... обалденно!
Отправить комментарий
Жги!