Адаптивные вкладки-табы на CSS3

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&amp;subset=latin,cyrillic"></script>
<div class="container">
  <h1>
    Адаптивные вкладки-табы на CSS3
  </h1>
  <div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Wordpress">Wordpress</label>
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Windows">Windows</label>
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="HTML5">HTML5</label>
    <input id="tab4" type="radio" name="tabs">
    <label for="tab4" title="CSS3">CSS3</label>
    <section id="content-tab1">
      <p> WordPress — система управления содержимым сайта с открытым исходным кодом, распространяемая под GNU GPL. Написана на PHP, в качестве базы данных использует MySQL. </p>
      <p> Сфера применения — от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты. WordPress выпущен под лицензией GPL
        версии 2. </p>
    </section>
    <section id="content-tab2">
      <p> Microsoft Windows (произносится [майкрософт ви́ндоус]) — семейство проприетарных операционных систем корпорации Microsoft, ориентированных на применение графического интерфейса при управлении. </p>
      <p> Изначально Windows была всего лишь графической надстройкой для MS-DOS. По состоянию на март 2013 года под управлением операционных систем семейства Windows по данным ресурса NetMarketShare (Net Applications) работает около 90 % персональных компьютеров[1].
        Операционные системы Windows работают на платформах x86, x86-64, IA-64, ARM. </p>
    </section>
    <section id="content-tab3">
      <p> HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной...

CSS

/* Базовые стили демо-страницы */

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font: 14px/1 "Open Sans", sans-serif;
  color: #555;
  background: #fafafa;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 25px 10px 0;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}
 h2 {
  padding: 30px 0;
  font-weight: 400;
  text-align: center;
}

.info {
  color: rgba(78, 78, 78, 0.8);
  width: 100%;
  margin: 40px auto;
  text-align: center;
  font-weight: 300;
}

.info a {
  color: #bbb;
  text-decoration: none;
}

.info a:hover {
  color: #888;
}

/* Конец стилей демо-страницы */

/* Базовый контейнер табов */

.tabs {
  min-width: 320px;
  max-width: 800px;
  padding: 0px;
  margin: 0 auto;
}

/* Стили секций с содержанием */

.tabs > section {
  display: none;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
}

.tabs > section > p {
  margin: 0 0 5px;
  line-height: 1.5;
  color: #383838;
  /* прикрутим анимацию */
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* Описываем анимацию свойства opacity */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Прячем чекбоксы */

.tabs > input {
  display: none;
  position: absolute;
}

/* Стили переключателей вкладок (табов) */

.tabs > label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #aaa;
  border: 0px solid #ddd;
  border-width: 1px 1px 1px 1px;
  background: #f1f1f1;
  border-radius: 3px 3px 0 0;
}

/* Шрифт-иконки от Font Awesome в формате Unicode */

.tabs > label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

.tabs >...