Главная » Файлы » Прочие скрипты » CSS

Оригинальные вкладки на CSS3 для вашего сайта на uCoz
24.06.14, 16:53:32



Вот нарыл очередной материал со вкладками на чистом CSS и спешу поделиться им с вами

Для начала посмотрите ДЕМО

Вот моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
.tab-content li,h1,h2,h3{margin-bottom:10px}a{text-decoration:none;color:#efd24a}a:hover{color:#af9b41}.tab-container h3{font-size:147%;color:#efdfb3}#container{margin:0 auto;width:480px;margin-top:4%}.tab-container{position:relative;width:100%;z-index:0}.tab-container>div{display:inline}.tab-container>div>a{position:relative!important;text-decoration:none;color:#d7d7d7;display:inline-block;padding:4px 14px;font-size:15px;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-weight:bold;text-transform:uppercase;margin:2px;background:#4c4648;background:-moz-linear-gradient(top,#4c4648 0%,#474344 52%,#2f2d2e 100%);background:linear-gradient(top,#4c4648 0%,#474344 52%,#2f2d2e 100%);-pie-background:linear-gradient(top,#4c4648 0%,#474344 52%,#2f2d2e 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4c4648),color-stop(52%,#474344),color-stop(100%,#2f2d2e));border:dashed 2px #cfa840;padding:4px 14px;-moz-border-radius:3px;-webkit-border-radius:0px;border-radius:3px;text-shadow:0 -1px 0 #000;-moz-box-shadow:0 4px 10px -5px #000;box-shadow:0 4px 10px -5px #000;-webkit-box-shadow:0 4px 10px -5px #000}.tab-container > div:not(:target) > a {}.tab-container>div:target>a{background:none repeat scroll 0 0 #948a81;text-shadow:0 1px 0 #4c4648}.tab-container>div>div{background:#4c4648;background:-moz-linear-gradient(top,#4c4648 0%,#474344 84%,#2f2d2e 100%);background:linear-gradient(top,#4c4648 0%,#474344 84%,#2f2d2e 100%);-pie-background:linear-gradient(top,#4c4648 0%,#474344 84%,#2f2d2e 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4c4648),color-stop(84%,#474344),color-stop(100%,#2f2d2e));-moz-box-shadow:0 0 12px 1px #000 inset;-webkit-box-shadow:0 0 12px 1px #000 inset;box-shadow:0 0 12px 1px #000 inset;z-index:-2;top:50px;padding:20px;border:solid 6px #4c4648;outline:2px dashed #cfa840;outline-offset:-8px;min-height:250px;position:absolute}.tab-container > div:not(:target) > div {position:absolute}.tab-container>div:target>div{position:absolute;z-index:3!important}div.tab-content{padding-bottom:70px;padding-left:20px;padding-right:20px}.tab-content img{margin:0 auto;display:block;padding-bottom:20px;padding-top:10px}

Следующий код в то место, где должны быть вкладки:
Код
<div id="container">  
  <div class="tab-container">  

  <div id="c1">  
  <a href="#c1" title="Первая вкладка">Первая</a>  
  <div class="tab-content">  
  <h3>Чувак, это первая вкладка</h3>  
   

Прикинь, на apo-ucoz самые лучшие проверенные скрипты</p>  
   

Присоединяйся к нам и в качестве бонуса получишь ровно ничего</p>  
  </div>  
  </div>  

  <div id="c2">  
  <a href="#c2" title="Вторая вкладка">Вторая</a>  
  <div class="tab-content">  
  <h3>Чувак, это вторая вкладка</h3>  
   

Прикинь, на apo-ucoz самые лучшие проверенные скрипты</p>  
   

Присоединяйся к нам и в качестве бонуса получишь ровно ничего</p>  
  </div>  
  </div>  

  <div id="c3">  
  <a href="#c3" title="Третья вкладка">Третья</a>  
  <div class="tab-content">  
  <h3>Чувак, это третья вкладка</h3>  
   

Прикинь, на apo-ucoz самые лучшие проверенные скрипты</p>  
   

Присоединяйся к нам и в качестве бонуса получишь ровно ничего</p>  
  </div>  
  </div>  

  <div id="c4">  
  <a href="#c4" title="Четвёртая вкладка">Четвёртая</a>  
  <div class="tab-content">  
  <h3>Чувак, это четвёртая вкладка</h3>  
   

Прикинь, на apo-ucoz самые лучшие проверенные скрипты</p>  
   

Присоединяйся к нам и в качестве бонуса получишь ровно ничего</p>  
  </div>  
  </div>  

  </div>  
  </div>  

  <div style="clear:both;"></div>

Материал подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: для, сайта, Оригинальные, CSS3, Вашего, на, ucoz, вкладки
Просмотров: 301 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: