Олимпийские кольца всего одним блоком (CSS, HTML)
Небольшая заметка верстальщика студии Клондайк — Александра Кудрявцева.
В эти суровые дни решил сделать что-то позитивное и написал небольшой туториал о том, как сделать логотип Олимпиады (немного поздновато, но всё еще актуально) при помощи всего одного элемента (div) и такого замечательного css-свойства как
Забегая вперед, вот что у меня получилось в итоге:
Немного примитивно (в настоящем логотипе кольца пересекаются, а не лежат один поверх другого), но речь не о том.
Теперь о коде
Как я уже написал, для лого использован всего один див, то есть содержимое тэга body имеет следующий вид:
<div class="circles"></div>
Файл стилей имеет следующее содержимое:
.circles{
position: absolute;
right: 0;
margin: auto;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: inset 0 0 0 8px black,
-110px 0 0 -8px white,
-110px 0 0 0px #0080cb,
110px 0 0 -8px white,
110px 0 0 0px #f0344d;
}
.circles:after{
width: 100%;
height: 100%;
border-radius: 50%;
left: -55px;
top: 50px;
box-shadow: inset 0 0 0 8px #fcb132;
content: '';
position: absolute;
}
.circles:before{
width: 100%;
height: 100%;
border-radius: 50%;
left: 55px;
top: 50px;
box-shadow: inset 0 0 0 8px #00a950;
content: '';
position: absolute;
}
Теперь несколько подробнее о некоторых моментах. Первое на что хотелось бы обратить внимание, это вот такая связка:
position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin: auto;
Такой набор свойств позволяет разместить абсолютно позиционированный блок в центре родительского блока с position:relative; единственный момент — у блока должны быть заданы ширина и высота.
Border-radius :50%;Далее речь пойдет, собственно, о свойстве
Свойство имеет следующий синтаксис box-shadow: [направление тени] [горизонтальное смещение] [вертикальное смещение] [размытие] [распространение] [цвет]
Первый параметр может принимать значение inset — что будет означать что тень будет располагаться внутри блока (как inner shadow в графических редакторах), при отсутствии данного параметра тень будет отбрасываться снаружи (outer shadow).
Второй и третий параметры (горизонтальное и вертикальное смещение) могут принимать как отрицательные так и положительные значения.
Размытие позволяет создать более мягкую, естественную тень, с полупрозрачностями, плавными краями и т. п., задается в пикселях. Параметр может быть пропущен.
Распространение позволяет увеличивать либо уменьшать размеры тени, немного затруднительно описать словами как именно это происходит, лучше поэкспериментировать на практике, чтоб понять. Данный параметр также может быть пропущен.
Последний параметр — цвет тени, как и в любом другом месте, где в стилях указывается цвет значение можно задавать на разный манер (название цвета, шестнадцатеричный код, десятичный вариант). Если параметр не задан, цвет тени — черный.
У одного объекта может быть много теней, значения в таком случае записываются через запятую, например как в нашем случае:
box-shadow: inset 0 0 0 8px black, -110px 0 0 -8px white, -110px 0 0 0px #0080cb, 110px 0 0 -8px white, 110px 0 0 0px #f0344d;
В таком случае тени накладываются с конца в начало, то есть предпоследняя тень перекрывает последнюю и т. д. (точно также как работает multiple background).
В нашем примере верхние три кольца выполнены тенями от блока, при этом блок отбрасывает 5 теней (две дополнительные белые нужны для того чтоб сделать белый фон внутри левого и правого кольца, диаметр этих теней уменьшен при помощи отрицательного значения параметра «распространение» (spread)).
Два нижних кольца я решил сделать через псевдоэлементы :before и :after (следующую статью напишу о том, как можно еще использовать эти псевдоэлементы в верстке), для того чтоб они хоть как-то перекрывали верхний ряд колец, а не просто закрывали его белой непрозрачной тенью.
Код и конечный результат можно посмотреть тут
Оставить комментарий