Есть один интересный дизайнерский трюк, который делает все изображения на вашем сайте более стильными и придает ощущение, что ваш сайт оформлен в едином стиле. Давайте рассмотрим, в чем же он заключается.
На каждом сайте есть область, где находится основное содержание, текстовая информация и определенные изображения к этой текстовой информации. Давайте назовем эту область «область сайта с основным содержанием». Кроме того, есть и другие части сайта: навигационное меню, где располагаются ссылки для перехода в другие разделы и область логотипа, где располагается изображение – логотип для сайта.
На следующем изображении вы можете наглядно увидеть, что это конкретно за области сайта.
Хорошо, допустим, что с этим мы разобрались. Теперь давайте вернемся к той теме, с которой мы начинали. Дизайнерский трюк будет заключаться в том, что все изображения, которые будут появляться в «области сайта с основным содержанием», должны автоматически обрамляться вот в такую красивую рамочку:
Как добиться такого эффекта? Ответ на этот вопрос, вы можете найти, если дочитаете эту статью до конца.
Делается это все с помощью стилей CSS. Нужно прописать всего лишь несколько строк кода и все изображения на вашем сайте, в определенной области (в которой вы только захотите) сразу же будут обрамлены в красивую рамку. Для этого нам понадобится сделать всего два шага.
Шаг №1.
Итак, первое, что для этого нужно сделать, это заключить область сайта, в которой изображения должны иметь такую рамку в специальную конструкцию:
<div id="content">
….
Здесь будет html-код и рисунки
….
</div>
Шаг №2.
Откройте файл style.css, который содержит стили CSS для вашего сайта и пропишите туда следующие строки:
#content img {
border: 1px solid #C3D9FF;
padding: 5px;
}
Это выражение обозначает, что всем тэгам <img> (они отвечают за отображение рисунков), которые находятся внутри конструкции <div id="content">, будет присвоена рамочка размером в 1 пиксель, сплошная и светло-голубого цвета (border: 1px solid #C3D9FF;) и сделан отступ со всех сторон в 5 пикселей (padding: 5px;).
Вот и все. Как видите, нет ничего сложного. Проделав два этих простых шага, вы придаете вашему сайту эффект стильности и аккуратности.
Удачи и пусть ваши сайты будут красивыми и полезными!
P.S. Вы можете разместить эту статью на своем сайте, только оставляйте, пожалуйста, ссылку на этот блог http://www.dimachen.info.
Спасибо за пост!
Увлекательный пост, спасибо за информацию!
спасибо за информацию
Спасибо за пост!
Супер
Молодец автор, просто супер
ваш блог у меня в фаворитах
Дима,ты как всегда на высоте! Так держать! Твои уроки всегда интересны,увлекательные и полезны.
взяла на заметку
а где подписка на рсс? не находит канал(
Подписки на РСС нет. Вместо этого есть только подписка на мою рассылку. В ней публикуются все новости этого сайта.
Если чесно, то ожидал большего.. это я и сам уже умею. Но все равно спасибо…
А если я хочу , чтобы от рамочки еще и тень падала, это возможно сделать?Как бы трехмерная плоскость чтобы получилась и изображение с рамочкой как бы было приподнято на некоторую высоту и давало тень?Также интересно, а вот от букв можно сделать тень?Без фотошопа?С уважением, setevic1
Я обычно готовлю изображение с тенью в редакторе SnageIt, а затем просто вставляю его на веб-страницу.
Интересненько, буду чаще заходить. Наконец-то нашла что-то стоящее!!!
Классные рамкт представлены в посте, надо генерить много и выкладывать в PSD, пользователи будут очень довольны
Спасибо за совет, буду использовать!
Автору респект, классная рамочка.
Спасибо, себе на сайт поставил рамочку!
а как сделать разные варианты этой рамки?
Дмитрий а как сделать на блоге фоновую картинку,я на некотоых блоках видел?
Например так:
<div style="background:url(001.jpg) repeat-x;"></div>