ZorNet.Ru — сайт для вебмастера » HTML и CSS » Фон карбон background при помощи градиентов

Фон карбон background при помощи градиентов

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

Стилистика углеродных компонентов предоставляет сторонним разработчикам и инженерам набор многоразовых частей HTML и SCSS для создания веб сайтов и пользовательских интерфейсов. Вы часто ищете прохладные фоновые градиенты для вашего пользовательского интерфейса.

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

1. Вариант

HTML

Код

<h1>ZORNET.RU</h1>
<hr>

CSS

Код

body {
  background: -webkit-linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%), -webkit-linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em, -webkit-radial-gradient(at 50% 0, #484847, #090909);
  background: linear-gradient(45deg, #2b2a2a 25%, #10101000 25%, transparent 75%, #212020 75%), linear-gradient(45deg, #252424 25%, transparent 25%, transparent 75%, #272626 75%) 0.1875em 0.1875em, radial-gradient(at 50% 0, #4a4a48, #131212);
  background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
}

h1 {
  color: rgba(10, 10, 10, 0.36);
  font-size: 5em;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 9px;
  text-shadow: rgba(247, 237, 237, 0.05) 2px 2px 2px;
}
hr {
  height: 1px;
  width: 90%;
  border: 0;
  box-shadow: rgba(251, 243, 243, 0.05) 3px 2px 3px;
  background-image: -webkit-linear-gradient(left, rgba(12, 12, 12, 0), rgba(14, 14, 14, 0.45), rgba(16, 15, 15, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

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

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

Второй вариант:

CSS

Код

body
{
  background:
  linear-gradient(25deg, #191919 4px, transparent 5px) 0 4px,
  linear-gradient(207deg, #191919 4px, transparent 5px) 9px 0px,
  linear-gradient(26deg, #212020 4px, transparent 4px) 0px 9px,
  linear-gradient(206deg, #212020 4px, transparent 4px) 9px 4px,
  linear-gradient(89deg, #171616 9px, transparent 5px),
  linear-gradient(#171616 25%, #171616 25%, #171616 49.9%, transparent 49.9%, transparent 69%, #2b2a2a 69%, #2b2a2a);
  background-color: #0e0e0e;
  background-size: 19px 19px;
}

Отличный способ добавить фоновое изображение только на одну страницу, это фон из углеродного волокна.

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

28 Мая 2018 Просмотров: 1474 Комментариев: (0)

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

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

Kosten

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