Рамка блока и заголовок по центру на CSS - Скачать для фотошопа и сайта

Регистрация Вход

Главная сайта

Форум Все для фотошопа и сайта

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

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

diamont1977 Контакты diamont1977

Дата: Четверг, 21.12.2023, 21:27 | Сообщение # 1

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

Сообщений:: 1542

Замечания:: 0

Offline

Рамка блока и заголовок по центру на 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

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

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

Прикрепления: 6302347.jpg (26.4 Kb) · 4688031.jpg (8.6 Kb) · 5474850.jpg (12.3 Kb)

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

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