Skip to content

Instantly share code, notes, and snippets.

@tyv

tyv/dabblet.css

Forked from eakorolev/dabblet.css
Created July 19, 2012 11:07
Show Gist options
  • Save tyv/3143088 to your computer and use it in GitHub Desktop.
Save tyv/3143088 to your computer and use it in GitHub Desktop.
Download ZIP
переключение
Raw
dabblet.css
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic);
.card
{
background: #f1ecd0;
font-family: 'PT Sans', sans-serif;
position: relative;
padding: 60px;
width: 580px;
height: 200px;
}
.card:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
.card .close
{
font-size: 40px;
position: absolute;
line-height: 0.5em;
color: #70693f;
text-shadow: 0 0 2px #70693f;
top: 5px;
right: 5px;
cursor: pointer;
}
.card input[type=radio]
{
display: none;
}
.card .photo-chooser
{
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 150px;
overflow: hidden;
background-color: #474747;
border-radius: 8px;
box-shadow: 0 5px 35px rgba(0,0,0,0.5);
}
.card .photo-chooser .animation-runner
{
position: absolute;
top: 140px;
bottom: 0;
left: 0;
right: 0;
background-color: #6c6c6c;
border-radius: 0 0 8px 8px;
}
.card .photo-chooser .labels
{
position: absolute;
top: 104px;
width: 1000px;
}
.card .photo-chooser .labels label
{
margin: 3px;
}
.card .photo-chooser .labels label img
{
border-radius: 6px;
}
.card .photo-chooser .photos
{
position: absolute;
top: 0;
width: 1000px;
transition: left 0.1s linear;
}
.card .photo-chooser .photos div
{
float: left;
}
.card .photo-chooser .photos img
{
border-radius: 8px 8px 0 0;
}
.card .texts
{
margin-left: 120px;
font-size: 14px;
}
.card .texts div
{
position: absolute;
margin-right: 60px;
opacity: 0;
transition: opacity 0.1s linear;
}
.card .texts h1
{
margin: 0 0 20px 0;
font-size: 22px;
}
.card .texts h1:first-letter
{
color: red;
}
/* переключение */
#photo-1:checked ~ .texts .text-1,
#photo-2:checked ~ .texts .text-2,
#photo-3:checked ~ .texts .text-3,
#photo-4:checked ~ .texts .text-4,
#photo-5:checked ~ .texts .text-5,
#photo-6:checked ~ .texts .text-6
{
opacity: 1;
}
#photo-1:checked ~ .photo-chooser .labels label[for="photo-1"] img,
#photo-2:checked ~ .photo-chooser .labels label[for="photo-2"] img,
#photo-3:checked ~ .photo-chooser .labels label[for="photo-3"] img,
#photo-4:checked ~ .photo-chooser .labels label[for="photo-4"] img,
#photo-5:checked ~ .photo-chooser .labels label[for="photo-5"] img,
#photo-6:checked ~ .photo-chooser .labels label[for="photo-6"] img
{
box-shadow: 0 0 6px 1px rgba(255,255,255,0.5);
}
#photo-1:checked ~ .photo-chooser .photos { left: 0; }
#photo-2:checked ~ .photo-chooser .photos { left: -100px; }
#photo-3:checked ~ .photo-chooser .photos { left: -200px; }
#photo-4:checked ~ .photo-chooser .photos { left: -300px; }
#photo-5:checked ~ .photo-chooser .photos { left: -400px; }
#photo-6:checked ~ .photo-chooser .photos { left: -500px; }
/* анимация */
@keyframes labels {
from { left: 0; }
to { left: -136px; }
}
.labels
{
animation: 2s labels linear infinite alternate;
animation-play-state: paused;
}
.animation-runner:hover ~ .labels
{
animation-play-state: running;
}
Raw
dabblet.html
<div class="card">
<span class="close">×</span>
<input type="radio" id="photo-1" name="photo" checked>
<input type="radio" id="photo-2" name="photo">
<input type="radio" id="photo-3" name="photo">
<input type="radio" id="photo-4" name="photo">
<input type="radio" id="photo-5" name="photo">
<input type="radio" id="photo-6" name="photo">
<div class="photo-chooser">
<div class="animation-runner"></div>
<div class="labels">
<label for="photo-1">
<img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@">
</label
><label for="photo-2">
<img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@">
</label
><label for="photo-3">
<img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@">
</label
><label for="photo-4">
<img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@">
</label
><label for="photo-5">
<img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@">
</label
><label for="photo-6">
<img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@">
</label>
</div>
<div class="photos">
<div class="photo-1">
<img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/100/square.jpg" alt="tyv@">
</div
><div class="photo-2">
<img src="http://center.yandex-team.ru/api/v1/user/nop/photo/100/square.jpg" alt="nop@">
</div
><div class="photo-3">
<img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/100/square.jpg" alt="shirokoff@">
</div
><div class="photo-4">
<img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/100/square.jpg" alt="aandrosov@">
</div
><div class="photo-5">
<img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/100/square.jpg" alt="dfilatov@">
</div
><div class="photo-6">
<img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/100/square.jpg" alt="panyakor@">
</div>
</div>
</div>
<div class="texts">
<div class="text-1">
<h1>Юра Ткаченко</h1>
<p>
Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.
</p>
<p>
Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.
</p>
</div>
<div class="text-2">
<h1>Сергей Никитин</h1>
<p>
Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
</p>
<p>
Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
</p>
</div>
<div class="text-3">
<h1>Иван Широков</h1>
<p>
Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
</p>
<p>
Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
</p>
</div>
<div class="text-4">
<h1>Алексей Андросов</h1>
<p>
Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
</p>
<p>
Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
</p>
</div>
<div class="text-5">
<h1>Дмитрий Филатов</h1>
<p>
Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
</p>
<p>
Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
</p>
</div>
<div class="text-6">
<h1>Михаил Корепанов</h1>
<p>
Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
</p>
<p>
Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
</p>
</div>
</div>
</div>
Raw
settings.json
{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment