Флаг CSS: Индия

Сегодня 15 августа — дата, когда Индия стала независимой. Поэтому мы, индийцы, празднуем сегодня День независимости. Поэтому я начинаю новую серию под названием CSS Flag. В ней я буду делать флаги разных стран, начиная с Индии.

Итак, я думаю, вы уже представляете, что я собираюсь делать. Так что давайте перейдем прямо к делу.

Содержание

Метод-1
Создание полосок флага
Добавление колеса
Результат
Метод-2 с использованием Javascript
HTML
CSS
JavaScript
Результаты
Подведение итогов

Метод-1

Теперь вы видите, как это выглядит. Давайте сделаем это.

Создание полосок флага

<div class="flag">
    <div class="saffron"></div>
    <div class="white"></div>
    <div class="green"></div>
</div>

Войдите в полноэкранный режим Выйти из полноэкранного режима

Национальный флаг Индии представляет собой горизонтальный триколор: темно-шафрановый (Kesari) в верхней части, белый в середине и темно-зеленый в нижней части в равных пропорциях.

Я создал родительский или оберточный класс .flag. В нем есть три divs, представляющие каждую горизонтальную секцию флага.

Теперь давайте придадим им стиль с помощью CSS:

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --saffron : #ff6600;
  --green : #046434;
  --blue: #1c1ca5;
}

/* You can change the body color as per your needs */ 
body {
   background-color: aliceblue;
}


/* Flag is 300x200 */
.flag {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 1px rgba(0, 0, 0,0.5); 
}

/* It will divide each section (saffron, white, green) equally */
.flag > * {
  flex:1;
}

.saffron {
  background-color: var(--saffron);
}

.white {
  position: relative;
  background-color: white;
}
.green {
  background-color: var(--green);
}

Вход в полноэкранный режим Выход из полноэкранного режима

После применения этих стилей. Результаты будут выглядеть следующим образом:

Добавление колеса

Теперь давайте добавим колесо в центр белой полосы.

<div class="flag">
    <div class="saffron"></div>
    <div class="white">
        <!-- New Part Added -->
        <div class="wheel">
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
        </div>
       <!-- New Part End -->
    </div>
    <div class="green"></div>
</div>

Войдите в полноэкранный режим Выход из полноэкранного режима

Я добавил .wheel div внутри класса контейнера .white. Флаг Индии имеет 24 спицы в колесе (Ашока Чакра), которые представляют 24 качества человека. Поэтому я добавил 13 спиц внутри .wheel. Поскольку я собираюсь использовать -webkit-box-reflect, то 13 спиц будет достаточно.

Давайте оформим колесо:


.wheel {
  height: 100%;
  width: 67px;
  border-radius: 1in;
  margin: 0 auto;
  border: 2q solid var(--blue);
  position: relative;
  display: grid;
  place-items: center;
}

.spoke {
  height: 50%;
  width: 2px;
  position: absolute;
  top: 0;
  clip-path: polygon(50% 0, 50% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
  transform-origin: bottom; /* as we are going to rotate spokes so we need to rotate from the bottom */
  background-color: var(--blue);
}

/* Styling spoke individually */
.spoke:nth-child(1) {
    transform: rotate(15deg)    
}

.spoke:nth-child(2) {
    transform: rotate(30deg);
}

.spoke:nth-child(3) {
    transform: rotate(45deg)
}

.spoke:nth-child(4) {
    transform: rotate(60deg)
}

.spoke:nth-child(5) {
    transform: rotate(75deg)
}

.spoke:nth-child(6) {
    transform: rotate(90deg)
}

.spoke:nth-child(7) {
    transform: rotate(105deg)
}

.spoke:nth-child(8) {
    transform: rotate(120deg)
}

.spoke:nth-child(9) {
    transform: rotate(135deg)
}

.spoke:nth-child(10) {
    transform: rotate(150deg)
}

.spoke:nth-child(11) {
    transform: rotate(165deg)
}

.spoke:nth-child(12) {
    transform: rotate(180deg)
}

Войти в полноэкранный режим Выход из полноэкранного режима

Теперь нам нужно добавить -webkit-box-reflect к .wheel:

.wheel {
  /* .... */
  -webkit-box-reflect: left -99%;   /* play with value -99%, 100%, 101% */
  animation: spin 4s linear infinite;  
  /* .... */
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Результат

Результат вы можете увидеть в следующем кодепене:

Метод-2 с использованием Javascript

Приведенное выше решение работает хорошо, но есть много дубликатов и стилизация каждой спицы немного раздражает, а также есть перекрытие в некоторых спицах. Чтобы исправить это, мы будем использовать немного javascript.

HTML

<div class="flag">
    <div class="saffron"></div>
    <div class="white">
        <div class="wheel"></div>
    </div>
    <div class="green"></div>
</div>

Вход в полноэкранный режим Выход из полноэкранного режима

Здесь нет ничего причудливого. Я только добавил .wheel внутри контейнера с полосой .white.

CSS


* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --saffron : #ff6600;
  --green : #046434;
  --blue: #1c1ca5;
}

.flag {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 1px rgba(0, 0, 0,0.5);
}

.flag > * {
  flex:1;
}

.saffron {
  background-color: var(--saffron);
}

.white {
  background-color: white;
  position: relative;
}
.green {
  background-color: var(--green);
}

.wheel {
  height: 100%;
  width: 67px;
  border-radius: 1in;
  margin: 0 auto;
  border: 2q solid var(--blue);
  position: relative;
  display: grid;
  place-items: center;
}

.spoke {
  height: 50%;
  width: 2px;
  position: absolute;
  top: 0;
  clip-path: polygon(50% 0, 50% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
  transform-origin: bottom;
  background-color: var(--blue);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Это старые стили, изменилось только то, что я не стилизую каждую спицу по отдельности.

JavaScript

const wheel = document.querySelector(".wheel");

for (let i =1; i <= 24; i++){
  let spoke = document.createElement('span');
  spoke.classList.add("spoke");
  spoke.style.rotate = `${i*15}deg`;
  wheel.appendChild(spoke)
}

Войти в полноэкранный режим Выход из полноэкранного режима

Здесь мы создаем span и добавляем к нему класс .spoke, а затем поворачиваем его. Для каждой спицы мы увеличиваем вращение на 15deg. После этого просто добавляем спицу к колесу.

Результаты

Примечание: Попробуйте Codepen на настольном компьютере/ноутбуке. На мобильных устройствах есть некоторые проблемы.

Подведение итогов

Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже. Обязательно следите за другими подобными статьями. Если вам понравилась эта статья, не забудьте ❤️. Напишите в комментариях, флаг какой страны вы хотите увидеть следующим. До встречи в следующем выпуске.