Рамочки с настройкой размеров окантовки и разных форм границ, цветные разделительные линии
Здравствуйте дорогие блоггеры. В одном из своих постов я писала о рамках с разным цветом окантовки. В нем я дала информацию как изменить цвет границ рамок, но не написала, что можно изменить форму окантовки. Поэтому сегодня я исправляю эту недоработку, и тем более предлагаемый здесь код проще в использовании и настройке.
Коды рамок вставляете в редакторе сообщений blogger в режиме HTML О формах рамок читайте в моем посте по этой ссылке. Копируйте коды, может кому из Вас понравятся предлагаемые здесь. Итак:
Коды рамок вставляете в редакторе сообщений 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;">
На сегодня все. Меняйте цвета, размеры, фон в рамках и линиях. Ещё информацию о разделительных линиях можно почитать здесь. Комментируйте, не забывайте о друзьях и знакомых в соц сетях. Всего Вам наилучшего.
Новый пост: Оформление горизонтальной линии HR с использованием CSS;
Новый пост: Оформление горизонтальной линии HR с использованием CSS;
Рекомендуемый контент:
