• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Красивый дизайн вкладки для сайта на CSS3 (Делаем красивые табы (вкладки) с помощью CSS3)
Красивый дизайн вкладки для сайта на CSS3
Kosten
Дата: Вторник, 2018-10-16, 01:03 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


Просто великолепные вкладки, которые выполнены в серых тонах, где вперемешку со светлым, и получился дизайн, что похоже на формат в 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, что закреплены за вкладками.

Демонстрация
Прикрепления: 0903980.png(38.5 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2018-10-21, 20:36 | Сообщение 2
Администраторы
Сообщений:18498
Награды: 55


Чистые вкладки 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;
}

Демонстрация
Прикрепления: 9298545.png(38.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Красивый дизайн вкладки для сайта на CSS3 (Делаем красивые табы (вкладки) с помощью CSS3)
  • Страница 1 из 1
  • 1
Поиск: