Skip to content

Instantly share code, notes, and snippets.

@tyv

tyv/dabblet.css

Created July 11, 2012 09:08
Show Gist options
  • Save tyv/3089190 to your computer and use it in GitHub Desktop.
Save tyv/3089190 to your computer and use it in GitHub Desktop.
Download ZIP
ШРИФТ PT Sans!!!
Raw
dabblet.css
/*
ШРИФТ PT Sans!!!
http://yadisk.cc/d/9SY7DG5rGVj
http://yadisk.cc/d/h-4Gy1GtGVd
*/
/* сбрасываем дефолтные отступы*/
body
{
margin: 0;
padding: 0;
}
/* подключаем шрифт PT Sans*/
@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/G0XvmuebhPCfCq4YdUpRgALUuEpTyoUstqEm5AMlJo4.ttf)
format('truetype');
}
/* применим этот шрифт к тексту */
.texts
{
font-family: 'PT Sans', sans-serif;
font-size: 0.8em;
}
/* расположим листок посередине */
.card
{
position: absolute;
/*не стоит завязываться напрасно на высоту, теперь
ты не вставишь сюда большой текст*/
width: 700px;
height:300px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left:0;
background-image: linear-gradient(bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.4) 100%);
background-color: #f2e8c9;
}
/* тень листка */
.card:before
{
position: absolute;
content: "";
height: 20px;
right: 20px;
bottom: 10px;
left: 60%;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
/* сделаем крестик в правом верхнем углу */
.close
{
float: right;
margin: 10px;
font: bold 1.5em/0.5 sans-serif;
text-shadow: 1px 1px 0 rgba(255,255,255,0.9);
color: grey;
cursor: pointer;
}
/* скроем радио-кнопки */
.card input[type="radio"]
{
position: fixed;
left: -200px;
}
/* расположим контейнер с фотографиями*/
.photo-chooser
{
position: relative;
float: left;
overflow: hidden;
background: gray;
width: 100px;
height: 150px;
margin: 50px 40px 20px 60px;
/* вопрос1: почему скругление не сработало в safari ?? */
/* http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* маленькие фотографии должны быть расположены между большой и серой полоской снизу */
.photo-chooser label
{
position: absolute;
display: block;
bottom: 30px;
top: 100px;
}
/* расположим все мальнькие фотографии друг за другов в ряд */
/*очень неоптимально, достаточно было им всем написать
display: inline-block
там даже намек в реьд есть в виде перенесенных закрывающих
скобок*/
.photo-chooser label[for="photo-1"]
{
left: 0px;
}
.photo-chooser label[for="photo-2"]
{
left: 40px;
}
.photo-chooser label[for="photo-3"]
{
left: 80px;
}
.photo-chooser label[for="photo-4"]
{
left: 120px;
}
.photo-chooser label[for="photo-5"]
{
left: 160px;
}
.photo-chooser label[for="photo-6"]
{
left: 200px;
}
/* сделаем маленькие фотографии закругленными и зададим отступ*/
.photo-chooser label img
{
margin: 5px;
cursor: pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* серая полоска для прокрутки должна быть снизу */
.animation-runner
{
position: absolute;
width: 100px;
height: 10px;
bottom: 0;
background: #bbbbbb;
cursor: pointer;
/* продолжение вопроса1: так как скругление у .photo-chooser в Safari не сработало - делаем его у других элементов*/
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
/* планое движение больших фотографий влево-вправо при выборе */
.photos div
{
position: absolute;
-webkit-transition: left 0.8s linear;
-moz-transition: left 0.8s linear;
transition: left 0.8s linear;
}
/* продолжение вопроса1: так как скругление у .photo-chooser в Safari не сработало - делаем его у других элементов*/
.photos div img
{
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
/* подсветка маленьких фотографий при выборе */
#photo-1:checked ~ .photo-chooser label[for="photo-1"] img,
#photo-2:checked ~ .photo-chooser label[for="photo-2"] img,
#photo-3:checked ~ .photo-chooser label[for="photo-3"] img,
#photo-4:checked ~ .photo-chooser label[for="photo-4"] img,
#photo-5:checked ~ .photo-chooser label[for="photo-5"] img,
#photo-6:checked ~ .photo-chooser label[for="photo-6"] img
{
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}
/* движение больших фотографий друг за другом при выборе */
/* получилось очень сложно и добавление новой фотки будет требовать
больших дополнений, есои все поменять на margin-left то будет существенно проще
или попробовать смещать только left у родителя а не у каждой фотки */
.photos .photo-1,
#photo-1:checked ~ .photo-chooser .photos .photo-1,
#photo-2:checked ~ .photo-chooser .photos .photo-2,
#photo-3:checked ~ .photo-chooser .photos .photo-3,
#photo-4:checked ~ .photo-chooser .photos .photo-4,
#photo-5:checked ~ .photo-chooser .photos .photo-5,
#photo-6:checked ~ .photo-chooser .photos .photo-6
{
left: 0px;
}
.photos .photo-2,
#photo-1:checked ~ .photo-chooser .photos .photo-2,
#photo-2:checked ~ .photo-chooser .photos .photo-3,
#photo-3:checked ~ .photo-chooser .photos .photo-4,
#photo-4:checked ~ .photo-chooser .photos .photo-5,
#photo-5:checked ~ .photo-chooser .photos .photo-6
{
left: 100px;
}
.photos .photo-3,
#photo-1:checked ~ .photo-chooser .photos .photo-3,
#photo-2:checked ~ .photo-chooser .photos .photo-4,
#photo-3:checked ~ .photo-chooser .photos .photo-5,
#photo-4:checked ~ .photo-chooser .photos .photo-6
{
left: 200px;
}
.photos .photo-4,
#photo-1:checked ~ .photo-chooser .photos .photo-4,
#photo-2:checked ~ .photo-chooser .photos .photo-5,
#photo-3:checked ~ .photo-chooser .photos .photo-6
{
left: 300px;
}
.photos .photo-5,
#photo-1:checked ~ .photo-chooser .photos .photo-5,
#photo-2:checked ~ .photo-chooser .photos .photo-6
{
left: 400px;
}
.photos .photo-6,
#photo-1:checked ~ .photo-chooser .photos .photo-6
{
left: 500px;
}
#photo-2:checked ~ .photo-chooser .photos .photo-1,
#photo-3:checked ~ .photo-chooser .photos .photo-2,
#photo-4:checked ~ .photo-chooser .photos .photo-3,
#photo-5:checked ~ .photo-chooser .photos .photo-4,
#photo-6:checked ~ .photo-chooser .photos .photo-5
{
left: -100px;
}
#photo-3:checked ~ .photo-chooser .photos .photo-1,
#photo-4:checked ~ .photo-chooser .photos .photo-2,
#photo-5:checked ~ .photo-chooser .photos .photo-3,
#photo-6:checked ~ .photo-chooser .photos .photo-4
{
left: -200px;
}
#photo-4:checked ~ .photo-chooser .photos .photo-1,
#photo-5:checked ~ .photo-chooser .photos .photo-2,
#photo-6:checked ~ .photo-chooser .photos .photo-3
{
left: -300px;
}
#photo-5:checked ~ .photo-chooser .photos .photo-1,
#photo-6:checked ~ .photo-chooser .photos .photo-2
{
left: -400px;
}
#photo-6:checked ~ .photo-chooser .photos .photo-1
{
left: -500px;
}
/* позиционируем текст справа от блока с фоторафиями */
/* позийионируемый абсолютно или фиксировано элемент -- всегда становится блочным
так что display: inline-block; тут не нужен
блок вынимается из контекста и ему задается только top
left будет auto, поэтому в сафари текст перекрывает блок с листалкой
так как сам блок с листалкой тоже вынят из контекста через float
http://jing.yandex-team.ru/files/tyv/2012-07-11_1324.png
почему ff так не поступает -- не знаю
*/
.texts
{
position: absolute;
display: inline-block;
margin-right: 50px;
top: 20px;
opacity: 1;
}
/* анимация для текста */
/* тут не нужно использовать анимацию
достаточно обычного transition */
@keyframes animated-text {
from { opacity: 0; }
to { opacity: 1; }
}
/* показываем нужный текст при выборе фотографии */
/* думаю тут тебе бы помог селектор позволяющий выбрать атрибуты
по подстроке с дефисом, получилось бы сильно проще */
#photo-1:checked ~ .texts div:not(.text-1),
#photo-2:checked ~ .texts div:not(.text-2),
#photo-3:checked ~ .texts div:not(.text-3),
#photo-4:checked ~ .texts div:not(.text-4),
#photo-5:checked ~ .texts div:not(.text-5),
#photo-6:checked ~ .texts div:not(.text-6)
{
display: none;
}
#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
{
display: block;
-webkit-animation: 0.75s animated-text;
-moz-animation: 0.75s animated-text;
animation: 0.75s animated-text;
}
.texts h1:first-letter
{
color: red;
}
/* анимация для полоски прокрутки*/
@keyframes animated-runner
{
from { margin-left: 0 }
50% { margin-left: -140px; }
to { margin-left: 0; }
}
/* анимация сначла стоит на паузе*/
.photo-chooser label
{
-webkit-animation: 5s animated-runner infinite;
-moz-animation: 5s animated-runner infinite;
animation: 5s animated-runner infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
.animation-runner:active
{
background: #dddddd;
}
/* при клике на полосу прокрутки -
анимация запускается*/
/* вопрос2: не сработала анимация,
когда тот же самый html и css
запустила не на http://dabblet.com/ ,
а в отдельном примере -
html-файли и подключенный к нему css-файл */
/* покажи пример, у меня работает */
.animation-runner:active ~ label
{
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
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>
<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