Главная » 2013 » Март » 5 » Скрипт табов (вкладок) с 3D эффектом на css3 (Скрипты для ucoz)
05.03.2013, 19:10

Скрипт табов (вкладок) с 3D эффектом на css3





Замечательный скрипт вкладок с интересным 3D-эффектом! В данном скрипте используются возможности CSS3, с которыми вы можете познакомиться здесь.

Установка:

В самый низ вашего css:
Код
* {  
box-sizing: border-box;  
  }  

  .tabbed {  
width: 700px;  
margin: 50px auto;  
  }  

  .tabbed > input {  
display: none;  
  }  

  .tabbed > label {  
display: block;  
float: left;  
padding: 12px 20px;  
margin-right: 5px;  
cursor: pointer;  
transition: background-color .3s;  
  }  

  .tabbed > label:hover,  
  .tabbed > input:checked + label {  
background: #4EC6DE;  
  }  

  .tabs {  
clear: both;  
perspective: 600px;  
  }  

  .tabs > div {  
width: 700px;  
position: absolute;  
border: 2px solid #4EC6DE;  
padding: 10px 30px 40px;  
line-height: 1.4em;  
opacity: 0;  
transform: rotateX(-20deg);  
transform-origin: top center;  
transition: opacity .3s, transform 1s;  
  }  

  #tab-nav-1:checked ~ .tabs > div:nth-of-type(1),  
  #tab-nav-2:checked ~ .tabs > div:nth-of-type(2),  
  #tab-nav-3:checked ~ .tabs > div:nth-of-type(3),  
  #tab-nav-4:checked ~ .tabs > div:nth-of-type(4){  
transform: rotateX(0deg);  
opacity: 1;  
  }  

  @media screen and (max-width: 700px) {  
.tabbed { width: 400px }  
.tabbed > label { display: none }  
.tabs > div {  
width: 400px;  
border: none;  
padding: 0;  
opacity: 1;  
position: relative;  
transform: none;  
margin-bottom: 60px;  
}  
.tabs > div h2 {  
border-bottom: 2px solid #4EC6DE;  
padding-bottom: .5em;  
}  
  }


Следующий код в то место, где будет форма со вкладками:

Код
<div class="tabbed">  
<input type="radio" name="tabs" id="tab-nav-1" checked>  
<label for="tab-nav-1">Вкладка 1</label>  
<input type="radio" name="tabs" id="tab-nav-2">  
<label for="tab-nav-2">Вкладка 2</label>  
<input type="radio" name="tabs" id="tab-nav-3">  
<label for="tab-nav-3">Вкладка 3</label>  
<input type="radio" name="tabs" id="tab-nav-4">  
<label for="tab-nav-4">Вкладка 4</label>  
<div class="tabs">  
<div><h2>Заголовок 1</h2><p>Текст 1</p></div>  
<div><h2>Заголовок 2</h2><p>Текст 2</p></div>  
<div><h2>Заголовок 3</h2><p>Текст 3</p></div>  
<div><h2>Заголовок 4</h2><p>Текст 4</p></div>  
</div>  
</div>  

  <script src="/js/prefixfree.min.js"></script>


Скрипт из прикреплённого архива залейте в папку js
Материал взят с сайта infoscript.ru
Теги: Скачать Скрипт табов (вкладок) с 3D эффектом на css3
Скачать "Скрипт табов (вкладок) с 3D эффектом на css3"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: apo-ucoz.com
Категория: Скрипты uCoz | Просмотров: 1705 | Добавил: sold93 | Рейтинг: 5.0/1 |
Теги: эффектом, Скрипт, css3, (вкладок), табов, на, 3d
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]