Возможности CSS3, о которых вы могли не знать: Flexbox, макеты сетки, настраиваемые свойства, переходы, анимация и несколько фонов | Зона Мартех

Каскадные таблицы стилей (CSS) продолжают развиваться, и в последних версиях могут быть некоторые функции, о которых вы, возможно, даже не подозреваете. Вот некоторые из основных улучшений и методологий, представленных в CSS3, а также примеры кода:

• Гибкая компоновка ящиков (Flexbox): режим макета, который позволяет создавать гибкие и адаптивные макеты для веб-сайтов. С помощью flexbox вы можете легко выравнивать и распределять элементы внутри контейнера. в этом примере .container используемый класс display: flex чтобы включить режим макета flexbox. justify-content свойство установлено на center чтобы центрировать дочерний элемент горизонтально в контейнере. align-items свойство установлено на center центрировать дочерний элемент по вертикали. .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 чтобы включить режим макета сетки. grid-template-columns свойство установлено на repeat(2, 1fr) для создания двух столбцов одинаковой ширины. gap Свойство задает расстояние между ячейками сетки. .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 class устанавливает ширину, высоту и начальный цвет фона для элемента. transition свойство установлено на background-color 0.5s ease чтобы анимировать изменения свойства цвета фона в течение полсекунды с помощью простой функции синхронизации. .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 владеть Мы определили @keyframes Правило для анимации, которое указывает, что поле должно вращаться от 0 до 90 градусов в течение 0,5 секунды. Если поле наведено, spin анимация применяется для вращения окна. 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, размещается в верхнем левом углу элемента. background-position Свойство используется для управления позиционированием каждого изображения. 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;
}