ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стильный вид стандартных блоков сайта на CSS

Стильный вид стандартных блоков сайта на CSS

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

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

Здесь производилась проверка.

Так можно в стилистике редактировать:

Или как у источника:

Контейнер для сайта

HTML

Код

<div class="sidebox">
  <div class="sidetitle">
  <span>Заголовок zornet.ru</span></div>
  <div class="inner">
  Здесь будет находится контент функуий
  </div>
  </div>

CSS

Код

.sidebox {
  background: #1f2229;
  margin: 0 0 17px;
  width: 305px;
  box-sizing:border-box;
  box-shadow: 0px 2px 10px rgba(0,0,0,.2);
}

.sidetitle {
  display: block;
  padding: 19px 0;
  margin: 19px 0 0px;
  background: #1F2229;
}
.sidetitle span {
  display: inline;
  background: #3c80ce;
  color: #fdf0f0;
  padding: 11.4px 26px;
  font-size: 14px;
  padding-right: 70px;
  position: relative;
}

.sidetitle span:after {
  content: '';
  position: absolute;
  right: -40px;
  top: 0;
  border: 19.9px solid transparent;
  border-bottom: 19.9px solid #3c80ce;
  border-left: 19.9px solid #3c80ce;
}
.inner {
  padding: 20px;
  color: #fbefef;
}

Источник: Talantlev.ucoz.ru

12 Апреля 2018 Просмотров: 1659 Комментариев: (4)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 4
Порядок вывода комментариев: First-1 19 Апреля 2018 16:05¹ 0 По моему это стандартный вид и код с 1720го шаблона. На тестовом mobsgame.ru у меня такой же, либо же я изменял стандартный код и забыл уже)) Kosten 19 Апреля 2018 17:40² 0 First, и реально по стилистике аналогичен. -SAM- 19 Апреля 2018 22:56³ 0 "Теперь у веб мастера появилась возможность, это замена блоков в контейнеры на оригинальные, что выставляете самостоятельно с помощью CSS." - как будто бы такой возможности ранее у него не было. А если серьезно, так ничего нет особенного в них... любую статью про скос угла у блока посредством СSS почитать и всё (кстати, думаю, что есть такая и на Zornet, но через ПС не нашёл, чтобы сюда ссылку скинуть в дополнение к публикации... всё перекрывают материалы про закругление углов, что по несколько раз идёт одно и то же). В большинстве случаев просто задают задним фоном блоку это всё, чтобы на всех браузерах одинаково смотрелось (включая древние, то есть кроссбраузерно)... а так - диковинки никакой. waak 20 Апреля 2018 08:24⁴ 0 Причём тут новое или старое я просто показал пользователям классы которые отвечают за стили блоков