Создание объемной ленты - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Многие разработчики добиваются эффекта трехмерности на своих вебсайтах, используя изображения (особенно на заднем фоне), линии и некоторые CSS техники, помогающие создать иллюзию объемного пространства. Мы постараемся это реализовать используя только CSS и HTML.

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

Код
<div class="lenta">
  <div class="bvl_lenta">Kamorka.uCoz.com</div>
</div>


В CSS:

Код
.lenta {
  margin: 50px auto;
  width: 250px;
  height: 370px;
  background: #e1e1e1;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  padding: 15px;
  z-index: 90;
}
   
.bvl_lenta {
  text-align: center;
  position: relative;
  font-family: 'OpenSans2', Arial, sans-serif;
  font-size: 16px;
  color: #FFF;  
  padding: 15px 0;
  text-shadow: 0 1px rgba(0,0,0,1);
  background: #123;
  margin: 0px -25px 10px -25px;
  clear: both;
}  
.bvl_lenta::before, .bvl_lenta::after{
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent;
  bottom: -10px;
}
   
.bvl_lenta::before{
  border-width: 0 10px 10px 0;
  border-right-color: #5d5d5d;
  left: 0;
}
   
.bvl_lenta::after{
  border-width: 0 0 10px 10px;
  border-left-color: #5c5c5c;
  right: 0;
}



Важно!

При копировании материала указывать ссылку на источник.

- 758
- 27-Ноября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта