мазмун Marketing
Сиз билбеши мүмкүн болгон 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;
}
жыйынтык
Hover
Мына!
Мына!
- Animations: 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;
}
жыйынтык
Hover
Мына!
Мына!
- 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;
}