Содержание маркетинга

Функции CSS3, о которых вы могли не знать: Flexbox, макеты сетки, настраиваемые свойства, переходы, анимация и несколько фонов.

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

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

HTML

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

CSS

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

HTML

<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>

CSS

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

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

Результат

Пункт 1
Пункт 2
Пункт 3
Пункт 4
  • Переходы: CSS3 представил ряд новых свойств и методов для создания переходов на веб-страницах. Например, transition Свойство можно использовать для анимации изменений свойств CSS с течением времени. В этом примере .box class устанавливает ширину, высоту и начальный цвет фона для элемента. transition свойство установлено на background-color 0.5s ease чтобы анимировать изменения свойства цвета фона в течение полсекунды с помощью функции синхронизации. .box:hover Класс изменяет цвет фона элемента, когда указатель мыши находится над ним, запуская анимацию перехода.

HTML

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

CSS

.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 чтобы убедиться, что конечное состояние анимации сохраняется после ее завершения.

HTML

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

CSS

.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).

    HTML

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

    CSS

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

    Результат

    Douglas Karr

    Douglas Karr является директором по маркетингу OpenINSIGHTS и основатель компании Martech Zone. Дуглас помог десяткам успешных стартапов MarTech, помог в комплексной проверке приобретений и инвестиций Martech на сумму более 5 миллиардов долларов, а также продолжает помогать компаниям во внедрении и автоматизации их стратегий продаж и маркетинга. Дуглас — международно признанный эксперт по цифровой трансформации, а также эксперт в области MarTech и спикер. Дуглас также является автором опубликованного руководства для чайников и книги по бизнес-лидерству.

    Статьи по теме

    Вернуться к началу кнопки
    Закрыть

    Adblock обнаружен

    Martech Zone может предоставить вам этот контент бесплатно, потому что мы монетизируем наш сайт за счет доходов от рекламы, партнерских ссылок и спонсорства. Мы были бы признательны, если бы вы удалили блокировщик рекламы при просмотре нашего сайта.