Content Marketing

Функции на CSS3, за които може би не сте запознати: Flexbox, Grid Layouts, Персонализирани свойства, Преходи, Анимации и множество фонове

Каскадни стилови таблици (CSS) продължават да се развиват и най-новите версии може да имат някои функции, за които може дори да не подозирате. Ето някои от основните подобрения и методологии, въведени с CSS3, заедно с примери за код:

  • Гъвкаво оформление на кутията (Flexbox): режим на оформление, който ви позволява да създавате гъвкави и отзивчиви оформления за уеб страници. С flexbox можете лесно да подравнявате и разпределяте елементи в контейнер. в този пример, .container клас използва display: flex за да активирате режима на оформление на flexbox. The justify-content свойството е зададено на center за хоризонтално центриране на дъщерния елемент в контейнера. The align-items свойството е зададено на center за вертикално центриране на дъщерния елемент. The .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 за да активирате режима на оформление на мрежата. The grid-template-columns свойството е зададено на repeat(2, 1fr) за да създадете две колони с еднаква ширина. The gap свойството задава разстоянието между клетките на мрежата. The .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 клас задава ширината, височината и първоначалния цвят на фона на елемента. The transition свойството е зададено на background-color 0.5s ease за анимиране на промените в свойствата на цвета на фона за половин секунда с функция за улесняване на времето. The .box:hover class променя цвета на фона на елемента, когато показалецът на мишката е върху него, задействайки анимацията на прехода.

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 Имот. Ние сме дефинирали a @keyframes правило за анимацията, което указва, че кутията трябва да се върти от 0 градуса до 90 градуса за период от 0.5 секунди. Когато полето се задържи над, spin анимацията се прилага за завъртане на кутията. The 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, се намира в горния ляв ъгъл на елемента. The background-position свойството се използва за контролиране на позиционирането на всяко изображение. The 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 е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

    Свързани статии

    Бутон "Нагоре" горе
    Близо

    Открит е рекламен блок

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