Змест маркетынгу
Функцыі CSS3, пра якія вы можаце не ведаць: Flexbox, макеты сеткі, карыстальніцкія ўласцівасці, пераходы, анімацыя і некалькі фонаў
Каскадныя табліцы стыляў (CSS) працягвае развівацца, і апошнія версіі могуць мець некаторыя асаблівасці, пра якія вы можаце нават не ведаць. Вось некаторыя з асноўных паляпшэнняў і метадалогій, прадстаўленых з CSS3, разам з прыкладамі кода:
- Гнуткая схема скрынкі (Flexbox): рэжым макета, які дазваляе ствараць гнуткія і адаптыўныя макеты вэб-старонак. З дапамогай flexbox вы можаце лёгка выраўнаваць і размеркаваць элементы ўнутры кантэйнера. у гэтым прыкладзе
.container
клас выкарыстоўваеdisplay: flex
каб уключыць рэжым макета flexbox. Thejustify-content
уласцівасць усталяванаcenter
для гарызантальнага цэнтравання даччынага элемента ў кантэйнеры. Thealign-items
уласцівасць усталяванаcenter
каб вертыкальна адцэнтраваць даччыны элемент. The.item
клас задае колер фону і запаўненне для даччынага элемента.
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
клас задае колер фону і запаўненне для элементаў сеткі.
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
клас змяняе колер фону элемента, калі на яго наводзіцца паказальнік мышы, запускаючы анімацыю пераходу.
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
анімацыя прымяняецца для павароту скрынкі. 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;
}