Участник:Leshiy: различия между версиями

Материал из Tau Ceti Station Wiki
Перейти к навигации Перейти к поиску
 
Строка 1: Строка 1:
{{#css:
{{#css:
.demo {
.content {
  position: relative;
display: none;
  padding-top: 50%;
}
}
.demo input { display: none; }
 
.demo label { transition: 3s; }
.wrapper:active .content {
.demo img {
display: block;
  position: absolute;  
}
  left: 50%;
 
  top: 50%;
.content:hover {
  max-width: 100%;
display: block;
  max-height: 100%;
}
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
.wrapper {
position: relative;
}
 
.button {
background: yellow;
height: 20px;
width: 150px;
}
}
.demo label,
 
.demo #vkl1:checked ~ [for="vkl1"],
.content {
.demo #vkl2:checked ~ [for="vkl2"],
position: absolute;
.demo #vkl3:checked ~ [for="vkl3"],
padding-top: 20px;
.demo #vkl4:checked ~ [for="vkl4"],
}
.demo #vkl5:checked ~ [for="vkl5"] {
 
  position: absolute;  
.content li {
  left: 0;
background: red;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; opacity: 0;
}
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;}
}}
}}
<div class="demo">
<div class="wrapper">
<input type="radio" name="odin" id="vkl1"/>
<div class="content">
<input type="radio" name="odin" id="vkl2"/>
<li>Lorem ipsum dolor sit amet.</li>
<input type="radio" name="odin" id="vkl3"/>
<li>Consectetur adipiscing elit.</li>
<input type="radio" name="odin" id="vkl4"/>
</div>
<input type="radio" name="odin" id="vkl5" checked="checked"/>
<div class="button">Кнопка</div>
 
<label for="vkl1"><img src="http://1.bp.blogspot.com/-rMnW9I5lal0/Ue96vOUnXuI/AAAAAAAAD8M/YQd22BfQG90/s1600/obeziana.jpg"/></label>
<label for="vkl2"><img src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s00/Risunok.jpg"/></label>
<label for="vkl3"><img src="адрес_изо_3"/></label>
<label for="vkl4"><img src="адрес_изо_4"/></label>
<label for="vkl5"><img src="адрес_изо_5"/></label>
</div>
</div>

Текущая версия на 17:51, 27 января 2017

  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
    • Кнопка
    Источник — https://wiki.taucetistation.org/index.php?title=Участник:Leshiy&oldid=15109