Функції CSS3, про які ви можете не знати: Flexbox, макети сітки, спеціальні властивості, переходи, анімація та кілька фонів

Каскадні таблиці стилів (CSS) продовжує розвиватися, і останні версії можуть мати деякі функції, про які ви можете навіть не знати. Ось деякі з основних вдосконалень і методологій, представлених у CSS3, а також приклади коду:

• Гнучка структура коробки (Flexbox): режим макета, який дозволяє створювати гнучкі та адаптивні макети веб-сторінок. За допомогою flexbox ви можете легко вирівнювати та розподіляти елементи всередині контейнера. У цьому прикладі .container використання класу display: flex щоб увімкнути режим макета flexbox. The justify-content властивість встановлена ​​на center для горизонтального центрування дочірнього елемента всередині контейнера. The align-items властивість встановлена ​​на center щоб вертикально відцентрувати дочірній елемент. The .item class встановлює колір фону та відступ для дочірнього елемента.

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• Розташування сітки: інший режим макета, який дозволяє створювати складні макети на основі сітки для веб-сторінок. За допомогою сітки ви можете вказати рядки та стовпці, а потім розмістити елементи в окремих клітинках сітки. У цьому прикладі .grid-container використання класу display: grid щоб увімкнути режим макета сітки. The grid-template-columns властивість встановлена ​​на repeat(2, 1fr) щоб створити дві колони однакової ширини. The gap властивість встановлює відстань між клітинками сітки. The .grid-item class встановлює колір фону та відступ для елементів сітки.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

• Переходи: CSS3 представив ряд нових властивостей і технік для створення переходів на веб-сторінках. Наприклад, transition властивість можна використовувати для анімації змін властивостей CSS з часом. У цьому прикладі .box клас встановлює ширину, висоту та початковий колір фону для елемента. The transition властивість встановлена ​​на background-color 0.5s ease щоб анімувати зміни властивостей кольору фону протягом півсекунди з функцією легкого виходу. The .box:hover Клас змінює колір тла елемента, коли вказівник миші знаходиться на ньому, запускаючи анімацію переходу.

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• анімації: CSS3 представив ряд нових властивостей і технік для створення анімації на веб-сторінках. У цьому прикладі ми додали анімацію за допомогою animation власність. Ми визначили a @keyframes правило для анімації, яке вказує, що поле має повертатися від 0 градусів до 90 градусів протягом 0.5 секунди. Коли на коробку наведено курсор, spin анімація застосована для обертання коробки. The animation-fill-mode властивість встановлена ​​на forwards щоб забезпечити збереження кінцевого стану анімації після її завершення.

<div class="rotate"></div>

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

• Спеціальні властивості CSS: Також відомий як Змінні CSS, спеціальні властивості були введені в CSS3. Вони дозволяють вам визначати та використовувати власні власні властивості в CSS, які можна використовувати для зберігання та повторного використання значень у ваших таблицях стилів. Змінні CSS ідентифікуються назвою, яка починається з двох тире, наприклад --my-variable. У цьому прикладі ми визначаємо змінну CSS під назвою –primary-color і надаємо їй значення #007bff, синій колір, який зазвичай використовується як основний колір у багатьох дизайнах. Ми використовували цю змінну для встановлення background-color властивість елемента кнопки за допомогою var() функції та передання імені змінної. Це використовуватиме значення змінної як фоновий колір для кнопки.

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• Кілька фонів: CSS3 дозволяє вказати кілька фонових зображень для елемента з можливістю контролювати його розташування та порядок укладання. Фон складається з двох зображень, red.png та blue.png, які завантажуються за допомогою background-image власність. Перше зображення, red.png, розташований у правому нижньому куті елемента, тоді як друге зображення, blue.png, розташований у лівому верхньому куті елемента. The background-position властивість використовується для керування позиціонуванням кожного зображення. The background-repeat властивість використовується для керування повторенням зображень. Перше зображення, red.png, не повторюється (no-repeat), тоді як друге зображення, blue.png, налаштовано на повтор (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}