Здравствуйте друзья и читатели. Сегодня я вернусь к оформлению горизонтальных линий. Для каждого варианта оформления пропишу стиль CSS. Читайте, реализуйте в своих блогах, пишите отзывы и пожелания. Также посмотрите мои ранние посты:
- Разделительные линии для текста с настройкой размера и цвета;
- Рамки разной толщины границ и формы окантовки;
- Оформление, выравнивание, убрать под кат текст в блоге;
Начнем с самого простого оформления
<style>hr {border: 0; border-bottom: 7px dashed #03b4cc;background: #006400;}</style>

<style>hr {border: 0; border-bottom: 9px double #006400;background: #ff9900;}</style>

<style>hr {border: 0; box-shadow: 0 0 10px 1px #03b4cc;}</style>
Можно изменить цвет, форму и размер рамки. Стили CSS установить дизайн-добавить гаджет, сохраните внизу макета блога, или тема (шаблон) в разделе CSS выше строки </b:skin>, только без тэга <style></style>.
Далее, смотря где нужно установить линию: под заголовком, меню, над/под сообщением, подчеркнуть текст и.т.д, нажмите добавить гаджет HTML, в поле впишите <hr>, сохраните.
Если нужно выделить линией текст или изображение в статье, в редакторе перейти в HTML и также вписать <hr> в нужном месте текста.
Добавим к линии треугольники:

<style>hr {
border: 0;
border-bottom: 7px dashed #03b4cc;
background: #006400;
}
hr::after {
content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 10px solid transparent; /* Прозрачные границы */
border-top: 10px solid #008000; /* Добавляем треугольник */
}
hr::before {
content: '';
position: absolute; /* Абсолютное позиционирование */
right: 20px; bottom: -20px; /* Положение треугольника */
border: 10px solid transparent; /* Прозрачные границы */
border-top: 10px solid #008000; /* Добавляем треугольник */
}
</style>
border: 0;
border-bottom: 7px dashed #03b4cc;
background: #006400;
}
hr::after {
content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 10px solid transparent; /* Прозрачные границы */
border-top: 10px solid #008000; /* Добавляем треугольник */
}
hr::before {
content: '';
position: absolute; /* Абсолютное позиционирование */
right: 20px; bottom: -20px; /* Положение треугольника */
border: 10px solid transparent; /* Прозрачные границы */
border-top: 10px solid #008000; /* Добавляем треугольник */
}
</style>

<style>hr {
border: 0;
box-shadow: 0 0 10px 1px #006400;
}
hr::after {
content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
}
hr::before {
content: '';
position: absolute; /* Абсолютное позиционирование */
right: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
}
</style>
border: 0;
box-shadow: 0 0 10px 1px #006400;
}
hr::after {
content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
}
hr::before {
content: '';
position: absolute; /* Абсолютное позиционирование */
right: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
}
</style>

<style> hr {
border: 0;
box-shadow: 0 0 10px 1px #006400;
}
hr::after {
content: '';
position: absolute; /* Абсолютное позиционирование */
left:50% ; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 70px solid 04af37; border-top: 20px solid #03b4cc;
border-bottom: 70px solid 04af37; border-bottom: 20px solid green;
}
</style>
border: 0;
box-shadow: 0 0 10px 1px #006400;
}
hr::after {
content: '';
position: absolute; /* Абсолютное позиционирование */
left:50% ; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 70px solid 04af37; border-top: 20px solid #03b4cc;
border-bottom: 70px solid 04af37; border-bottom: 20px solid green;
}
</style>

<style>hr {border: 0;box-shadow: 0 0 10px 1px #03b4cc;}
hr::after { content: '';
position: absolute; /* Абсолютное позиционирование */
right: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 20px solid #03b4cc; /* Добавляем треугольник */ }</style>
hr::after { content: '';
position: absolute; /* Абсолютное позиционирование */
right: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 20px solid #03b4cc; /* Добавляем треугольник */ }</style>

<style>hr {border: 0;box-shadow: 0 0 10px 1px #800080;}
hr::after { content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 70px solid 855e42; border-right: 20px solid #8b008b;
border-bottom: 70px solid 855e42; border-left: 20px solid #8b008b;}</style>
hr::after { content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-bottom: 70px solid 855e42; border-right: 20px solid #8b008b;
border-bottom: 70px solid 855e42; border-left: 20px solid #8b008b;}</style>

<style>hr {border: 0; border-bottom: 7px dashed #ff9900;background: #006400;}
hr::after { content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -15px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-left: 20px solid #006400; /* Добавляем треугольник */ }</style>
hr::after { content: '';
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -15px; /* Положение треугольника */
border: 20px solid transparent; /* Прозрачные границы */
border-left: 20px solid #006400; /* Добавляем треугольник */ }</style>
Тестируйте свои идеи оформления. Задавайте вопросы, в блоге работает контактная форма и поле комментариев к Вашим услугам. Всего доброго.
Выбрать цвет по ссылкам:
Выбрать цвет по ссылкам:
Рекомендуемый контент:
Спасибо за интересные идеи)
ОтветитьУдалитьЗоя Кучинская здравствуйте и спасибо за отзыв. Забегайте еще за информацией. В меню, вкладка "Содержание" все статьи блога по ярлыкам.
Удалить