Испытание: CAT Academy [16/16]


#21

.bg {
height: 300px;
background:
url("/assets/course13/cat_fish_128.png") no-repeat 90px 145px,
url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 125px,
url("/assets/course13/cat_drunk_128.png") no-repeat 160px 125px ,
url("/assets/course13/cat_walk_128.png") no-repeat 80px 80px ,
url("/assets/course13/cat_academy.png") no-repeat 20px 20px,
url("/assets/course13/star.png") repeat-x 0 10px,
Url("/assets/course13/star.png") repeat-x 0 270px

}
наверное повтор) но у меня также вышло 100%


#22

Здравствуйте.

После выполнения этого задания и нажатия на кнопку «Проверить» зависает анимация на голубом статус-баре справа от кнопки, и ничего не происходит, сколько бы я ни ждал. Обновляю страницу - тратится попытка. Нажимаю на кнопку снова - статус-бар снова зависает.

CSS-код:

html, body {
    margin: 0; 
    padding: 0;
}

.block {
    width: 300px;
    height: 300px;
    background: #3498db;
}

.bg {
    height: 300px;
    background:
        url("/assets/course13/cat_fish_128.png") no-repeat 90px 150px,
        url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 130px,
        url("/assets/course13/cat_drunk_128.png") no-repeat 160px 130px,
        url("/assets/course13/cat_walk_128.png") no-repeat 80px 85px,
        url("/assets/course13/cat_academy.png") no-repeat 20px 25px,
        url("/assets/course13/star.png") repeat-x 0px 15px,
        url("/assets/course13/star.png") repeat-x 0px 275px;
}

Windows 10, Google Chrome.

Помогите, пожалуйста.


#23

Анимация не зависает. Просто это означает, что ваш код не дотягивает до зеленого статуса проверки. Посмотрите на вкладку “Различия”.


#24

Блин, точно! По горизонтали у меня всё ровно, а по вертикали все изображения были ниже на 5 пикселей!
Спасибо, исправил. Теперь 100%.
Буду внимательнее.


#25

Что вы знаете про callback hell, fireball style?
Подумал и решил задачу именно этим стилем. Мне показался он самый просто и наглядный.

 .block {
    width: 300px;
    height: 300px;
    background: #3498db;    
}

.star-top {
    background-image: url("/assets/course13/star.png");
    background-repeat: repeat-x;
    background-position: 0 10px;
}

.star-bottom {
    background-image: url("/assets/course13/star.png");
    background-repeat: repeat-x;
    background-position: 0 270px;
}

.academy {
    background-image: url("/assets/course13/cat_academy.png");
    background-repeat: no-repeat;
    background-position: 20px 20px;
}

.walk {
    background-image: url("/assets/course13/cat_walk_128.png");
    background-repeat: no-repeat;
    background-position: 80px 80px;
}

.bg {
    height: 300px;
}

.grumpy {
    background-image: url("/assets/course13/cat_grumpy_128.png");
    background-repeat: no-repeat;
    background-position: 15px 125px;      
}

.drunk {
    background-image: url("/assets/course13/cat_drunk_128.png");
    background-repeat: no-repeat;
    background-position: 160px 125px;  
}

.fish {
    background-image: url("/assets/course13/cat_fish_128.png");
    background-repeat: no-repeat;
    background-position: 90px 145px;   
}

#26

100% альтернативное прохождение :joy::joy:

.bg {
height: 300px;
background: url("/assets/course13/cat_fish_128.png") no-repeat 52.5% 84.5%,
url("/assets/course13/cat_grumpy_128.png") no-repeat 9% 72.5%,
url("/assets/course13/cat_drunk_128.png") no-repeat 93% 72.5%,
url("/assets/course13/cat_walk_128.png") no-repeat 46.5% 46.5%,
url("/assets/course13/cat_academy.png") no-repeat 40% 9%,
URL("/assets/course13/star.png") repeat-x 0 3.5%,
url("/assets/course13/star.png") repeat-x 0 96.5%;
}


#27

100%
.bg {
height: 300px;
background:
url("/assets/course13/cat_fish_128.png") no-repeat 90px 145px,
url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 125px,
url("/assets/course13/cat_drunk_128.png") no-repeat 160px 125px,
url("/assets/course13/cat_walk_128.png") no-repeat 80px 80px,
url("/assets/course13/cat_academy.png") no-repeat 20px 20px,
url("/assets/course13/star.png") repeat-x 0 10px,
url("/assets/course13/star.png") repeat-x 0 270px;

}


#28

Фишка то не в том, чтобы угадать параметры position. Там в задании изначально указаны параметры 5 либо 10. Что это за величины и как их применять? Видимо там есть фокус с тем, что каждую картинку нужно выставить по параметру bottom, top и т.п. и к ним добавлять опцию 5 либо 10 ???


#29

вообще-то в задании указано кратно 5 либо 10.


#30

ну и что это за кратность?


#31

270 делится на 5 без остатка. и на 10 тоже. Это и называется кратность. Проходится в начальной школе сразу после таблицы умножения.


#32

И 0 тоже делится (правда 0 на всё делится, но это ему не мешает быть кратным 5 и 10)