Создать заголовок с линиями по бокам на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Создать заголовок с линиями по бокам на CSS (Добавление горизонтальных линий в заголовок)

Создать заголовок с линиями по бокам на CSS

Kosten

Пятница, 29 Июня 2018 | Сообщение 1

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Простой и в тоже время заметный по своему стилю заголовок, который вы можете создать под свою тему. Тема заключается в том, что по центру будет ключевое слово. а точнее заголовок, а вот по правую и левую сторону идут цветные полосы. Что по ширине веб мастер сам может их выстроить, так и по стилистике. Эта тема попалась. что решил ее проверить, что отлично смотрится, что думаю, возможно кто то ищет что то подобное для своей площадке, чтоб сделать ее оригинальный. И этот заголовок будет отличным решением, но явно будет всем заметен, что и требуется.

Приступаем к установке:

HTML

Код

<div class="zasokeguk">
<span>
ZOTNET.RU
</span>
</div>

CSS

Код

.zasokeguk.zasokeguk {

    text-align: center;
    font-size: 27px;
}
.zasokeguk span {
    display: inline-block;
    vertical-align: middle;
}
.zasokeguk:before,
.zasokeguk:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 3px;
    background-color: #008fcf;
    position: relative;
}
.zasokeguk:before {
    margin-left: -100%;
    left: -12px;
}
.zasokeguk:after {
    margin-right: -100%;
    right: -12px;
}

Демонстрация

Прикрепления: 5150488.png (2.4 Kb)

Страна: (RU)

Kosten

Пятница, 29 Июня 2018 | Сообщение 2

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Еще одна вариация на тему создание линии до и после текста в html и стилистики CSS. Вы могли бы подумать, что было бы проще всего создать центрированный заголовок с горизонтальными линиями по обе стороны от него, но, как это часто бывает в веб дизайне, когда бросаете много разных браузеров и устройств, так просто.

В случае с HTML и CSS, существует целый ряд способов достижения этого эффекта. Очень аккуратный конечный продукт, выполненный с использованием аккуратного CSS, который отлично отображается во всех основных браузерах прямо в IE8 и все еще выглядит отлично.

Приступаем к установке:

HTML

Код

<div class="latumipamun">
    <hr/>
    <div class="tresazon-1">ZorNet.Ru: Портал Вебмастера</div>
    <div class="tresazon-2">Интересные решения вебмастеру</div>
</div>

CSS

Код

.latumipamun {
    position: relative;
    padding-top: 27px;
}
.tresazon-1 {
    position: absolute;
    left: 38px;
    top: 28px;
    background: #f9f9fd;
    padding: 0 9px;
}
.tresazon-2 {
    position: absolute;
    right: 38px;
    top: 28px;
    background: #f9f9fd;
    padding: 0 10px;
}

Демонстрация

Прикрепления: 8595628.png (4.2 Kb)

Страна: (RU)

Kosten

Пятница, 29 Июня 2018 | Сообщение 3

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Как можно заметить, что в последнее время довольно часто можно наблюдать в дизайн интернет сайтов разные заголовки, выровненные по центру и обрамлённые линиями по обоим сторонам.

Приступаем к установке:

HTML

Код

<h1><span>zornet.ru</span></h1>

CSS

Код

  h1 {
    position: relative;
    overflow: hidden;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
  }
  h1 > span {
    display: inline-block;
    margin: 0 .4em;
  }
  h1 > span:before,
  h1 > span:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 2px solid #4e4e4e;
    margin-top: .6em;
  }
  h1 > span:before {
    margin-left: -102%;
  }
  h1 > span:after {
    margin-left: 2%;
  }

Прикрепления: 9715887.png (85.0 Kb)

Страна: (RU)

Страница 1 из 1
1