ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создание объемной ленты при помощи CSS3

Создание объемной ленты при помощи CSS3

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

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

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

Приступаем к установке:

HTML

Код

<div class="nudersamolamis">
  <div class="elesazantyqtabkug">ZORNET.RU</div>

Здесь ваше описание, что может быть ключевая фраза под ссылкой на переход или картинка.
</div>

CSS

Код

.nudersamolamis {
  margin: 47px auto;
  width: 379px;
  height: 249px;
  background: #f7f2f2;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 7px rgba(23, 22, 22, 0.46);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 5px rgba(29, 27, 27, 0.82);
  position: relative;
  padding: 14px;
  z-index: 90;
  border: 2px solid #babcc1;
}

.elesazantyqtabkug {
  text-align: center;
  position: relative;
  font-family: 'OpenSans2', Arial, sans-serif;
  font-size: 17px;
  color: #fbfaeb;
  padding: 16px 0;
  text-shadow: 0 1px rgb(42, 42, 45);
  background: #04111f;
  margin: 0px -24.9px 5px -24.9px;
  clear: both;
}
.elesazantyqtabkug::before, .elesazantyqtabkug::after{
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent;
  bottom: -10px;
}

.elesazantyqtabkug::before{
  border-width: 0 10px 10px 0;
  border-right-color: #5d5d5d;
  left: 0;
}

.elesazantyqtabkug::after{
  border-width: 0 0 10px 10px;
  border-left-color: #5c5c5c;
  right: 0;
}

Приведенный метод следует рассматривать как инновационные или творческие подход, что по стилистике можно достичь с помощью чистого CSS3 с настройкой по месту.

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

23 Мая 2018 Просмотров: 1198 Комментариев: (2)

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

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

Kosten

Комментарии: 2
Порядок вывода комментариев: DESTEQ 23 Мая 2018 12:47¹ 0 Было бы лучше у класса .elesazantyqtabkug отступы исправить на «margin: 0px -27px 5px -27px;», а то такое ощущение что полоса заползает на панель (может так и должно быть, но на мой взгляд лучше будет если всё вровень по краям) Kosten 23 Мая 2018 13:11² 0 Об этот сразу подумал, прежде чем описание ставить, но изначально поставил краткое описание и проверил, что все корректно показало, а здесь с вами полностью согласен, что отступы самому задавать.