Оформление текста в красивые рамочки



Рамки для текста с возможностью изменить фон, ширину и высоту

Здравствуйте дорогие гости и читатели моего блога. В этой статье предлагаю Вам коды различных рамочек для оформления текста. В моем блоге уже есть статья на эту тему, но там в кодах нет возможности изменить фон и размеры рамки. В коды этих рамок я добавила фон-background:,  height:-высоту рамки и  width:-ширину рамки. Можете копировать и настраивать, как Вам необходимо.


В кодах этих рамочек Вы сможете изменить только цвет фона, ширина рамки на всю страницу

<div style="background: #F8F8FF; border: 5px dotted #CDCDCD; padding: 10px;">
ваш текст.</div>

<div style="background: #eeeeee; border: 3px dashed #636363; padding: 10px;">
ваш текст.< / div>

<div style="background: #E8F8FF; border: 10px inset #871F78; padding: 10px;">
ваш текст.</div>

<div style="background: #E6E8FA; border: 10px outset #0073E9; padding: 10px;">
ваш текст.</div>

<div style="background: #F8F8FF; border: 10px double #871F78; padding: 10px;">
ваш текст.</div>

<div style="background: #03b4cc; border: 7px groove #047AFE; padding: 10px;">
ваш текст</div>

<div style="background: #FFFACD;border: 10px ridge #FFFACD; padding: 10px;">
ваш текст.</div>

В кодах этих рамочках можете изменить высоту, ширину и фон рамки





<div style="background: #f8f8ff; border-width: thick; border: 10px double #03b4cc; height: 250px; padding: 4px; width: 350px;">
ваш текст.</div>




<div style="background: #f8f8ff; border: 10px outset #03b4cc; height: 200px; padding: 10px; width: 350px;">
ваш текст.</div>





<div style="background: #134f5c; border: 10px groove #047AFE; height: 240px; padding: 10px; width: 200px;"></div>




<div style="background: #eeeeee; border: 5px dotted #CDCDCD; height: 200px; padding: 10px; width: 250px;">
</div>




<div style="background: #F8F8FF; border: 3px dashed #CDCDCD;  height: 240px; padding: 10px;width: 200px;">
ваш текст.< / div>




<div style="background: #FFFACD;border: 10px ridge #FFFACD; height: 200px;  padding: 10px;width: 300px;">
ваш текст.</div>





<div style="background: #FFDEAD; border: 10px inset #ff9900; height: 220px; padding: 10px;width: 300px;">
ваш текст.</div>


<div style="background: #0a9e08; border: 5px dotted #F8F8FF; height: 100px; padding: 10px; width: 450px;">ваш текст.</div>



<div style="background: #3399ff; border: 5px dashed #eeeeee; height: 140px; padding: 10px; width: 400px;">
ваш текст.</div>

Что касается настроекpadding: 10px;-можно так же увеличить высоту рамки; border: 10px-размер окантовки. Код рамки вставляйте в HTML в редакторе сообщений. Затем прямо в рамке пишите свой текст. 

Почитайте статьи по теме Готовые рамки для оформления текста и Как выделить часть текста в рамку. На сегодня у меня все. Пишите отзывы, делитесь с друзьями. Всего Вам доброго.


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/05/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *