ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые оформление заголовка для сайта

Красивые оформление заголовка для сайта

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

Здесь представлено более 15 вариантов, где вы можете выбрать, тот который вас более подходит и прописать его по умолчанию, где потом при каждой созданной статьи или мануала, а точнее материала, можно его прописать и он будет в оригинальной стилистике.

На некоторое заголовки нужно выставлять дополнительную разметку, но основном все они идут под одним элементом, где отлично сочетается с с псевдоэлементами before и также :after. Не забываем, что он должен отличатся от описание, что можно его поставить на совершенно другой шрифт.

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

Визуально смотрится:

Красиво сделать заголовок на сайте

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

Первое, что нужно сделать, это поставить общие стили на все варианты.

Код

h3 {
  font-family: PT Sans;
  font-size: 19px;
  letter-spacing: 3px;
  max-width: 315px;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #здесь сами оттенок выставляете;
}

Теперь стиль на первый заголовок, а их подчеркну более пятнадцати идет. Здесь идет стилистика, что представлено на изображение.

Код

.d1 h3 {
  color: #4689f1;
  text-align: center;
}
.d1 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: #b3b3b3;
  z-index: -1;
}
.d1 span {
  background: #f3f5f6;
  padding: 0 20px;
}

Остается HTML по месту:

Код

<div class="d1"><h3><span>ZORNET.RU</span></h3></div>

Скачиваем архив, там все под нумерацией, чтоб легче выбрать, тот который вы считаете нужным поставить на интернет ресурс.

Также просматриваем DEMO, где можно все самому редактировать и что то по визуализации добавить.

09 Декабря 2017 Загрузок: 2 Просмотров: 1724 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0