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

Материал из Tau Ceti Station Wiki
Перейти к навигации Перейти к поиску
(Содержимое страницы заменено на «Тестовая страница.»)
Строка 1: Строка 1:
Тестовая страница.
{{#css:
.demo {
  position: relative;
  padding-top: 50%;
}
.demo input { display: none; }
.demo label { transition: 3s; }
.demo img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute;
  left: 0;
  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">
<input type="radio" name="odin" id="vkl1"/>
<input type="radio" name="odin" id="vkl2"/>
<input type="radio" name="odin" id="vkl3"/>
<input type="radio" name="odin" id="vkl4"/>
<input type="radio" name="odin" id="vkl5" checked="checked"/>
 
<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>

Версия 17:44, 27 января 2017

<input type="radio" name="odin" id="vkl1"/> <input type="radio" name="odin" id="vkl2"/> <input type="radio" name="odin" id="vkl3"/> <input type="radio" name="odin" id="vkl4"/> <input type="radio" name="odin" id="vkl5" checked="checked"/>

<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>