Хаки и Скрипты Next Generation CMS

CSS и JQuery эффекты в табах (вкладках)

irbees2008 irbees2008 Опубликовано - 14 - октября CSS
3169 - 0
  • Автор: Pete R
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

CSS3 стал приобретать все большую популярность и больше браузеров начинают поддерживать его,многие примочки сделанные на JavaScript можно заменить CSS3. Сегодня я покажу вам, как создать анимированный текст в вкладке с использованием только CSS3.
1.Скачать исходники Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Подключаем код в тело сайта, это сами вкладки

Код:
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">tab 1</label>
<div id="tab-content1" class="tab-content animated fadeIn">
...
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">tab 2</label>
<div id="tab-content2" class="tab-content animated fadeIn">
...
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">tab 3</label>
<div id="tab-content3" class="tab-content animated fadeIn">
...
</div>
</li>
</ul>
3.В стили добавляем :
Код:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}

.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}

[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}

[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}

Можешь почитать и вот эту статейку "Добавляем к себе на сайт,легкие,простые ,адаптивные вкладки-табы"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [43]
  • Гости: [42]
  • Users: [1] ????????? ?????
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 34
  • Генерация страницы: 0.429сек
  • Потребление памяти: 5.370 Mb 
  •   Яндекс.Метрика