» »

Темные вкладки (табы) на чистом CSS3

Темные вкладки (табы) на чистом CSS3

Простые и в тоже время стильные вкладки, также называемые табы, где при клике сменяется блоки с различным контентом и оттенком цвета. Здесь все сделано на чистых стилях, так как известно, что основном они идут на javascript, то в нашем материале, все построено на CSS3. И работает без сбоев и не будет грузить как страницу, так и сам портал

Вы изначально можете задать ширину и поставить ссылки в описание, так как здесь все очень просто. И плюсы основном, как мало место занимает, но информации вкладки могут держать большое количество. Только нужно переключать кнопки, где изначально на них сожно задать тему, чтоб пользователь или гость сайта видел, какую вкладку ему открыть.

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

HTML

Код
<ul class="sarentamka">
   
  <li class="kavlona">
  <input type="radio" name="tabs" checked="checked" id="tab1" />
  <label for="tab1">Один</label>
  <div id="tab-content1" class="content">
  <h1>Kosten</h1>
  <hr/>
  <h3>ZorNet: Создание сайта на uCoz</h3>
  <br/>
  <img src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png" width="100" style="float: left; margin-right: 10px;"/>
  <p>Предыдущие главные названия Call of Duty всегда включали историю. Раньше это был дифференцирующий фактор между серии Battlefield и CoD, и, хотя качество сюжетных линий и персонажей неизбежно менялось, Infinity War и обычно делали разумную работу по упаковке по крайней мере нескольких выдающихся миссий в каждой игре.</p>  
  </div>
  </li>
   
  <li class="kavlona">
  <input type="radio" name="tabs" id="tab2" />
  <label for="tab2">Два</label>  
  <div id="tab-content2" class="content">
  <h1>Tabnt 2</h1>
  <hr/>
  <h3>Разработке дизайн и продвижение проектов</h3>
  <br/>
  <p>Предыдущие главные названия Call of Duty всегда включали историю. Раньше это был дифференцирующий фактор между серии Battlefield и CoD, и, хотя качество сюжетных линий и персонажей неизбежно менялось, Infinity War и обычно делали разумную работу по упаковке по крайней мере нескольких выдающихся миссий в каждой игре.</p>  
  </div>
  </li>

  <li class="kavlona">
  <input type="radio" name="tabs" id="tab3" />
  <label for="tab3">Три</label>  
  <div id="tab-content3" class="content">
  <h1>Tatent 3</h1>
  <hr/>
  <h3>Здесь найдете интересные решения</h3>
  <br/>
  <p>Здесь описание под вторую вкладку</p>  
  </div>
  </li>

  <li class="kavlona">
  <input type="radio" name="tabs" id="tab4" />
  <label for="tab4">Четыре</label>  
  <div id="tab-content4" class="content">
  <h1>Tabtent 4</h1>
  <hr/>
  <h3>Закладки пользователя для сайта uCoz</h3>
  <br/>
  <p>Это следующее описание.</p>  
  </div>
  </li>
   
  </ul>

CSS

Код
* {
  margin: 0;
  padding: 0;
}

h1, h3{
  text-transform: uppercase;
  font-weight: normal;
}

.sarentamka{
  width: 600px;
  display: block;
  margin: 40px auto;
  position: relative;
}

.sarentamka .kavlona{
  float: left;
  display: block;
}

.sarentamka .kavlona>input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.sarentamka .kavlona>label {
  display: block;
  padding: 6px 21px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  color: #fdfafa;
  background: #1c7abf;
}

.sarentamka .content {
  z-index: 0;/* or display: none; */
  overflow: hidden;
  width: 600px;
  padding: 25px;
  position: absolute;
  top: 27px;
  left: 0;
  background: #272525;
  color: #ece6e6;
   
  opacity:0;
  transition: opacity 400ms ease-out;
}

.sarentamka>.kavlona>[id^="tab"]:checked + label {
  top: 0;
  background: #303030;
  color: #F5F5F5;
}

.sarentamka>.kavlona>[id^="tab"]:checked ~ [id^="tab-content"] {
  z-index: 1;/* or display: block; */
   
  opacity: 1;
  transition: opacity 400ms ease-out;
}

Демонстрация
20.04.2018 Просмотров: 190 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar