Красивые оформление заголовка для сайта | |
| Одно из главных на любом сайте считается заголовок, где он должен безусловно быть привлекательным, что сейчас таким его создадим на 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, где можно все самому редактировать и что то по визуализации добавить. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |