Олимпийские кольца всего одним блоком (CSS, HTML) / likes 1 / блог студии Клондайк!

Небольшая заметка верстальщика студии Клондайк — Александра Кудрявцева.

В эти суровые дни решил сделать что-то позитивное и написал небольшой туториал о том, как сделать логотип Олимпиады (немного поздновато, но всё еще актуально) при помощи всего одного элемента (div) и такого замечательного css-свойства как box-shadow.

Забегая вперед, вот что у меня получилось в итоге:

Немного примитивно (в настоящем логотипе кольца пересекаются, а не лежат один поверх другого), но речь не о том.

Как я уже написал, для лого использован всего один див, то есть содержимое тэга body имеет следующий вид:

<div></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.

Свойство имеет следующий синтаксис 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 (следующую статью напишу о том, как можно еще использовать эти псевдоэлементы в верстке), для того чтоб они хоть как-то перекрывали верхний ряд колец, а не просто закрывали его белой непрозрачной тенью.

Код и конечный результат можно посмотреть тут

Олимпийские кольца появились в небе над Сочи. Новости. Первый канал

Олимпийские кольца появились в небе над Сочи. Новости. Первый канал

Новости

• Выпуски
• Все новости

Хотите получать уведомления от сайта «Первого канала»?

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

Они появились в ясном небе, словно из ниоткуда. А потом медленно растворились, заставив жителей Сочи еще долго всматриваться в свой дымчатый след. Случись такое в небе над Парижем или Нижним Новгородом — ажиотаж гарантирован. Но в Сочи, где олимпийские символы почти на каждой улице — 5 колец на голубом небосводе — больше чем затейливый каприз природы. Это одновременно и подарок и знак. Их можно было увидеть из разных точек города. Ученые объясняют: речь идет о хорошо известном явлении.

«Подобные явления наблюдаются крайне редко. Они образуется, когда на небе появляется тонкая облачность на высоте около 6 километров. Так называемая облачность верхнего яруса. И сквозь него слабо просматривается солнце в виде тонкой пленки — дымки. Именно так вокруг солнца образуется круг – гало», — объясняет автор книги «Мы и облака» Филипп Техдиров.

По словам исследователя облаков Филиппа Техдирова, последний раз похожие кольца — гало наблюдали жители Подмосковья. Больше 30 лет назад, летом 79-го. Очевидцы этому есть. А вот кино- и фотодокументов нет. Слишком скоротечны были облачные круги. Еще короче, чем сочинские.

«Это зависит от многих факторов: влажности, от того, под каким углом падают солнечные лучи и от наличия тонкой облачности, состоящей из ледяных кристаллов», — говорит Филипп Техдиров.

В век мобильных телефонов и бытовых видеокамер свидетельств для истории сохранилось предостаточно. Их еще долго будут изучать. Но даже сейчас можно точно сказать: в историю зимней Олимпиады-2014 уже вписана одна из самых необычных страниц.

Павел Полуйчик

Общество

Читайте также:

Выпуск новостей в 18:00 от 15.03.2023

Выпуск новостей в 13:00 от 15.03.2023

Выпуск новостей в 09:00 от 15.03.2023

Выпуск новостей в 14:00 от 14.03.2023

Выпуск новостей в 13:00 от 14.03.2023

Выпуск новостей в 18:00 от 13.03.2023

Выпуск новостей в 12:00 от 13.03.2023

Выпуск новостей в 18:00 от 12.03.2023

Выпуск новостей в 10:00 от 12.03.2023

Выпуск новостей в 12:00 от 11.03.2023

Выпуск новостей в 18:00 от 10.03.2023

Выпуск новостей в 12:00 от 10.03.2023

Выпуск новостей в 09:00 от 10.03.2023

Выпуск новостей в 15:00 от 09.03.2023

Выпуск новостей в 13:00 от 09.

03.2023

ПРЯМОЙ ЭФИР

Art Forward: история дизайна олимпийского кольца

9 февраля 2022 г. | 13:30

Местные новости

Источник: www.olympics.com

Следующая статья написана Кортни Хансен для серии Rahr-West Art Forward.

Всего несколько месяцев назад мы были прикованы к своим телевизорам, наблюдая, как сильнейшие гимнасты и пловцы США прыгают и ныряют на наших экранах на отложенных летних Олимпийских играх в Токио. Теперь мы снова в гуще очередного олимпийского соревнования. Буквально на прошлой неделе в Пекине стартовали зимние Олимпийские игры 2022 года, и многие из нас проводят свободное время, наблюдая, как фигуристы крутятся по льду, а сноубордисты мчатся по снежным холмам. Получая ежедневную дозу олимпийского освещения, задумывались ли вы, что было в дизайне культовых олимпийских колец, которые вы видите на экране, на форме спортсменов и в рекламе?

Олимпийские кольца, один из самых узнаваемых и известных символов в мире, были разработаны Пьером де Кубертеном, педагогом, историком и основателем Международного олимпийского комитета (МОК). Приступая к разработке концепции олимпийского символа, он стремился к максимально универсальному и всеобъемлющему дизайну.

Современный дизайн олимпийских колец. Источник: www.olympics.com

Пять переплетенных колец представляли пять континентов, участвовавших в Олимпийских играх: Африку, Азию, Америку, Европу и Океанию. Шесть цветов — синий, желтый, черный, зеленый и красный на белом фоне — символизировали цвета всех стран, из которых родом участники соревнований.

Олимпийские кольца были представлены публике в 1913 году, а в 1914 году они были представлены на Олимпийском конгрессе 1914 года в Париже в рамках возрождения Олимпийских игр того времени. Кольца дебютировали во время Олимпийских игр в 1920 году в Антверпене, хотя только спустя годы, в 1957 году, они были официально одобрены МОК. Этот утвержденный дизайн лишь немного отличался от оригинального дизайна тем, как пересекались кольца. В 1986 году МОК выпустил новые графические стандарты для колец, в том числе детали того, как кольца должны располагаться на небольшом расстоянии друг от друга и фактически не пересекаться друг с другом. Однако в 2010 году Исполнительный совет МОК одобрил возвращение оригинального дизайна Кубертена с бесшовными переплетающимися кольцами, которые он создал почти столетие назад.

На сегодняшний день существует семь различных версий олимпийских колец, одобренных для использования МОК. Предпочтительная версия — полноцветная версия на белом фоне — версия, которая лучше всего воплощает оригинальное творение Кубертена. Остальные шесть являются монохромными вариантами — все пять колец могут отображаться синим, желтым, черным, зеленым или красным цветом на белом фоне — или все кольца могут отображаться белыми на черном фоне.

Хотя прошло более 100 лет с тех пор, как Кубертен приступил к разработке олимпийского символа, олимпийские кольца в их нынешнем виде остаются глобальным символом олимпийского движения для миллиардов людей.

Источник/фотографии: www.olympics.com

Нарисуйте олимпийский символ в Python с помощью Turtle

Улучшить статью

Сохранить статью

• Уровень сложности:
  Базовый
• Последнее обновление:
  04 апр, 2022

Улучшить статью

Сохранить статью

Требования: Черепашье программирование на Python

Олимпийские кольца представляют собой пять переплетенных колец синего, желтого, черного, зеленого и красного цветов на белом поле. Как показано на изображении ниже.

Подход:

• Импорт черепахового модуля
• Установить толщину для каждого кольца
• Нарисовать каждый круг с определенными координатами

Ниже приведена реализация.