Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание вкладок с использованием только CSS3

16 октября 2015 | Опубликовано в css | 1 Комментарий »

Так как CSS3 приобретает все больше популярности и все больше браузеров поддерживает его свойства, многие распространенные функции веб-сайтов, которые раньше создавались с помощью JavaScript, теперь заменяются решениями на чистом CSS. В этом уроке мы покажем, как создать анимированные вкладки, используя только CSS. 

Предупреждение: Цель этого урока — показать возможности CSS3. Это решение может быть или не быть полезным в реальной жизни.

 


Демонстрация работыСкачать исходный код

Создание вкладок с использованием только CSS3 

HTML:

<ul class="tabs">
        <li>
          <input type="radio" checked name="tabs" id="tab1">
          <label for="tab1">tab 1</label>
          <div id="tab-content1" class="tab-content animated fadeIn">
    ...
          </div>
        </li>
        <li>
          <input type="radio" name="tabs" id="tab2">
          <label for="tab2">tab 2</label>
          <div id="tab-content2" class="tab-content animated fadeIn">
            ...
          </div>
        </li>
        <li>
          <input type="radio" name="tabs" id="tab3">
          <label for="tab3">tab 3</label>
          <div id="tab-content3" class="tab-content animated fadeIn">
            ...
          </div>
        </li>
</ul>

 

CSS:

body, html {
          height: 100%;
          margin: 0;
          -webkit-font-smoothing: antialiased;
          font-weight: 100;
          background: #aadfeb;
          text-align: center;
          font-family: helvetica;
      }

      .tabs input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
      .tabs {
        width: 650px;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 75px auto;
      }
      .tabs li{
        float: left;
      }
      .tabs label {
          display: block;
          padding: 10px 20px;
          border-radius: 2px 2px 0 0;
          color: #08C;
          font-size: 24px;
          font-weight: normal;
          font-family: 'Lily Script One', helveti;
          background: rgba(255,255,255,0.2);
          cursor: pointer;
          position: relative;
          top: 3px;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
      }
      .tabs label:hover {
        background: rgba(255,255,255,0.5);
        top: 0;
      }

      [id^=tab]:checked + label {
        background: #08C;
        color: white;
        top: 0;
      }
      [id^=tab]:checked ~ [id^=tab-content] {
          display: block;
      }
      .tab-content{
        z-index: 2;
        display: none;
        text-align: left;
        width: 100%;
        font-size: 20px;
        line-height: 140%;
        padding-top: 10px;
        background: #08C;
        padding: 15px;
        color: white;
        position: absolute;
        top: 53px;
        left: 0;
        box-sizing: border-box;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
      }

Для начала, чтобы повторить функциональность JavaScript, нужно найти способ дать знать CSS, что пользователь нажал на кнопку. Если использовать JavaScript, можно просто добавить еще одно название класса при нажатии, но так как тут не будет использоваться  JavaScript, нужно найти обходной путь. Мы воспользовались скрытыми радиокнопками, связанными с тегом подписи с помощью атрибута rel. Подпись сработает как кнопка, и когда она нажимается, она включит атрибут отмеченности на связанной с ней радиокнопке. Теперь можно задавать стили с помощью селектора отмечено.

Из кода HTML видно, что радиокнопка, подпись и блок с содержимым находятся на одном уровне. Для этого есть причина. С помощью отличного родственного селектора CSS ~ можно  добиться того, чтобы один селектор включал другой селектор того же уровня даже не вкладывая их друг в друга. Это позволяет любой отмеченной радиокнопке запустить появление любого блока содержимого, таким образом повторяется поведение обычной вкладки, созданной с помощью JavaScript.

В примере также присутствует библиотека анимаций CSS, созданная Dan Eden, чтобы добавить эффекты анимации при появлении содержимого вкладок.

Демонстрация работыСкачать исходный код

Заключение 

Теперь Вы знаете, как создать красивые анимированные вкладки для веб-сайта, даже не касаясь JavaScript. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Pete R.

Перевод — Дежурка

Смотрите также:




Комментарии

Оставить ответ


два + 4 =

Вставить изображение