Рамки разной толщины границ и формы окантовки



Рамочки с настройкой размеров окантовки и разных форм границ, цветные разделительные линии


Здравствуйте дорогие блоггеры. В одном из своих постов я писала о рамках с разным цветом окантовки. В нем я дала информацию как изменить цвет границ рамок, но не написала, что можно изменить форму окантовки. Поэтому сегодня я исправляю эту недоработку, и тем более предлагаемый здесь код проще в использовании и настройке. Коды рамок вставляете в редакторе сообщений blogger в режиме HTML О формах рамок читайте в моем посте по этой ссылке. Копируйте коды, может кому из Вас понравятся предлагаемые здесь. Итак:

Рамки с настраиваемой шириной и высотой. Высоту устанавливаете по объему текста.


<div style="border-bottom: 4px dotted #aad7c6; border-left: 5px groove #2db3e9; border-right: 5px outset #ab82ff; border-top: 2px dashed #871f78; height: 130px; width: 500px;">
ВАШ ТЕКСТ
</div>

Добавим в код фон рамки background-color: (можно добавить латиницей, а можно шестизначным значением #ffffff;)


<div style="background-color: ghostwhite; border-bottom: 7px ridge #e74444; border-left: 5px ridge #8b5a2b; border-right: 2px dotted #029d74; border-top: 2px groove #f9e8ff; height: 150px; width: 500px;">
ВАШ ТЕКСТ
</div>


<div style="background-color: ghostwhite; border-bottom: 7px ridge #; border-left: 5px solid #855e42e; border-right: 3px dotted #; border-top: 2px groove #; height: 150px; width: 500px;">
ВАШ ТЕКСТ
</div>

Уберем настройки высоты и ширины, добавим положение padding:10px;, получим резиновую рамочку на всю ширину страницы


<div style="background-color: ghostwhite; border-bottom: 7px ridge #ffff00; border-left: 1px dashed #8b5a2b; border-right: 1px dashed #029d74; border-top: 1px outset #f9e8ff; padding: 10px;">
ВАШ ТЕКСТ</div>


<div style="background-color: ghostwhite; border-bottom: 7px ridge #; border-left: 1px dashed #; border-right: 5px solid #2db3e9; border-top: 5px outset #; padding: 10px;">
ВАШ ТЕКСТ</div>



Я думаю суть настроек понятна: разберем настройки нижней границы

border-bottom: 4px dotted #aad7c6; botton-нижняя граница; 4px;-размер границы;  dotted-форма границы (в данном примере точечная)#aad7c6;-цвет границы;  left-левая граница; right-правая граница; top-верхняя граница; Так же соответственно настраивайте и цвета границ; height: 150px; width: 500px;-высота и ширина рамки; background-color:-фон рамки. 

А теперь немного не по теме, но хочу написать о разделительных линиях для текста. Тем более что линии мы будем создавать с помощью все тех же форм рамок.

Вот такая цветная пунктирная линия (dashed) с настройкой фона


<div style="background-color: #e54651; border-top: 3px dashed #0e5198; margin-top: 2em;"></div>

Точечная (dotted) линия



<hr style="border: 2px dotted #2c1294;">

Двойная (double) линия


<hr style="border: 3px double #029d74;">

Выпуклая (outset) линия


<hr style="border: 3px outset #b561ff;">

Вогнутая (groove) линия


<hr style="border: 2px groove #00b2a1;">

Линия (ridge) кромкой


<hr style="border: 2px ridge #e74444;">

Простая тройная линия





<hr style="height: 0px;">
<hr style="height: 0px;">
<hr style="height: 0px;">
Варианты цветной тройной линии 













<hr style="height: 0px; border-bottom: 2px solid #e74444;">
<hr style="height: 0px; border-bottom: 2px solid #00b2a1;">
<hr style="height: 0px; border-bottom: 2px solid #e74444;">


На сегодня все. Меняйте цвета, размеры, фон в рамках и линиях. Ещё информацию о разделительных линиях можно почитать здесь. Комментируйте, не забывайте о друзьях и знакомых в соц сетях. Всего Вам наилучшего.


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *