Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 383 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |