ZorNet.Ru — сайт для вебмастера » HTML и CSS » Рамка блока и заголовок по центру на CSS

Рамка блока и заголовок по центру на CSS

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

Здесь такого уже нет, нам остается только подобрать тот оттенок, что на фоне будет красиво и ярко смотреться. Здесь даже данный блок можно назвать элементом дизайна. Как пример, если вы хотите на главной странице описать свою тематику, то данный блок будет отличным решением. А главное все выполнено на чистом CSS, где ставим как элемент дизайна, или на время, чтоб разместить новость или объявление, думаю у такой фактуры есть множество направлении.

Так смотрится на светлом фоне:

Красивый вид рамки для сайта

Здесь добавили фоновое изображение:

Блок с фоном на чистом CSS

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

Установка:

HTML

Код

<div class="karkas-forma">
<div class="opesa_ludsan">Заголовок</div>
<p>Описание блока</p>
</div>

CSS

Код

.karkas-forma {
  position: relative;
  padding: 10px 30px;
  border-left: 5px solid #6d33b7;
  border-bottom: 5px solid #6d33b7;
  border-right: 5px solid #6d33b7;
  border-radius: 0 0 15px 15px;
  margin: 50px 30px 20px;
}
.opesa_ludsan {
  display: flex;
  position: absolute;
  align-items: flex-end;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 22px;
  line-height: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #6d33b7;
  transform: translateY(-100%);
}
.opesa_ludsan:before {
  content: "";
  flex: 1;
  height: 15px;
  margin-right: 15px;
  border-top: 5px solid #6d33b7;
  border-left: 5px solid #6d33b7;
  border-radius: 15px 0;
  transform: translateX(-5px);
}
.opesa_ludsan:after {
  content: "";
  flex: 1;
  height: 15px;
  margin-left: 15px;
  border-top: 5px solid #6d33b7;
  border-right: 5px solid #6d33b7;
  border-radius: 0 15px;
  transform: translateX(5px);
}

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

Источник: atuin.ru

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

14 Августа 2023 Загрузок: 2 Просмотров: 4091 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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