Content Marketing
Функции на CSS3, за които може би не сте запознати: Flexbox, Grid Layouts, Персонализирани свойства, Преходи, Анимации и множество фонове
Каскадни стилови таблици (CSS) продължават да се развиват и най-новите версии може да имат някои функции, за които може дори да не подозирате. Ето някои от основните подобрения и методологии, въведени с CSS3, заедно с примери за код:
- Гъвкаво оформление на кутията (Flexbox): режим на оформление, който ви позволява да създавате гъвкави и отзивчиви оформления за уеб страници. С flexbox можете лесно да подравнявате и разпределяте елементи в контейнер. в този пример,
.container
клас използваdisplay: flex
за да активирате режима на оформление на flexbox. Thejustify-content
свойството е зададено наcenter
за хоризонтално центриране на дъщерния елемент в контейнера. Thealign-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
за да активирате режима на оформление на мрежата. Thegrid-template-columns
свойството е зададено наrepeat(2, 1fr)
за да създадете две колони с еднаква ширина. Thegap
свойството задава разстоянието между клетките на мрежата. 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
клас задава ширината, височината и първоначалния цвят на фона на елемента. Thetransition
свойството е зададено на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
анимацията се прилага за завъртане на кутията. Theanimation-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
, се намира в горния ляв ъгъл на елемента. Thebackground-position
свойството се използва за контролиране на позиционирането на всяко изображение. Thebackground-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;
}