Рамки, украшенные картинкой от Юлия_Гурбер

Рамки, украшенные картинкой

С помощью CSS можно сделать вот такие лёгкие симпатичные рамки с картинкой слева, либо справа от текста.
Не буду вдаваться в подробности, как их собрать с нуля, а поясню самое необходимое. Под каждой рамкой стоит готовый код шаблона.

Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.

Ваша подпись

<div style="background-color: #F4FC03; border:3px #00B344 ridge; width: 640px; padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px;"><img src="ВАША КАРТИНКА" style="float: left; margin: 0px 15px 10px 0px" /><span style="font-family: Georgia; color:#000000; font-size: 18px;">Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.<br /><br /> <center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></span></div>

Смотрим дальше

Оригинал записи и комментарии на LiveInternet.ru