---

Responsive Tabs — отзывчивые вкладки с иконками на чистом CSS
Пример можно посмотреть на megafilms.cc (В любой статье)

Пример 2
- Создайте в корне: test.html
- Скопируйте код и сохраните
- Наслаждайтесь видом

Изменить иконки можно через css
С помощью uni (awesome)

<style>



@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');



@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');







*, *:before, *:after {



  margin: 0;



  padding: 0;



  box-sizing: border-box;



}







p {



  margin: 0 0 20px;



  line-height: 1.5;



}







section {



  display: none;



  padding: 20px 0 0;



  border-top: 1px solid #ddd;



}







input {



  display: none;



}







label {



  display: inline-block;



  margin: 0 0 -1px;



  padding: 15px 25px;



  font-weight: 600;



  text-align: center;



  color: #bbb;



  border: 1px solid transparent;



}







label:before {



  font-family: fontawesome;



  font-weight: normal;



  margin-right: 10px;



}







label[for*='1']:before { content: 'f1cb'; }



label[for*='2']:before { content: 'f17d'; }



label[for*='3']:before { content: 'f16b'; }



label[for*='4']:before { content: 'f1a9'; }







label:hover {



  color: #888;



  cursor: pointer;



}







input:checked + label {



  color: #555;



  border: 1px solid #ddd;



  border-top: 2px solid orange;



  border-bottom: 1px solid #fff;



}







#tab1:checked ~ #content1,



#tab2:checked ~ #content2,



#tab3:checked ~ #content3,



#tab4:checked ~ #content4 {



  display: block;



}







@media screen and (max-width: 650px) {



  label {



    font-size: 0;



  }



  label:before {



    margin: 0;



    font-size: 18px;



  }



}







@media screen and (max-width: 400px) {



  label {



    padding: 15px;



  }



}



<style>







 <input id="tab1" type="radio" name="tabs" checked>



  <label for="tab1">Вкладка Codepen</label>



    



  <input id="tab2" type="radio" name="tabs">



  <label for="tab2">Вкладка Dribbble</label>



    



  <input id="tab3" type="radio" name="tabs">



  <label for="tab3">Вкладка Dropbox</label>



    



  <input id="tab4" type="radio" name="tabs">



  <label for="tab4">Вкладка Drupal</label>



    



  <section id="content1">



    <p>Тест 1</p>



  </section>



    



<section id="content2">



    <p>Тест 2</p>



</section>



    



  <section id="content3">



    <p>Тест 3</p>



  </section>



    



  <section id="content4">



    <p>Тест 4</p>



  </section>

Автор статьи: Klubv (29.04.18 / 00:03)

---

Рейтинг: 0

Просмотров: 409
Комментарии (0) »