Выпуск 17. Рамки к картинкам
Оформление изображений
При публикации картинок, часто требуется каким-то образом их оформить: рамочки добавить или отступы. Лично я предпочитаю использовать для этих целей PhotoShop 
, но это требует определенных навыков. Поэтому рассмотрим сегодня способы оформления с помощью HTML и CSS.
Основы
Прежде, чем мы приступим непосредственно к написанию кода, определим, что добавлять код мы будем в редакторе WordPress при отключенном визуальном форматировании. Так будет проще добавлять HTML-код. Или же вам нужно будет вызвать отдельное окно к HTML-кодом созданным этим редактором (кнопочка с надписью "HTML").
Простая рамка
Картинка может вполне удобно себя "чувствовать" если ей просто придать тонкую рамку. Цвет рамки вы подбираете на свой вкус, но если не можете определиться, то ставьте черной.
Сам код получается такой:
<img src="путь к вашей картинке" style="border: 1px solid black;">
В данном примере я указал толщин в 1px (пиксел), сплошная линия и черный цвет.
Если нужна рамка потолще, то нужно указать её толщину. Правда учитывайте, что цвет нужно использовать "помягче", например так:
Код такой (привожу только style):
border: 20px solid #F0F0F0;
Значение #F0F0F0 - это светно-серый цвет.
Рамка может быть другого вида. В седьмой рассылке я приводил типы рамок, поэтому мы можем здесь тоже их использовать. Пример двойной рамки:
border: 4px double #003399;
С другими типами рамок вы можете поэкспериментировать самостоятельно.
3D-рамка
Если вы хотите сделать картинку в виде 3D, наподобии кнопки (обычной или нажатой), то для этого используются border с разными цветами сторон. Например, для того, чтобы сделать выпуклость нужно задать цвет верхней и левой стороны светлее, чем нижней и правой.
border-top: 4px solid #FF6666; border-left: 4px solid #FF6666; border-bottom: 4px solid #990000; border-right: 4px solid #990000;
И "нажатость":
border-top: 4px solid #990000; border-left: 4px solid #990000; border-bottom: 4px solid #FF6666; border-right: 4px solid #FF6666;
Должен признаться, что это очень спорное оформление: по-мне так оно "дубоватое", что-ли...
Отступы к рамке
Подойдем к более сложным вещам. Как сделать рамку с некоторым отступом от самой картинки? К сожалению здесь придется добавить дополнительный элемент div. Кроме этого, такой нехороший "товарищЬ" как IE, некорректно понимает стандарты CSS, поэтому придется для него дополнительно использовать хак. Получается вот так:
<div style="display: table;
width: 0;
padding: 10px;
border: 5px solid #007FB5;">
<img src="путь к картинке" style="border: 1px solid #007FB5;">
</div>
В тэге div мы задаем способ отображения (display), ширину (width - это как раз хак для капризного IE), отступ вшешней рамки (padding) и саму рамку (border). Тэг img, мы оформляем как обычно.
Понятно, что наша фантазия может быть безгранична в части оформления внешнего блока (div). Например, можно добавить фон:
<div style="display: table; width: 0; padding: 20px;
border: 1px solid #BADBF7;
background: #C2E3FF;">
<img src="путь к картинке" style="border: 6px double #003366;">
</div>
Фон из другой картинки
Разовьем предыдущую мысль и укажем в качестве фона другую картинку, например горизонтальные линии.
<div style="display: table; width: 0; padding: 20px;
border: 1px solid #BADBF7;
background: #C2E3FF url(путь к фону);">
<img src="путь к картинке" style="border: 2px solid #003366;">
</div>
Или даже так:
<div style="display: table; width: 0; padding: 20px 30px 20px 30px;
border: 2px solid #486C81;
background: #93BEDA url(путь к фону) repeat-x;">
<img src="путь к картинке" style="border: 1px solid #FFFFFF;">
</div>
Совсем сложные...
Если хватит терпения, то можете попробовать совсем сложные рамки.
<div style="display: table; width: 0; padding: 10px 15px 10px 55px;
border: 1px solid #CCCC99;
background: #F7F8E6 url(фон 1) repeat-y;">
<div style="display: table; width: 0; padding: 20px 30px 20px 30px;
border: 2px solid #A26122;
background: #DCD5B2 url(фон 2) repeat-x;">
<img src="путь к картинке" style="border: 1px solid #A26122;">
</div></div>
Суть, надеюсь понятна. Вначале создаем один блок div, в него вкладываем другой, а после уже нашу картинку.
Постоянная ссылка: http://maxsite.org/?p=110
Версия для печати
