Мазмұн Маркетинг
Сіз білмеуіңіз мүмкін 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
. Бұл мысалда –primary-color деп аталатын CSS айнымалысын анықтаймыз және оған мән береміз#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;
}