| Kosten | Вторник, 16 Октября 2018, 01:03 | Сообщение 1 |
| Просто великолепные вкладки, которые выполнены в серых тонах, где вперемешку со светлым, и получился дизайн, что похоже на формат в 3D, что не сказать он полностью под него сделан. Так как тени и сами переливы поставлены по стилистике грамотно, где чисто кнопки смотрятся оригинально. Сами табы анимированные, где полностью созданы на CSS3, хотя и нужно подключить jquery, что полностью отвечает за функций вывода.
Сам показ идет оригинально, это не просто стандартная смена, а с анимацией, что изначально подача заметна. Предназначены вкладки для многих функций, это заранее информации, также можно на нем разместить несколько плееров. При открытие по умолчанию открывается первая вкладка, там может как описание со ссылками прописано, так изображение поставлено.
Как понимаете, где троеточие, там будет ваше описание.
Первым делом нужно подключить:
Код <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
HTML
Код <ul id="discovebusines"> <li><a href="#" title="balucidang1">Первая</a></li> <li><a href="#" title="balucidang2">Вторая</a></li> <li><a href="#" title="balucidang3">Видео</a></li> <li><a href="#" title="balucidang4">Вкладка</a></li> <li><a href="#" title="balucidang5">Пятая</a></li> </ul> <div id="content"> <div id="balucidang1">...</div> <div id="balucidang2">...</div> <div id="balucidang3">...</div> <div id="balucidang4">...</div> <div id="balucidang5">...</div> </div>
CSS
Код #discovebusines{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#discovebusines li{
float: left;
margin: 0 .5em 0 0;
}
#discovebusines a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 1.5em;
float: left;
text-decoration: none;
color: #25b7bf;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
font-size: 18px;
font-weight: 700;
}
#discovebusines a:hover,
#discovebusines a:hover::after,
#discovebusines a:focus,
#discovebusines a:focus::after{
background: #fff;
}
#discovebusines a:focus{
outline: 0;
}
#discovebusines a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#discovebusines #current a,
#discovebusines #current a::after{
background: #fff;
z-index: 3;
}
#content
{
background: #fff;
padding: 2em;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
margin: 0 0 15px 0;
}
#about
{
color: #999;
}
#about a
{
color: #eee;
}
JS
Код $(document).ready(function() {
$("#content div").hide(); // Скрываем содержание
$("#discovebusines li:first").attr("id","current"); // Активируем первую закладку
$("#content div:first").fadeIn(); // Выводим содержание
$('#discovebusines a').click(function(e) {
e.preventDefault();
$("#content div").hide(); //Скрыть все содержание
$("#discovebusines li").attr("id",""); //Сброс ID
$(this).parent().attr("id","current"); // Активируем закладку
$('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
});
});
Также есть тема. чтоб их редактировать по цветовой гамме, все делается в CSS, что закреплены за вкладками.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 21 Октября 2018, 20:36 | Сообщение 2 |
|
| Чистые вкладки CSS без Javascript
Эти вкладки выполнены на чистой стилистике CSS, где присутствует темный оттенок цвета с синей гаммой. Ранее можно было заметить, что использовали JavaScript, теперь заменяются чистыми решениями CSS
HTML
Код <ul class="tabs"> <li class="tab"> <input type="radio" name="tabs" checked="checked" id="tab1" /> <label for="tab1">One</label> <div id="tab-content1" class="content"> <h1>Tab content 1</h1> <hr/> <h3>Aliquam tristique orci non facilisis lobortis</h3> <br/> <img src="Ссылка" width="100" style="float: left; margin-right: 10px;"/> <p>Описание</p> </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">Two</label> <div id="tab-content2" class="content"> <h1>Tab content 2</h1> <hr/> <h3>Ut bibendum augue vel magna rhoncus</h3> <br/> <p>Описание - 2</p> </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab3" /> <label for="tab3">Three</label> <div id="tab-content3" class="content"> <h1>Tab content 3</h1> <hr/> <h3>Praesent ac accumsan urna. Mauris lorem purus</h3> <br/> <p>Описание - 3</p> </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab4" /> <label for="tab4">Four</label> <div id="tab-content4" class="content"> <h1>Tab content 4</h1> <hr/> <h3>Class aptent taciti sociosqu ad litora torquen</h3> <br/> <p>Описание- 4</p> </div> </li> </ul>
CSS
Код .tabs{
width: 600px;
display: block;
margin: 40px auto;
position: relative;
}
.tabs .tab{
float: left;
display: block;
}
.tabs .tab>input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs .tab>label {
display: block;
padding: 6px 21px;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
position: relative;
color: #FFF;
background: #4A83FD;
}
.tabs .content {
z-index: 0;/* or display: none; */
overflow: hidden;
width: 600px;
padding: 25px;
position: absolute;
top: 27px;
left: 0;
background: #303030;
color: #DFDFDF;
opacity:0;
transition: opacity 400ms ease-out;
}
.tabs>.tab>[id^="tab"]:checked + label {
top: 0;
background: #303030;
color: #F5F5F5;
}
.tabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {
z-index: 1;/* or display: block; */
opacity: 1;
transition: opacity 400ms ease-out;
}
Демонстрация
| | Страна: (RU) |
| |
