Skip to content

Instantly share code, notes, and snippets.

@eelyafi

eelyafi/dabblet.css

Forked from tyv/dabblet.css
Created July 11, 2012 19:30
Show Gist options
  • Save eelyafi/3092631 to your computer and use it in GitHub Desktop.
Save eelyafi/3092631 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/PIPMHY90P7jtyjpXuZ2cLLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/7YGmE4Ls5b94ct65u07hVQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/0XxGQsSc1g4rdRdjJKZrNL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/lILlYDvubYemzYzN7GbLkKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
body
{
font: 16px 'PT Sans', sans-serif;
}
.card
{
width: 700px;
position: absolute;
top: 10%;
left: 20%;
background-color: #F2EFDF;
aheight: 250px;
}
.card:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:700px;
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);
}
input[type=radio]
{
position: absolute;
left: -9999px;
}
label img
{
border-radius: 5px;
display: block;
}
label[for=photo-1]
{
left: 5px;
}
label[for=photo-2]
{
left: 45px;
}
label[for=photo-3]
{
left: 85px;
}
label[for=photo-4]
{
left: 125px;
}
label[for=photo-5]
{
left: 165px;
}
label[for=photo-6]
{
left: 205px;
}
input#photo-1:checked ~ div.photo-chooser label[for=photo-1],
input#photo-2:checked ~ div.photo-chooser label[for=photo-2],
input#photo-3:checked ~ div.photo-chooser label[for=photo-3],
input#photo-4:checked ~ div.photo-chooser label[for=photo-4],
input#photo-5:checked ~ div.photo-chooser label[for=photo-5],
input#photo-6:checked ~ div.photo-chooser label[for=photo-6]
{
box-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
div.photo-chooser label
{
border-radius: 6px;
position: absolute;
bottom: 15px;
}
.photos img
{
border-radius: 6px 6px 0 0;
display: block;
}
.animation-runner
{
background-color: #6c6c6c;
bottom: 0;
height: 10px;
position: absolute;
width: 100%;
border-radius: 0 0 6px 6px;
}
.animation-runner:hover
{
background-color: #8D8D8D;
}
@-moz-keyframes scroller
{
/* from, to = 0%, 100% */
from
{
-moz-transform: translate(0%);
transform: translate(0%);
}
50%
{
-moz-transform: translate(-470%);
transform: translate(-470%);
}
to
{
-moz-transform: translate(0%);
transform: translate(0%);
}
}
@-webkit-keyframes scroller
{
from
{
-webkit-transform: translate(0%);
}
50%
{
-webkit-transform: translate(-470%);
}
to
{
-webkit-transform: translate(0%);
}
}
@-keyframes scroller,
{
from
{
transform: translate(0%);
}
50%
{
transform: translate(-470%);
}
to
{
transform: translate(0%);
}
}
.animation-runner ~ label
{
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-moz-animation: scroller 5s infinite;
-webkit-animation: scroller 5s infinite;
animation: scroller 5s infinite;
-moz-animation-timing-function:linear;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
div.animation-runner:hover ~ label
{
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.texts h1
{
font-size: 1.4em;
font-weight: normal;
margin-top: 0;
}
h1:first-letter
{
color: red;
}
.texts p
{
font-size: 0.8em;
}
.texts div
{
display: none;
width: 430px;
padding-top: 25px;
}
.texts
{
left: 170px;
position: relative;
margin-bottom: 3em;
}
.photo-chooser
{
border-radius: 6px;
left: 30px;
position: absolute;
top: 30px;
width: 100px;
height: 150px;
background-color: #474747;
overflow: hidden;
}
.photos
{
height: 100px;
position: relative;
-webkit-transition: left 0.1s linear;
-moz-transition: left 0.1s linear;
-ms-transition: left 0.1s linear;
-o-transition: left 0.1s linear;
transition: left 0.1s linear;
white-space: nowrap;
}
.photos div
{
display: inline-block;
}
input#photo-1:checked ~ div.photo-chooser div.photos
{
left: 0px;
}
input#photo-2:checked ~ div.photo-chooser div.photos
{
left: -100px;
}
input#photo-3:checked ~ div.photo-chooser div.photos
{
left: -200px;
}
input#photo-4:checked ~ div.photo-chooser div.photos
{
left: -300px;
}
input#photo-5:checked ~ div.photo-chooser div.photos
{
left: -400px;
}
input#photo-6:checked ~ div.photo-chooser div.photos
{
left: -500px;
}
input#photo-1:checked ~ div.texts div.text-1,
input#photo-2:checked ~ div.texts div.text-2,
input#photo-3:checked ~ div.texts div.text-3,
input#photo-4:checked ~ div.texts div.text-4,
input#photo-5:checked ~ div.texts div.text-5,
input#photo-6:checked ~ div.texts div.text-6
{
display: block;
}
.close
{
color: #706741;
font-size: 1.4em;
position: absolute;
right: 5px;
top: 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
}
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>
<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 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