• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать цветные горизонтальных линий на CSS (Создать две горизонтальных линий при помощи CSS)
Создать цветные горизонтальных линий на CSS
Kosten
Дата: Четверг, 2019-03-21, 21:48 | Сообщение 1
Администраторы
Сообщений:20711
Награды: 56


Здесь создаем 2 цветных горизонтальных линий, где по центру будет написано название или ключевое слово. Где изначально такой стиль больше похоже на кнопку, ведь у каждой линий задана своя длина. Что теперь можно применить в дизайне на сайте, а также применение тега hr здесь не нужно, все выполнено на чистом стиле.



HTML

Код
<h3>ZorNet - портал для вебмастера</h3>

CSS

Код
h3 {
    display: table;
    margin: 0 auto;
    padding: 8px 28px;
    transform: skew(-10deg);
    box-shadow: 0 0 5px rgb(251, 251, 251);
    position: relative;
}
h3:before {
    content: "";
    position: absolute;
    border-top: 2px solid #1a7cd2;
    border-bottom: 2px solid #1d85ce;
    transform: skew(10deg);
    left: 5%;
    right: 5%;
    top: -2px;
    bottom: -2px;
}


Демонстрация
Прикрепления: 7035446.png(6.5 Kb) · 23.zip(1.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать цветные горизонтальных линий на CSS (Создать две горизонтальных линий при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: