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

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

• Гибкая компоновка ящиков (Flexbox): режим макета, который позволяет создавать гибкие и адаптивные макеты для веб-страниц. С помощью flexbox вы можете легко выравнивать и распределять элементы в контейнере. В этом примере .container класс использует display: flex чтобы включить режим макета flexbox. НАШИ justify-content свойство установлено на center для горизонтального центрирования дочернего элемента в контейнере. НАШИ align-items свойство установлено на center центрировать дочерний элемент по вертикали. НАШИ .item Класс устанавливает цвет фона и отступы дочернего элемента.

<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 Класс определяет цвет фона и заполнение элементов сетки.

<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 Класс определяет ширину, высоту и исходный цвет фона элемента. НАШИ 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;
}