Мишени

Допустим надо сделать своеобразные мишени. Делать будем средствами языка разметки HTML, а раскрашивать с помощью языка CSS.

Начнем с тэга body. Для него в CSS пропишем ширину блока width = 280 px, зададим нулевые отступы от каждого края элемента margin=0, также, как и нулевые поля вокруг элементов padding=0.
Внутри тега body с помощью тэга div создадим два блока для двух стрелков: «shooter-1» и «shooter-2». HTML- содержание внутри тэга div для shooter-1 и shooter-2 будет одинаковым, а выглядеть по-разному блоки будут благодаря языку CSS.

Одинаково для первого и второго стрелка

Начнем с первого стрелка. В HTML создадим блок «shooter-1» помощью тэга div. Пропишем в языке CSS ему поля вокруг его содержимого с помощью атрибута padding: от верхнего края 55px, от правого края 0, от нижнего края 55px и от левого края 0. С помощью атрибута border-bottom пропишем ему пунктирную границу серого цвета, толщиной в 1 пиксель. А приятный бежевый фон создадим атрибутом background со значением #fcf8e3.


Точно также с помощью тега div создадим голубой блок второго стрелка. в языке CSS его фон будет голубым, атрибуту background зададим значение #d9edf7.

Создаем мишени

Теперь настал черед создать внутри блока мишени. Сделаем это с помощью не маркированного списка, который назовем «target», воспользовавшись помощью тэга ul.
Нам нужно, чтобы список был горизонтальным, поэтому ширина списка width со значением 200px будет больше высоты height со значением 25px. Отступы от края каждого элемента задаем нулевые с помощью атрибута margin, но добавление значения auto поможет устанавливать отступ в зависимости от содержания элемента. А поля вокруг содержимого списка зададим атрибутом padding: от верхнего края 10px, от правого края 15px, от нижнего 10px и от левого края 15px. Красиво закруглим пространство списка при помощи атрибута border-radius со значением 2px. Фон списка сделаем белым и заставим отбрасывать тень с помощью атрибута box-shadow. Озаботимся и тем, чтобы при выходе содержимого за рамки можно было управлять его отображением с помощью атрибута overflow.

Наш список «target» будет состоять из пяти элементов, поэтому пять раз пропишем тег li. Это будет черный круг, сделанный из блока шириной 22 пикселя и такой же высотой. Черный квадрат превратится в круг при помощи атрибута border-radius со значением 50%.
Возникнет проблемка, требующая решения. Последний пятый черный круг не поместится в один ряд с остальными, поэтому для него потребуется обнуление значения величины отступа от правого края, равного 20 пикселей (margin-right: 20px).


Поэтому для последнего элемента списка, на который нацелимся с помощью псевдокласса last-child пропишем специальное правило:
li:last-child
{
margin-right: 0px;
}

Ну а теперь из десяти одинаковых черных кругов надо сделать не просто черные круги. У нас есть два варианта- мишень поражена и не поражена. Поэтому в каждом элементе списка будет два блока (div).
Если мишень поражена, то тогда она выглядит как черный круг с серым кружком (hitbox) внутри. hitbox- серый круг, сделанный из блока шириной 10 пикселей и такой же высотой. Серый маленький квадратик превратится в круг при помощи атрибута border-radius со значением 50%.Это будет первый блок.

Если мишень не поражена, то тогда она выглядит, как белый круг на ножке. В этом блоке будет белая крышка мишени lever и белый рычаг крышки i.Белая крышка мишени lever будет больше, чем изначальный черный круг. А сделаем мы крышку из блока шириной 26 пикселей (у черного было 22) и такой же высотой. Белый квадрат превратится в круг при помощи атрибута border-radius со значением 50%.

Ножка будет высотой 25 и шириной 5 пикселей. Все это будет названо i и вложено в один блок с классом lever, а в CSS удостоено отдельного описания. Теперь все мишени закрыты белыми крышками на ножках.

Откроем мишени

Откроем для первого стрелка 2,3 и 5 мишень, которые описываются классом miss (class=»miss»). Для этого пропишем правило, что на дисплее не отражается крышка, за которую отвечает lever. Ножка исчезнет автоматически.


А для второго стрелка откроем 1,4 и 5 мишень правилом в CSS:
.shooter-2 li:nth-child(1) .lever
{
display: none;
}


Аналогично сделаем для 4 и 5 элемента в списке второго стрелка. Нужный результат достигнут.

HTML для первого стрелка

HTML для второго стрелка

CSS
body
{
width: 280 px;
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
{
wigdth: 200px;
height: 25px;
padding: 15px 10px 15px 10px;
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: 0px;
}
.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);
}

i
{
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 li:nth-child(1) .lever
{
display: none;
}

.shooter-2 li:nth-child(4) .lever {
display: none;
}

.shooter-2 li:nth-child(5) .lever {
display: none;
}


Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Загрузка...
Menu Title