Содржина Маркетинг
Карактеристики на 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;
}