• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Создать заголовок с линиями по бокам на CSS (Добавление горизонтальных линий в заголовок)
Создать заголовок с линиями по бокам на CSS
Kosten
Дата: Пятница, 29.06.2018, 01:23 | Сообщение 1
Администраторы
Сообщений:17326
Награды: 55


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



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

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.06.2018, 01:48 | Сообщение 2
Администраторы
Сообщений:17326
Награды: 55


Еще одна вариация на тему создание линии до и после текста в 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.06.2018, 13:46 | Сообщение 3
Администраторы
Сообщений:17326
Награды: 55


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



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

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)
Форум » Территория вебмастера » Начинающему вебмастеру » Создать заголовок с линиями по бокам на CSS (Добавление горизонтальных линий в заголовок)
  • Страница 1 из 1
  • 1
Поиск: