Именно по размерам и цветам я практически сразу идентифицировал все элементы, также не составило труда сформировать две мишени со всеми полностью черными кружочками в ряд ( про отступ пятого элемента сообразил быстро). Вроде 90% сделано, и можно идти дальше, но это же и близко не образец, а вот как их позиционировать… прошло 4 часа, короче сделал я его на 100%…ребята, вы просто садисты ))) или это мы мазохисты ))) даже размеры и координаты ножек пришлось корректировать! Это наверное барьер для прохода в следующую жизнь )))
2 лайка
Приблизительно схожие чувства как в этом задании испытываешь при забеге на большую дистанцию.
Начало забега - "это сколько же еще бежать!..это вообще реально?.."
Середина - "когда-нибудь это закончится…"
Осталось чуть-чуть - "да эти 3 км уже фигня полная, я смогу!"
Финиш - “УРА!.. а я еще сомневался…”
1 лайк
В идеале сами стили трогать не надо…
А ножки тогда смещены получаются, как не трогать?
Вот так если не трогать:
ножки смещены чуть-чуть вправо и вниз, между ними и крышечками hitbox зазор в пару пикс.
А вот так если чуть изменить значения свойств top: 10px и left: 9px
Или это как-то по-другому решается?
Весь код покажите, а то только фрагмент span видно.
body {
width: 280px;
margin: 0;
padding: 0;
}
.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}
.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}
.target {
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;
}
li{
position: relative;
float: left;
width: 22px;
height: 22px;
margin-right: 20px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}
li:last-child{
margin-right: 0;
}
.lever
{
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.hitbox{
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
span{
position: absolute;
top: 10px;
left: 9px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}
.shooter-1 li.miss .hitbox,
.shooter-2 li:first-child .hitbox,
.shooter-2 li:last-child .hitbox,
.shooter-2 li:nth-child(4) .hitbox
{
display: none;
}
.shooter-1 li:nth-child(2) span,
.shooter-1 li:nth-child(3) span,
.shooter-1 li:nth-child(5) span,
.shooter-2 li:nth-child(1) span,
.shooter-2 li:nth-child(4) span,
.shooter-2 li:nth-child(5) span{
display: none;
}
selector {
display: none;
}
selector {
display: none;
}
Я изменил значения top & left у селектора спан, без этого было криво
Селекторы .hitbox и .lever поменяйте местами.
Вот оно че!.. Сразу стало понятно для чего “лишние” display: none. Спасибо конечно. Коварству этого задания надо отдать должное 
1 лайк
Насколько я понял, такое смещение у меня произошло из-за нарушения правильности наследования. Абсолютно позиционируемые элементы позиционируются относительно родителя первого уровня, по отношению к которому они являются не просто потомками, а дочерними элементами. И получилось что в моем случае ножки span спозиционировались не относительно крышечек lever, а относительно кружочков hitbox, и из-за этого возник сдвиг.
1 лайк
а я lever перевёл как “рычаг” и понял что это та палочки-ножки на которой серая крышечка держится.
про span вообще забыл. и обозвал его стиль.miss. и тоже долго мучился "почему палочка смещена."
потом наворотил наследований.
position:absolute, работающий как relative, сломал мозг.
в итоге пришёл на форум.
возникает вопрос почему так трудно? может нас недоучили чему?
Добрый день, тоже встал сначала в тупик с этим заданием, но в конце концов разобрался и да ничего личного, но по моему скромному мнению, с display: none; пунктами очень сильно много текста, у меня получилось решить след способом.
Каким способом? Вы не дописали.
body {
width: 280px;
margin: 0;
padding: 0;
}
.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}
.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}
.target{
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;
}
li {
position: relative;
float: left;
width: 22px;
height: 22px;
margin-right: 20px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}
li:last-child {
margin-right: 0;
}
.hitbox{
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.lever{
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
span {
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}
.miss>.lever {
display: none;
}
.shooter-2 .target :first-child .lever {
display: none;
}
.shooter-2 .target :last-child .lever {
display: none;
}
.shooter-2 .target :nth-child(4) .lever {
display: none;
}
Та банило говорит слишком быстро отвечаешь)
Можно было в том же сообщении написать)
Кстати, в своем варианте вы использовали как раз все правила с display:none;
Да и как по мне решение получше, никоим образом не хочу обидеть топик стартера!!! Но факт на лицо текста меньше))) И да в начале он меня на путь истинный наставил, за что ему огромное спасибо!!!
1 лайк
Очень сложное задание. Селекторы вообще со скрипом заходят в мозг. Первое такое испытание где без форума завис
2 лайка
body {
width: 280px;
margin: 0;
padding: 0;
}
.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}
.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}
.target {
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;
}
li {
position: relative;
float: left;
width: 22px;
height: 22px;
margin-right: 20px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}
li:last-child {
margin-right: 0;
}
.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.lever{
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
span {
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}
.shooter-1 .miss .lever {
display: none;
}
.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever{
display: none;
}
selector {
display: none;
}
selector {
display: none;
}
можно спросить, зачем все таки использовать 4 правила display:none; если можно в одном через запятую перечислить что именно не показывать
1 лайк