Оформление горизонтальной линии HR с использованием CSS



Здравствуйте друзья и читатели. Сегодня я вернусь к оформлению горизонтальных линий. Для каждого варианта оформления пропишу стиль 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> в нужном месте текста.

Добавим к линии треугольники:  

Код CSS для вставки в шаблон

<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>




Код CSS для вставки

<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>


Код CSS для вставки

<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>




<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>


Код CSS для вставки

<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>


Код CSS для вставки

<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>

Тестируйте свои идеи оформления. Задавайте вопросы, в блоге работает контактная форма и поле комментариев к Вашим услугам. Всего доброго.

Выбрать цвет по ссылкам:

Text.ru - 100.00%

Рекомендуемый контент:




Автор статьи ✎ Olga Protasova Выпуск ✹ 12/17/2018 Ярлыки ►


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

2 коммент. :

  1. Спасибо за интересные идеи)

    ОтветитьУдалить
    Ответы
    1. Зоя Кучинская здравствуйте и спасибо за отзыв. Забегайте еще за информацией. В меню, вкладка "Содержание" все статьи блога по ярлыкам.

      Удалить


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


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

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

Имя

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

Сообщение *