ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Анимированные Табы - вкладки для сайта на CSS

Анимированные Табы - вкладки для сайта на CSS

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

Установка:

Что первое нам нужно сам каркас, устанавливаем там где вам нужно.

Код

<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked"/>
<label for="tab-1" class="tab-label-1">О нас</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2"/>
<label for="tab-2" class="tab-label-2">Услуги</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
<label for="tab-3" class="tab-label-3">Работы</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
<label for="tab-4" class="tab-label-4">Контакты</label>
<div class="clear-shadow">
</div>
<div class="content">
  <div class="content-1">
  <h2>О нас</h2>
  <p>
  Содержание 1
  </p>
  </div>
  <div class="content-2">
  <h2>Услуги</h2>
  <p>
  Содержание 2
  </p>
  </div>
  <div class="content-3">
  <h2>Портфолио</h2>
  <p>
  Содержание 3
  </p>
  </div>
  <div class="content-4">
  <h2>Контакт</h2>
  <p>
  Содержание 4
  </p>
  </div>
</div>
</section>

Но и сами стили, их несколько, с разным эффектом открытие.

1) стиль CSS

Код

2) стиль CSS

Код

.tabs{position:relative;margin:40px auto;width:750px}
.tabs input{position:absolute;z-index:1000;width:120px;height:40px;left:0;top:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);cursor:pointer}
.tabs input#tab-2{left:120px}
.tabs input#tab-3{left:240px}
.tabs input#tab-4{left:360px}
.tabs label{background:#5BA4A4;background:-moz-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5BA4A4),color-stop(100%,#4E8C8A));background:-webkit-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-o-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-ms-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);font-size:15px;line-height:40px;height:40px;position:relative;padding:0 20px;float:left;display:block;width:80px;color:#385C5B;letter-spacing:1px;text-transform:uppercase;font-weight:bold;text-align:center;text-shadow:1px 1px 1px rgba(255,255,255,0.3);border-radius:3px 3px 0 0;box-shadow:2px 0 2px rgba(0,0,0,0.1),-2px 0 2px rgba(0,0,0,0.1)}
.tabs label:after{content:'';background:#FFF;position:absolute;bottom:-2px;left:0;width:100%;height:2px;display:block}
.tabs input:hover+label{background:#5BA4A4}
.tabs label:first-of-type{z-index:4;box-shadow:2px 0 2px rgba(0,0,0,0.1)}
.tab-label-2{z-index:3}
.tab-label-3{z-index:2}
.tab-label-4{z-index:1}
.tabs input:checked+label{background:#FFF;z-index:6;-webkit-animation:page .2s linear;-moz-animation:page .2s linear;-ms-animation:page .2s linear;-o-animation:page .2s linear;animation:page .2s linear}
.clear-shadow{clear:both}
.content{background:#FFF;position:relative;width:100%;height:370px;z-index:5;overflow:hidden;box-shadow:0 -2px 3px -2px rgba(0,0,0,0.2),0 2px 2px rgba(0,0,0,0.1);border-radius:0 3px 3px 3px}
.content div{position:absolute;top:0;padding:10px 40px;z-index:1;opacity:0;-webkit-transition:all linear .3s;-moz-transition:all linear .3s;-o-transition:all linear .3s;-ms-transition:all linear .3s;transition:all linear .3s}
.content-1,.content-3{-webkit-transform:translateX(-250px);-moz-transform:translateX(-250px);-o-transform:translateX(-250px);-ms-transform:translateX(-250px);transform:translateX(-250px)}
.content-2,.content-4{-webkit-transform:translateX(250px);-moz-transform:translateX(250px);-o-transform:translateX(250px);-ms-transform:translateX(250px);transform:translateX(250px)}
.tabs input.tab-selector-1:checked ~ .content .content-1,.tabs input.tab-selector-2:checked ~ .content .content-2,.tabs input.tab-selector-3:checked ~ .content .content-3,.tabs input.tab-selector-4:checked ~ .content .content-4{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-o-transform:translateX(0px);-ms-transform:translateX(0px);transform:translateX(0px);z-index:100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transition:all ease-out .2s .1s;-moz-transition:all ease-out .2s .1s;-o-transition:all ease-out .2s .1s;-ms-transition:all ease-out .2s .1s;transition:all ease-out .2s .1s}
.content div h2,.content div h3{color:#398080}
.content div p{font-size:14px;line-height:22px;font-style:italic;text-align:left;margin:0;color:#777;padding-left:15px;font-family:Cambria,Georgia,serif;border-left:8px solid rgba(63,148,148,0.1)}
@keyframes "page"{0%{left:0}
50%{left:10px}
100%{left:0}
}
@-moz-keyframes page{0%{left:0}
50%{left:10px}
100%{left:0}
}
@-webkit-keyframes "page"{0%{left:0}
50%{left:10px}
100%{left:0}
}
@-ms-keyframes "page"{0%{left:0}
50%{left:10px}
100%{left:0}
}
@-o-keyframes "page"{0%{left:0}
50%{left:10px}
100%{left:0}
}

3) стиль CSS

Код

.tabs{position:relative;margin:40px auto;width:750px}
.tabs input{position:absolute;z-index:1000;width:120px;height:40px;left:0;top:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);cursor:pointer}
.tabs input#tab-2{left:120px}
.tabs input#tab-3{left:240px}
.tabs input#tab-4{left:360px}
.tabs label{background:#5BA4A4;background:-moz-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5BA4A4),color-stop(100%,#4E8C8A));background:-webkit-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-o-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-ms-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);font-size:15px;line-height:40px;height:40px;position:relative;padding:0 20px;float:left;display:block;width:80px;color:#385C5B;top:0;letter-spacing:1px;text-transform:uppercase;font-weight:bold;text-align:center;text-shadow:1px 1px 1px rgba(255,255,255,0.3);border-radius:3px 3px 0 0;box-shadow:2px 0 2px rgba(0,0,0,0.1),-2px 0 2px rgba(0,0,0,0.1)}
.tabs label:after{content:'';background:#FFF;position:absolute;bottom:-8px;left:0;width:100%;height:8px;display:block}
.tabs input:hover+label{background:#5BA4A4;top:-8px;-webkit-transition:top linear .2s;-moz-transition:top linear .2s;-o-transition:top linear .2s;-ms-transition:top linear .2s;transition:top linear .2s}
.tabs input:hover+label:after{background:#5BA4A4}
.tabs input:hover+label ~ .clear-shadow{top:-8px;-webkit-transition:top linear .2s;-moz-transition:top linear .2s;-o-transition:top linear .2s;-ms-transition:top linear .2s;transition:top linear .2s}
.tabs input:checked:hover+label{top:0}
.tabs input:checked:hover+label:after{background:#FFF}
.tabs input:checked:hover+label ~ .clear-shadow{top:0;background:#FFF;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none}
.tabs input.tab-selector-1:hover+label.tab-label-1 ~ .clear-shadow{z-index:3}
.tabs input.tab-selector-2:hover+label.tab-label-2 ~ .clear-shadow{z-index:2}
.tabs input.tab-selector-3:hover+label.tab-label-3 ~ .clear-shadow{z-index:1}
.tabs input.tab-selector-4:hover+label.tab-label-4 ~ .clear-shadow{z-index:0}
.tabs label:first-of-type{z-index:4;box-shadow:2px 0 2px rgba(0,0,0,0.1)}
.tab-label-2{z-index:3}
.tab-label-3{z-index:2}
.tab-label-4{z-index:1}
.tabs input:checked+label{background:#FFF;z-index:6;-webkit-transition:top linear .2s;-moz-transition:top linear .2s;-o-transition:top linear .2s;-ms-transition:top linear .2s;transition:top linear .2s}
.clear-shadow{background:#5BA4A4;position:relative;top:0;height:10px;margin-bottom:-10px;clear:both;z-index:-2;box-shadow:0 -2px 3px -2px rgba(0,0,0,0.2);border-radius:3px}
.content{background:#FFF;position:relative;width:100%;height:370px;z-index:5;overflow:hidden;box-shadow:0 -2px 3px -2px rgba(0,0,0,0.2),0 2px 2px rgba(0,0,0,0.1);border-radius:0 3px 3px 3px}
.content div{position:absolute;top:0;left:0;bottom:100%;padding:10px 40px;overflow:hidden;z-index:1;opacity:0;-webkit-transition:all linear .1s;-moz-transition:all linear .1s;-o-transition:all linear .1s;-ms-transition:all linear .1s;transition:all linear .1s}
.tabs input.tab-selector-1:checked ~ .content .content-1,.tabs input.tab-selector-2:checked ~ .content .content-2,.tabs input.tab-selector-3:checked ~ .content .content-3,.tabs input.tab-selector-4:checked ~ .content .content-4{bottom:0;z-index:100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transition:all ease-out .2s .2s;-moz-transition:all ease-out .2s .2s;-o-transition:all ease-out .2s .2s;-ms-transition:all ease-out .2s .2s;transition:all ease-out .2s .2s}
.content div h2,.content div h3{color:#398080}
.content div p{font-size:14px;line-height:22px;font-style:italic;text-align:left;margin:0;color:#777;padding-left:15px;font-family:Cambria,Georgia,serif;border-left:8px solid rgba(63,148,148,0.1)}

4) стиль CSS

Код

.tabs{position:relative;margin:40px auto;width:750px}
.tabs input{position:absolute;z-index:1000;width:120px;height:40px;left:0;top:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);cursor:pointer}
.tabs input#tab-2{top:40px}
.tabs input#tab-3{top:80px}
.tabs input#tab-4{top:120px}
.tabs label{background:#5BA4A4;background:-moz-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5BA4A4),color-stop(100%,#4E8C8A));background:-webkit-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-o-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:-ms-linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);background:linear-gradient(top,#5BA4A4 0,#4E8C8A 100%);font-size:15px;line-height:40px;height:40px;position:relative;padding:0 20px;display:block;width:80px;color:#385C5B;letter-spacing:1px;text-transform:uppercase;font-weight:bold;text-align:right;float:left;clear:both;text-shadow:1px 1px 1px rgba(255,255,255,0.3);border-radius:3px 0 0 3px;box-shadow:0 2px 2px rgba(0,0,0,0.1)}
.tabs label:after{content:'';background:#FFF;position:absolute;right:-2px;top:0;width:2px;height:100%}
.tabs input:hover+label{background:#5BA4A4}
.tabs label:first-of-type{z-index:4}
.tab-label-2{z-index:3}
.tab-label-3{z-index:2}
.tab-label-4{z-index:1}
.tabs input:checked+label{background:#FFF;z-index:6}
.clear-shadow{clear:both}
.content{background:#FFF;position:relative;width:auto;margin:-175px 0 0 120px;height:400px;z-index:5;overflow:hidden;box-shadow:1px 1px 2px rgba(0,0,0,0.1);border-radius:3px}
.content div{position:absolute;top:0;padding:10px 40px;z-index:1;opacity:0;-webkit-transition:all linear .5s;-moz-transition:all linear .5s;-o-transition:all linear .5s;-ms-transition:all linear .5s;transition:all linear .5s}
.content div{-webkit-transform:translateY(-450px);-moz-transform:translateY(-450px);-o-transform:translateY(-450px);-ms-transform:translateY(-450px);transform:translateY(-450px)}
.tabs input.tab-selector-1:checked ~ .content .content-1,.tabs input.tab-selector-2:checked ~ .content .content-2,.tabs input.tab-selector-3:checked ~ .content .content-3,.tabs input.tab-selector-4:checked ~ .content .content-4{-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-o-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px);z-index:100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transition:all ease-out .3s .3s;-moz-transition:all ease-out .3s .3s;-o-transition:all ease-out .3s .3s;-ms-transition:all ease-out .3s .3s;transition:all ease-out .3s .3s}
.content div h2,.content div h3{color:#398080}
.content div p{font-size:14px;line-height:22px;font-style:italic;text-align:left;margin:0;color:#777;padding-left:15px;font-family:Cambria,Georgia,serif;border-left:8px solid rgba(63,148,148,0.1)}

Думаю вам интересно посмотреть как все же работает этот скрипт, на это есть Демонстрация, где вы поймете что можно прописать в них и выбрать вам нужный эффект, так как появление информации преподносится по разному.

08 Апреля 2016 Просмотров: 3143 Комментариев: (8)

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

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

Kosten

Комментарии: 7
Порядок вывода комментариев: FeStemBer 08 Апреля 2016 16:19¹ 0 Для чего они вообще веб маcтеру ucoz, но сами поймите, не могу вообще представить их на этом хостинге, здесь бы контентом заполнить сайт, и не каких закладок не нужно. csretven 08 Апреля 2016 16:59² 0 Давайте не умничать, на счет скриптов, здесь хоть на сайте что то заливают, да пусть старое, так как считаю что старое всегда пригодиться, на форуме в скриптах, всегда новое можно увидит, а что по закладкам, думаю не вам решать, ваше дело флудить и писать что то не по теме. Все скрипты и коды нужны, если они работают. workman 08 Апреля 2016 19:33⁵ 0 Ну вам что не положи все не то и все не так ))) Maryges 08 Апреля 2016 17:28³ 0 Ух ты как много умного узнал, только мало что понял что ты Траст, хотел донести. То что это лажа и не стоит внимание заострять, что то в этом смысле. workman 08 Апреля 2016 19:29⁴ 0 Ребята. Вообще-то табами можно сделать несколько комментариев на сайте. Например комменты сайта - комменты ВК,комменты - Фейсбук ... Kosten 08 Апреля 2016 19:33⁶ 0 workman, а это точно же, на таблах сделаны комментарий, это который по умолчанию и к примеру второй от социальной сети в контакте, так и третий можно запелить. csretven 09 Апреля 2016 22:22⁷ 0 workman, вы полностью правы, так как таблы основном и делают под ответы, также можно пременять и по другим назначением.