Домашка

dabblet.css

/* Домашка */
body 
{
    margin: 0;
    padding: 0;
    font-family: PT Sans;
    font-size: 14px;
}

.card 
{
    background: #f1ecd0;                
    margin: 20px 0 0 20px;
    
    /*непонятно зачем*/
    box-shadow: inset 0 0 2px #f1ebc9;
    padding: 60px;
    position: relative;

    /*ты так ограничиваешь размеры, 
    а можно сделать так чтобы контент задавал размеры*/
    width: 580px;
    height: 222px;
}

.close 
{
    font-size: 22px;
    font-family: Verdana,sans-serif;
    font-weight: bold;
    position: absolute;
    top: 4px;

    /*хитрый момент, из-за того что знак
    меньше высоты шрифта, надеюсь разобралась в этом*/
    right: 10px;
}

.card input[type="radio"]
{
 position: fixed;
 left: -200px;
}           
       
.texts
{
    display: inline-block;
/* опять гораничение, старайся в повседневной верстки избегать этого
если не получается, луше пробовать через min-width решить задачу */
    width: 430px;
/* если 1 значние 
лучше padding-left: 15px -- более понятный код получается*/
    padding: 0 0 0 15px;
}

.photo-chooser
{
	/*между ним и texts есть ненужный пробел*/
    display: inline-block;
    vertical-align: top;
    width: 100px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.15);
}

.photos-preview 
{
    height: 30px;
    padding: 5px 0 6px;
    background: #474747;
    margin-top: -5px;
}

.photos-preview div
{
 /* пока все не прогрузятся не будет отрисовки. почему выбрала table-cel?*/
    padding: 0 4px;
    display: table-cell;
}

.photos-preview label
{
    display: block;
    cursor: pointer;
}

.photos-preview img
{
    border-radius: 3px;
}

 .photos
{
    -webkit-transition: margin 0.15s ease-in;
    -moz-transition: margin 0.15s ease-in;
    -o-transition: margin 0.15s ease-in;
    transition: margin 0.15s ease-in;    
}

 .photos div
{
	/*тот же вопрос*/
    display: table-cell;
}

#photo-1:checked ~ .photo-chooser .photos
{
    margin-left:0;
}
#photo-1:checked ~ .photo-chooser label[for="photo-1"] img
{   
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
#photo-1:checked ~ .texts .text-1
{
    display: block;                
}

#photo-2:checked ~ .photo-chooser .photos 
{
    margin-left: -100px;
}
#photo-2:checked ~ .photo-chooser label[for="photo-2"] img
{   
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
#photo-2:checked ~ .texts .text-2
{
    display: block;                
}

#photo-3:checked ~ .photo-chooser .photos
{
    margin-left: -200px;
}
#photo-3:checked ~ .photo-chooser label[for="photo-3"] img
{   
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
#photo-3:checked ~ .texts .text-3
{
    display: block;                
}

#photo-4:checked ~ .photo-chooser .photos
{
    margin-left: -300px;
}
#photo-4:checked ~ .photo-chooser label[for="photo-4"] img
{   
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
#photo-4:checked ~ .texts .text-4
{
    display: block;                
}

#photo-5:checked ~ .photo-chooser .photos
{
    margin-left: -400px;
}
#photo-5:checked ~ .photo-chooser label[for="photo-5"] img
{   
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
#photo-5:checked ~ .texts .text-5
{
    display: block;                
}

#photo-6:checked ~ .photo-chooser .photos
{
    margin-left: -500px;
}
#photo-6:checked ~ .photo-chooser label[for="photo-6"] img
{   
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
#photo-6:checked ~ .texts .text-6
{
    display: block;                
}

/* сколько раз повторяется установка тени и display: block?
нужно объединить селекторы*/

.texts h1
{
	/* почему inline-block? */
    display: inline-block;
    font-size: 24px;
	/*пиши normal -- понятнее*/
    font-weight: 500;
    line-height: 2px;
}

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

.texts div 
{
	/* у меня они fade-in/out*/
    display: none;
}

.animation-runner
{
    height: 9px;
    background: #6c6c6c;
    cursor: pointer;                
}

.animation-runner:hover
{
    background: #9f9fa0;
}

/*я бы расположил возле .card, очень далеко получается по коду*/
.card::after
{
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -o-transform: rotate(3deg);    
    transform: rotate(3deg);
    bottom: 16px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
    content: "";
    height: 20px;
    max-width: 300px;
    position: absolute;
    right: 10px;
    width: 50%;
    z-index: -1;
}

@-webkit-keyframes slider
{
	0% { margin-left: 0 }
 	100% { margin-left: -128px; }
}

@keyframes slider
{
    	0% { margin-left: 0 }
	100% { margin-left: -128px; }
}

@-o-keyframes slider
{
    	0% { margin-left: 0 }
	100% { margin-left: -128px; }
}

.photo-chooser:hover .photos-preview
{
	animation: 4s slider infinite linear;
	-webkit-animation: 4s slider infinite linear;
	-o-animation: 4s slider infinite linear;	
    	animation-direction: alternate;
    	-webkit-animation-direction: alternate;
    	-o-animation-direction: alternate;
}

.photos-preview:hover,
.card:hover
{
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-o-animation-play-state: paused;	
}

/* а как же moz? и еще важный момент, 
стиль без префикса должен идти в конце списка
потому что он будет выигрывать таким образом в цепочке переопределений*/

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="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 class="photos-preview">
                <div>
                    <label for="photo-1">
                        <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@">
                    </label>
                </div>
                <div>
                    <label for="photo-2">
                        <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@">
                    </label>
                </div>
                <div>
                    <label for="photo-3">
                        <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@">
                    </label>
                </div>
                <div>
                    <label for="photo-4">
                        <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@">
                    </label>
                </div>
                <div>
                    <label for="photo-5">
                        <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@">
                    </label>
                </div>
                <div>
                    <label for="photo-6">
                        <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@">
                    </label>
                </div>
            </div>
            
            <div class="animation-runner"></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":"100","seethrough":"","prefixfree":"1","page":"all"}