Маркетингии Content
Хусусиятҳои 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
синф паҳнӣ, баландӣ ва ранги ибтидоии заминаро барои элемент муқаррар мекунад. Дарtransition
молу мулк муқаррар карда шудаастbackground-color 0.5s ease
барои аниматсия кардани тағирот дар моликияти ранги замина дар тӯли ним сония бо функсияи вақти осон. Дар.box:hover
class вақте ки нишоннамои муш дар болои он ҷойгир аст, ранги пасзаминаи элементро тағир медиҳад ва аниматсияи гузаришро ба вуҷуд меорад.
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
Ин ҷо!
Ин ҷо!
- мутаҳаррикро: 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;
}
Натиҷаи
Hover
Ин ҷо!
Ин ҷо!
- Хусусиятҳои фармоишии 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 ба шумо имкон медиҳад, ки тасвирҳои пасзаминаи сершуморро барои унсур бо қобилияти назорат кардани ҷойгиршавӣ ва тартиби stacking он муайян кунед. Замина аз ду тасвир иборат аст,
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;
}