Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Где сидел кузнечик в детской песни Н.Носова ?
Всего ответов: 1309
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Анимированные закладки (tab) на чистом CSS3

Хочешь сказать спасибо? Кликни на рекламный баннер.

02.06.2015, 20:14
Закладки (tab) для различных блоков содержания являются популярным и универсальным инструментом в веб дизайне. В данном уроке мы сделаем закладки на основе радио кнопок с помощью псевдо класса :checked и комбинаторов.
Итак давайте приступим.

Разметка HTML:
Внимание !!! Разметка HTML для всех примеров одинакова.
Будем использовать элементы input для связи с элементами div с классом content. В контейнере content содержатся все закладки. Для каждого элемента создаем элемент label. Все метки будут стилизованы как закладки.

Код
<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>


Каждый элемент input имеет значение и мы можем сделать его выбранным по умолчанию добавив атрибут checked.

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

Код
.tabs {
  position: relative;
  margin: 40px auto;
  width: 750px;
}

.tabs input {
  position: absolute;
  z-index: 1000;
  width: 120px;
  height: 40px;
  left: 0px;
  top: 0px;
  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;
}

.clear-shadow {
  clear: both;
}

.content {
  background: #fff;
  position: relative;
  width: 100%;
  height: 370px;
  z-index: 5;
  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;
  padding: 10px 40px;
  z-index: 1;
  opacity: 0;

  -webkit-transition: opacity linear 0.1s;
  -moz-transition: opacity linear 0.1s;
  -o-transition: opacity linear 0.1s;
  -ms-transition: opacity linear 0.1s;
  transition: opacity linear 0.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 {
  z-index: 100;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

  -webkit-transition: opacity ease-out 0.2s 0.1s;
  -moz-transition: opacity ease-out 0.2s 0.1s;
  -o-transition: opacity ease-out 0.2s 0.1s;
  -ms-transition: opacity ease-out 0.2s 0.1s;
  transition: opacity ease-out 0.2s 0.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);
}


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

Код
.tabs {
  position: relative;
  margin: 40px auto;
  width: 750px;
}

.tabs input {
  position: absolute;
  z-index: 1000;
  width: 120px;
  height: 40px;
  left: 0px;
  top: 0px;
  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 0.2s linear;
  -moz-animation: page 0.2s linear;
  -ms-animation: page 0.2s linear;
  -o-animation: page 0.2s linear;
  animation: page 0.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 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  transition: all linear 0.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 0.2s 0.1s;
  -moz-transition: all ease-out 0.2s 0.1s;
  -o-transition: all ease-out 0.2s 0.1s;
  -ms-transition: all ease-out 0.2s 0.1s;
  transition: all ease-out 0.2s 0.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: 0px;
  top: 0px;
  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: 0px;
  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 0.2s;
  -moz-transition: top linear 0.2s;
  -o-transition: top linear 0.2s;
  -ms-transition: top linear 0.2s;
  transition: top linear 0.2s;
}
.tabs input:hover + label:after{
  background: #5ba4a4;
}
.tabs input:hover + label ~ .clear-shadow {
  top: -8px;
  -webkit-transition: top linear 0.2s;
  -moz-transition: top linear 0.2s;
  -o-transition: top linear 0.2s;
  -ms-transition: top linear 0.2s;
  transition: top linear 0.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 0.2s;
  -moz-transition: top linear 0.2s;
  -o-transition: top linear 0.2s;
  -ms-transition: top linear 0.2s;
  transition: top linear 0.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 0.1s;
  -moz-transition: all linear 0.1s;
  -o-transition: all linear 0.1s;
  -ms-transition: all linear 0.1s;
  transition: all linear 0.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: 0px;
  z-index: 100;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all ease-out 0.2s 0.2s;
  -moz-transition: all ease-out 0.2s 0.2s;
  -o-transition: all ease-out 0.2s 0.2s;
  -ms-transition: all ease-out 0.2s 0.2s;
  transition: all ease-out 0.2s 0.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: 0px;
  top: 0px;
  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: 0px 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 0.5s;
  -moz-transition: all linear 0.5s;
  -o-transition: all linear 0.5s;
  -ms-transition: all linear 0.5s;
  transition: all linear 0.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 0.3s 0.3s;
  -moz-transition: all ease-out 0.3s 0.3s;
  -o-transition: all ease-out 0.3s 0.3s;
  -ms-transition: all ease-out 0.3s 0.3s;
  transition: all ease-out 0.3s 0.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);
}


Вот и всё. Удачи Вам smile





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 2545 | Загрузок: 0 | Рейтинг: 3.3/3
Теги: скрипт, закладки на CSS3, закладки, Tab, на чистом CSS3
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Ваш желудок производит новый слой слизистой оболочки каждые две недели, иначе он переварит сам себя.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта