ZorNet.Ru — сайт для вебмастера » Графика для сайта » Угловые ленточки по краям страницы на CSS

Угловые ленточки по краям страницы на CSS

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

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

Цветные ленты в углах страницы с помощью CSS3

Установка:

HTML

Код

<div class="kugolok-lentoska top-left sticky red shadow">Скрипты</div>
<div class="kugolok-lentoska top-right sticky blue">Шаблоны</div>
<div class="kugolok-lentoska bottom-left sticky orange">Дизайн</div>
<div class="kugolok-lentoska bottom-right sticky green shadow">Zornet.Ru</div>

CSS

Код

.kugolok-lentoska{
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* фиксируем ленточки */
.kugolok-lentoska.sticky{
  position: fixed;
}
/* легкая тень */
.kugolok-lentoska.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* позиции лент */
.kugolok-lentoska.top-left{ /* верхний угол слева */
  top: 25px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.kugolok-lentoska.top-right{ /* верхний угол справа */
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.kugolok-lentoska.bottom-left{ /* нижний угол слева */
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.kugolok-lentoska.bottom-right{ /* нижний угол справа */
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* выбор цвета лент */
.kugolok-lentoska.white{background: #f5eeee; color: #504c4c;}
.kugolok-lentoska.black{background: #292727;}
.kugolok-lentoska.grey{background: #8e8989;}
.kugolok-lentoska.blue{background: #208ed8;}
.kugolok-lentoska.green{background: #1aaf64;}
.kugolok-lentoska.turquoise{background: #169e83;}
.kugolok-lentoska.purple{background: #7b359e;}
.kugolok-lentoska.red{background: #e03b2a;}
.kugolok-lentoska.orange{background: #ca7119;}
.kugolok-lentoska.yellow{background: #eaca0a;}

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

Как пример, это добавить к ленточкам градиент, где нужно задействовать свойства linear-gradient или radial-gradient, но также не исключаю прозрачности добавьте прозрачности, где также смотреться оригинально, но вообще все то, чтобы сделать более оригинальными и заметными по своему значению.

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

20 Февраля 2021 Загрузок: 3 Просмотров: 1299 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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