Главная css Гризонтальная линия

CSS стили для горизонтальных линий.
1. Тег <hr>

Как задать цвет линии тега <hr>

Цвет линии тега <hr>, по умолчанию отображается серого цвета и с эффектом объема.

Линия <hr> по умолчению:

Линия <hr> по умолчению увеличенная в 1000 раз:

Стиль <hr> по умолчанию:

<style>  
  hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    }
</style>

Чтобы линия выбранного цвета во всех браузерах отображалась одинаково,
нужно задать 4 свойства:

4 свойства тега <hr>

<style>
 hr.red {
   border: none;          /* Убираем границу */
   color: red;            /* Цвет линии */
   background-color: red; /* Цвет линии */
   height: 1px;           /* Толщина линии/* 
 }

 /* <hr> - градиент /* 
 hr.grad {
   border: none; 
   background: linear-gradient(to right, green, gold 90%) 
   height: 1px;
 }
</style>

Линия <hr> красного цвета
<hr class="red">
Линия <hr> градиент
<hr class="grad">

Результат:

Линия <hr> красного цвета:

Линия <hr> градиент:

Пример двойной линии

2. Линейный градиент

Градиентом называют плавный переход от одного цвета к другому.

Градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

CSS3 определяет два типа градиентов:

Линейный градиент (Linear Gradient) - плавный переход от цвета к цвету по прямой линии.
Радиальный градиент (Radial Gradient) - плавный переход от цвета к цвету из одной точки во все направления.

Линейный градиент

Линейный градиент linear-gradient() добавляется через свойство background | background-image.

{background: linear-gradient(направление (to ключевое слово), первый цвет, второй цвет и т.д.);}

Направление линии градиента может быть определено двумя способами:

Использование ключевых слов;
Использование градусов.

Табллца. Типы градиента
Ключевое слово	Угол	Направление	Результат
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз. Значение по умолчанию.
to right	90deg	Слева направо.
to top left	315deg	От правого нижнего угла к левому верхнему.
to top right	45deg	От левого нижнего угла к правому верхнему.
to bottom left	225deg	От правого верхнего угла к левому нижнему.
to bottom right	135deg	От левого верхнего угла к правому нижнему.

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% - конечной.

1
1) {background-image: 
linear-gradient(to top right, tomato, #000000 50%, gold);}
2) {background-image: 
linear-gradient(to right bottom, fuchsia, black 35%, white, green 65%);}
3) {background-image: 
linear-gradient(to left, black 10%, yellow, red 90%);}
4) {background-image: 
linear-gradient(315deg, yellow 25%, #12ff00);}
5) {background: 
linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);}

Повтор градиента

2
.grad1 {background: 
repeating-linear-gradient(45deg, Olive, Teal 10px, Coral 10px, Maroon 20px);}

.grad2 {background: 
repeating-linear-gradient(45deg, Maroon, Coral 10px, Maroon 10px, Coral 40px);}

.grad3 {background: 
repeating-linear-gradient(45deg, #fcfced, #fcfced 10px, #f3f3f3 10px, #f3f3f3 20px);}    

<div class="grad1" style="height: 40px;"></div>
<div class="grad2" style="height: 40px;"></div>
<div class="grad3"> Пояснение... </div>

Пояснение:
Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию.

Рамки (CSS)