ку
Правда о попугае Кеше, Арчике и Андрее.
Сообщений 11 страница 17 из 17
Поделиться122014-06-14 01:09 pm
<b>hhv</b>
Поделиться132014-06-14 01:21 pm
<style>
.element1 {
vertical-align: middle;
width: 30em;
height: 10em;
display: inline-block;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
.element1 img {
transition: .5s;
-webkit-transition: .5s;
width: 10em;
height: 7em;
}
label[for="left1"],
label[for="left2"],
label[for="right1"],
label[for="right2"] {
font-weight: 600;
font-size: 3em;
cursor: pointer;
}
#right1:checked ~ label[for="right2"],
#right1:checked ~ #right2:checked ~ label[for="left2"] { display: inline; }
#left1,
#left2,
#right1,
#right2,
label[for="left2"],
label[for="right2"],
#right2:checked ~ label[for="left1"],
#right1:checked ~ label[for="right1"] { display: none; } /* убираем лишние элементы, в том числе чекбоксы и пару стрелок с обоих сторон (всего их четыре) */
label[for="left1"], #right2:checked ~ label[for="right2"] { visibility: hidden; } /* чтобы вся форма не сдвигалась в результате исчезновения стрелки, делаем первую и последнюю стрелочки прозрачными. opacity для этих целей не подходит, поскольку в случае его применения курсор не меняет свой внешний вид и на пустом пространстве имеет форму руки */
#right1:checked ~ label[for="left1"] { visibility: visible; }
#right1:checked ~ .element1 img {transform: translateX(-10em); -webkit-transform: translateX(-10em);}
#right2:checked ~ .element1 img {transform: translateX(-20em); -webkit-transform: translateX(-20em);}
</style>
<center>
<input type="radio" id="left2" name="raz1"/><input type="radio" id="left1" name="raz"/><input type="radio" id="right1" name="raz"/><input type="radio" id="right2" name="raz1"/>
<label for="left2">〈</label> <label for="left1">〈</label>
<div class="element1">
<img src="http://s4.uploads.ru/odCNP.jpg" alt=""/>
<img src="http://s5.uploads.ru/HZwU1.jpg" alt=""/>
<img src="http://s5.uploads.ru/izYXj.jpg" alt=""/>
<img src="http://s5.uploads.ru/5MPNc.jpg" alt=""/>
<img src="http://s4.uploads.ru/zO9Hf.jpg" alt=""/>
</div>
<label for="right1">〉</label> <label for="right2">〉</label>
круто!!! и это BB-теги!
цитата тест
вавав
выавава
апап
Поделиться152014-06-14 05:28 pm
- Участник
- Зарегистрирован: 2014-06-14
- Сообщений: 10
asdasd <b>123</b>asdasd<br>
sdfsdf <b>asd</b> 123
Поделиться162014-07-08 08:21 pm