Анимированные Табы на одном CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Анимированные Табы на одном CSS

workman

Пятница, 08 Апреля 2016, 12:25 | Сообщение 1

VIP

Сообщений:1716

Награды: 9

« 155 »

Отличные закладки для сайта, которые будут открывать полную информацию по той или иной форме. Применение Анимированные Табы могут быть на любом интернет ресурсе, так как тематика у них общая, что полагает под собой, это любая тема, но безусловно лучше познавательная. Будем использовать элементы input для связи с элементами div с классом content. В контейнере content содержатся все закладки. Для каждого элемента создаем элемент label. Все метки будут стилизованы как закладки.

Разметка HTML для всех примеров одинакова.

CSS стили для ДЕМО 1

Код

CSS стили для ДЕМО 2

Код

.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}
}

CSS стили для ДЕМО 3

Код

.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)}

CSS стили для ДЕМО 4

Код

.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)}

Прикрепления: 9137408.png (155.2 Kb)

Сообщение отредактировал
workman - Пятница, 08 Апреля 2016, 12:28

[ RU ]

Kosten

Пятница, 08 Апреля 2016, 15:28 | Сообщение 2

Администраторы

Сообщений:44171

Награды: 70

« 565 »

А вообще для чего они, но немного представляю, но просто редко на ресурсах их видел, или просто не замечал.

[ RU ]

Kosten

Пятница, 08 Апреля 2016, 15:30 | Сообщение 3

Администраторы

Сообщений:44171

Награды: 70

« 565 »

Нашел демонстрацию, теперь понятно для чего можно применить.

Прикрепления: 1291482.png (136.2 Kb)

[ RU ]

workman

Пятница, 08 Апреля 2016, 16:14 | Сообщение 4

VIP

Сообщений:1716

Награды: 9

« 155 »

Kosten, Хорошо можно применить для комментариев например. Поставить комменты сайта и комменты ВК

[ RU ]

tsakonter

Суббота, 09 Апреля 2016, 22:13 | Сообщение 5

Проверенные

Сообщений:220

« 8 »

workman, а вы где то на сайте уже делали, что то найти не могу, просто попадалась, а можно сделать на три, это свои от сайта, потом в контакте и фейсбук, если не сложно можете написать скрипт.

[ RU ]

workman

Суббота, 09 Апреля 2016, 22:27 | Сообщение 6

VIP

Сообщений:1716

Награды: 9

« 155 »

tsakonter, Пропишу только позже немного. Выполняю заказ человеку

Сообщение отредактировал
workman - Суббота, 09 Апреля 2016, 22:29

[ RU ]

Kosten

Суббота, 09 Апреля 2016, 22:28 | Сообщение 7