22/23 Помогите разобраться


#21

С повторением понял, спасибо!


#22

Если не просто стереть координаты, а написать background-position: 0 0; , то будет так, как вы хотели. В чем разница между отсутствующими координатами и обнуленными - не знаю, ведь значение по умолчанию и есть 0 0.


#23

Объясните пожалуйста, по какому принципу в данном случае работает background-position? 18/23 прошла, но так и не поняла принципа перемещения фона :confused: Соответственно застряла на 22/23 именно на этом моменте - не понимаю откуда идет отсчет и что именно перемещается - квадрат?

UPD: вот стоило написать сюда и сразу все стало понятно, что куда и как двигается :slight_smile:


#24

… не туда добавилось у меня что то сообщение


#25

Вроде разжевано, но тот случай, когда все равно непонятно )


#26

Что конкретно не понятно?


#27

Пришлось разобраться) На самом деле задание простое, сначала было непонятно откуда берется отсчет. Но как только понял, что все градиенты рисуются из углов квадрата 115х115, дальше стало понятно.


#28

Спасибо за разъяснение - пазл начал собираться в голове, но я все же не очень хорошо поняла как определить размер треугольников (25px). Не могли бы вы направить меня на решение.


#29

Размер треугольника можно определить с помощью линейки в инструментах разработчика в любом браузере. Панель с инструментами открывается нажатием клавиши F12.


#30

Можно ли в этом задании собрать сюрикен по частям, а потом размножить его? (т.е. 4 угла + черный квадрат) и всему этому задать repeat: repeat? Я так пытался, у меня не получилось, вероятно потому что repeat задается 1ой части ,а не целому сюрикену.


#31

Так и нужно было сделать. Покажите свой код.


#32

У меня получилось со 2го раза, я подсмотрел уже выложенную логику на форуме и собрал, накладывая разные фоны-градиенты. А изначально хотел уменьшить черный квадрат в центре с помощью background-size до 40px и приставлять по бокам сюрикены (тоже 40px), но background-repeat в этом случае работал некорректно)


#33

интересно, почему бы не использовать
background-image:linear-gradient(#000000,#000000)


#34

.pattern {
height: 100%;
width: 100;
background-size: 115px 115px;
background-repeat: repeat;
background-image:
linear-gradient(45deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #555555 25px, transparent 25px),
linear-gradient(225deg, #555555 25px, transparent 25px),
linear-gradient(315deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #000000 25px, transparent 25px),
linear-gradient(315deg, #000000 25px, transparent 25px);
background-position:
70px -45px,
35px 70px,
-80px 35px,
-45px -80px,
35px 35px,
-45px -45px;
Хвала великим силам, сам подобрал и сразу 100%


#35

А объяснить можете это позиционирование? Никак не пойму эти точки…


#36

как подбирать deg? и пиксели?


#37

Или как сказано выше - с помощью встроенной линейки, или на глаз. Мне удобнее второй вариант, тем более что в заданиях числовые параметры обычно кратны 5 или 10.


#38

А градусы - тоже просто: диагональ квадрата - это 45 градусов (фон квадрат, ибо у него высота и ширина равны), соответственно нам подойдет в этом случае 45 градусов или to top right, to top left, to bottom right/left (ибо диагонали в этом случае совпадают с 45 градусами).


#39

Очень помогли Ваши объяснения!) по-началу думал, что тяжело, но теперь все понял и быстро все сделал. И еще хорошо, что координаты уже есть, так пришлось бы помучиться.