Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Обычные табы на простом CSS

Обычные табы на простом CSS

11 окт 2014 | Комментариев: 0 | Просмотров: 1029

В этой статье расскажу как сделать обычные табы на обычном CSS. Для этого нужно:

 

1. CSS

 


.tabs {
 position: relative;
 clear: both;
 margin-top: 20px;
}
.tab {
 float: left;
}
.tab input[type="radio"] {
 display: none;
}
.tab label {
 display: block;
 position: relative;
 z-index: 2;
 top: 1px;
 height: 30px;
 padding: 5px 15px;
 border-width: 1px 0 1px 1px;
 border-style: solid;
 border-color: #c8c8c8;
 background-color: #f1f1f1;
 box-sizing: border-box;
}
.tab input[type="radio"]:checked ~ label {
 background-color: #fff;
 border-bottom-color: #fff;
}
.tab:last-child label {
 border-right: 1px solid #c8c8c8;
}
.tab-content {
 min-height: 250px;
 position: absolute;
 padding: 20px;
 top: 30px;
 right: 0;
 left: 0;
 bottom: 0;
 overflow: hidden;
 border: 1px solid #c8c8c8;
 background-color: #fff;
}
.tab-content * {
 margin: 0;
 opacity: 0;
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 -o-transform: translateX(-100%);
 transition: all 0.6s ease;
}
.tab input[type="radio"]:checked ~ label ~ .tab-content {
 z-index: 1;
}
.tab input[type="radio"]:checked ~ label ~ .tab-content * {
 opacity: 1;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
}
.tab-content img {
 max-width: 330px;
}

 

2. HTML

 

<div class="tabs">
 <div class="tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
 <label for="tab-1">Tab 1</label>
 <div class="tab-content">
 <h3>Header</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis hic sapiente asperiores minus animi nam temporibus cumque magnam ...</p>
 </div>
 </div>
 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1">
 <label for="tab-2">Tab 2</label>
 <div class="tab-content">
 <img src="https://farm8.staticflickr.com/7325/9435941420_ef06aa22c0_o.jpg" />
 </div>
 </div>
 <div class="tab">
 <input type="radio" id="tab-3" name="tab-group-1">
 <label for="tab-3">Tab 3</label>
 <div class="tab-content">
 <iframe width="360" height="250" src="//www.youtube.com/embed/iDjyjWxUrQc" frameborder="0" allowfullscreen></iframe>
 </div>
 </div>
</div>

 

Вот и все готово.




Теги: CSS3, html

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Всплывающее окно при входе на сайт

Всплывающее окно при входе на сайт

В этой статье рассакажу как сделать красивое всплывающее окно при заходе на сайт.
Эффект тени при помощи CSS3

Эффект тени при помощи CSS3

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

Появление кнопки при поставленной галки в чекбоксе

  Простое появлении кнопки при нажатом чекбоксе.
Кнопки с анимацией на CSS3

Кнопки с анимацией на CSS3

Красивые кнопки с анимацией на CSS3. Всегда подойдет любому сайту
Обычное меню на CSS3 с закругленными краями

Обычное меню на CSS3 с закругленными краями

Простое CSS3 меню с закругленными краями использующее свойство ...border-radius, поэтому в IE может не отображаться.
Навигационное меню темными кнопками

Навигационное меню темными кнопками

Простое меню на CSS3/HTML с эффектом выдавливания в темных тонах.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.