Untitled

dabblet.css

        @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/oOt0DNfso2UXZt7DYCiN2gLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
        }


        .card
        {
            font: 13px 'PT Sans', Helvetica, sans-serif;

            display: inline-block;

            position: relative;

            padding: 60px 120px 60px 60px;

            background: #f1ebd1;
        }

        .card:after
        {
            clear: both;

            display: table;

            content: "";
        }

        .card:before
        {
            position: absolute;
            bottom: 20px;
            right: 10px;
            left: auto;
            top: 80%;
            z-index: -1;

            width: 50%;
            max-width: 300px;

            background: #777;

            box-shadow: 0 15px 15px #777;
            transform: rotate(3deg);

            content: "";
        }

        .card input
        {
            position: fixed;
            left: -5em;
        }

        .close
        {
            font: 24px/24px Helvetica, sans-serif;

            position: absolute;
            right: 10px;
            top: 5px;

            cursor: pointer;

            color: #706842;

            text-shadow: 0 -1px 0 #000;
        }

        .photo-chooser
        {

            float: left;
            position: relative;
            overflow: hidden;

            width: 100px;
            height: 152px;

            background: #484848;
            border-radius: 8px;
               -moz-border-radius: 8px;
                    border-radius: 8px;

            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
               -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.4);
                 -o-box-shadow: 0 5px 15px rgba(0,0,0,0.4);
                    box-shadow: 0 5px 15px rgba(0,0,0,0.4);

            white-space: nowrap;
        }

        .photo-chooser label
        {
            position: relative;

            display: inline-block;
            margin-top: 105px;
            margin-right: 10px;

            cursor: pointer;

            border-radius: 4px;
               -moz-border-radius: 4px;
                    border-radius: 4px;

        }

        .photo-chooser label img
        {
            border-radius: 4px;
               -moz-border-radius: 4px;
                    border-radius: 4px;
        }

        @keyframes spin {
            from { margin-left: 10px; }
            to { margin-left: -140px; }
        }

        .photo-chooser label:first-child
        {
            margin-left: 10px;
        }

        .photos
        {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;

            width: 100px;
            height: 100px;
        }

        .photos div[class|="photo"]
        {
            display: inline-block;
            -wekit-transform: translateZ(0);

            transition: margin-left 0.2s ease-in;
        }

        .animation-runner
        {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 10px;
            border-radius: 0 0 8px 8px;
               -moz-border-radius: 0 0 8px 8px;
                    aborder-radius: 0 0 8px 8px;

            cursor: pointer;
            background: rgba(255,255,255,0.2);
        }

        .animation-runner:hover
        {
            background: rgba(255,255,255,0.5);
        }

        .animation-runner + label
        {
            -wekit-transform: translateZ(0);

            animation: 3s spin linear alternate infinite;
            animation-play-state: paused;
        }

        .animation-runner:hover + label
        {
            animation-play-state: running;
        }

        .texts
        {
            overflow: hidden;

            min-width: 400px;
            min-height: 200px;
            padding-left: 20px;
        }

        .texts h1
        {
            font-weight: normal;
            font-size: 24px;

            margin-top: 0;
        }

        .texts h1:first-letter
        {
            color: red;
        }

        .texts div[class|="text"]
        {
            position: absolute;
            visibility: hidden;
            opacity: 0;

            padding-right: 120px;

            transition: opacity 0.4s ease-in;
        }


        input[id="photo-1"]:checked ~ .texts .text-1,
        input[id="photo-2"]:checked ~ .texts .text-2,
        input[id="photo-3"]:checked ~ .texts .text-3,
        input[id="photo-4"]:checked ~ .texts .text-4,
        input[id="photo-5"]:checked ~ .texts .text-5,
        input[id="photo-6"]:checked ~ .texts .text-6
        {
            visibility: visible;
            opacity: 1;
        }

        input[id="photo-1"]:checked ~ .photo-chooser label[for="photo-1"],
        input[id="photo-2"]:checked ~ .photo-chooser label[for="photo-2"],
        input[id="photo-3"]:checked ~ .photo-chooser label[for="photo-3"],
        input[id="photo-4"]:checked ~ .photo-chooser label[for="photo-4"],
        input[id="photo-5"]:checked ~ .photo-chooser label[for="photo-5"],
        input[id="photo-6"]:checked ~ .photo-chooser label[for="photo-6"]
        {
            box-shadow: 0 0 5px rgba(255,255,255,0.75);
        }

        input[id="photo-2"]:checked ~ .photo-chooser .photos .photo-1
        {
            margin-left: -100px;
        }

        input[id="photo-3"]:checked ~ .photo-chooser .photos .photo-1
        {
            margin-left: -200px;
        }

        input[id="photo-4"]:checked ~ .photo-chooser .photos .photo-1
        {
            margin-left: -300px;
        }

        input[id="photo-5"]:checked ~ .photo-chooser .photos .photo-1
        {
            margin-left: -400px;
        }

        input[id="photo-6"]:checked ~ .photo-chooser .photos .photo-1
        {
            margin-left: -500px;
        }

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>

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}