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

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

• Гнуткая схема скрынкі (Flexbox): рэжым макета, які дазваляе ствараць гнуткія і адаптыўныя макеты вэб-старонак. З дапамогай flexbox вы можаце лёгка выраўнаваць і размеркаваць элементы ўнутры кантэйнера. у гэтым прыкладзе .container клас выкарыстоўвае display: flex каб уключыць рэжым макета flexbox. The justify-content уласцівасць усталявана center для гарызантальнага цэнтравання даччынага элемента ў кантэйнеры. The align-items уласцівасць усталявана center каб вертыкальна адцэнтраваць даччыны элемент. The .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 каб уключыць рэжым размяшчэння сеткі. The grid-template-columns уласцівасць усталявана repeat(2, 1fr) каб стварыць два слупка аднолькавай шырыні. The gap уласцівасць задае адлегласць паміж ячэйкамі сеткі. The .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 клас задае шырыню, вышыню і пачатковы колер фону для элемента. 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 уласнасць. Мы вызначылі а @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;
}