Садржај маркетинг
ЦСС3 функције којих можда нисте свесни: Флекбок, распореди мреже, прилагођена својства, прелази, анимације и више позадина
Каскадни листови стилова (ЦСС) настављају да се развијају и најновије верзије могу имати неке функције којих можда нисте ни свесни. Ево неких од главних побољшања и методологија уведених са ЦСС3, заједно са примерима кода:
- Флексибилни распоред кутије (Флекбок): режим изгледа који вам омогућава да креирате флексибилне и прилагодљиве изгледе за веб странице. Помоћу флекбок-а можете лако поравнати и дистрибуирати елементе унутар контејнера. у овом примеру,
.container
класа користиdisplay: flex
да бисте омогућили режим флексбокс распореда. Тхе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;
}
Резултат
Предмет КСНУМКС
Предмет КСНУМКС
Предмет КСНУМКС
Предмет КСНУМКС
- Прелази: ЦСС3 је увео низ нових својстава и техника за креирање прелаза на веб страницама. На пример, тхе
transition
својство се може користити за анимирање промена у ЦСС својствима током времена. У овом примеру,.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;
}
Резултат
Лебдети
Овде!
Овде!
- Анимације: ЦСС3 је увео низ нових својстава и техника за креирање анимација на веб страницама. У овом примеру смо додали анимацију користећи
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;
}
Резултат
Лебдети
Овде!
Овде!
- ЦСС прилагођена својства: Такође познат као ЦСС променљиве, прилагођена својства су уведена у ЦСС3. Они вам омогућавају да дефинишете и користите сопствена прилагођена својства у ЦСС-у, која се могу користити за чување и поновну употребу вредности у вашим стиловима. ЦСС променљиве се идентификују именом које почиње са две цртице, као нпр
--my-variable
. У овом примеру дефинишемо ЦСС променљиву под називом –примари-цолор и дајемо јој вредност#007bff
, која је плава боја која се обично користи као примарна боја у многим дизајнима. Користили смо ову променљиву за подешавањеbackground-color
својство елемента дугмета, коришћењемvar()
функцију и прослеђивање имена променљиве. Ово ће користити вредност променљиве као боју позадине за дугме.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Више позадина: ЦСС3 вам омогућава да одредите више позадинских слика за елемент, уз могућност контроле његовог позиционирања и редоследа слагања. Позадина се састоји од две слике,
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;
}