Content Marketing
Siffofin CSS3 Wataƙila Ba Ku Sani ba: Flexbox, Grid Layouts, Abubuwan Al'ada, Canje-canje, Rarrabawa, da Fage da yawa
Sheets Salon Cascading (CSS) ci gaba da haɓakawa kuma sabbin sigogin na iya samun wasu fasalulluka waɗanda ƙila ma ba za ku sani ba. Anan ga wasu manyan haɓakawa da hanyoyin da aka gabatar tare da CSS3, tare da misalan lambobi:
- Layout Akwatin Mai Sauƙi (Flexbox): yanayin shimfidawa wanda ke ba ka damar ƙirƙirar shimfidar wurare masu sassauƙa da amsawa don shafukan yanar gizo. Tare da flexbox, zaka iya daidaitawa cikin sauƙi da rarraba abubuwa a cikin akwati. n wannan misali, da
.container
class amfanidisplay: flex
don kunna yanayin shimfidar flexbox. Thejustify-content
an saita dukiya zuwacenter
zuwa a kwance a tsakiya sashin yara a cikin akwati. Thealign-items
an saita dukiya zuwacenter
zuwa a tsaye a tsakiyan sashin yara. The.item
aji yana saita kalar bangon baya da padding don ɓangaren yaro.
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;
}
Sakamako
Matsakaici Element
- Tsarin grid: wani yanayin shimfidar wuri wanda ke ba ka damar ƙirƙirar rikitattun shimfidar grid don shafukan yanar gizo. Tare da grid, zaku iya saka layuka da ginshiƙai, sannan sanya abubuwa cikin takamaiman sel na grid. A cikin wannan misali, da
.grid-container
class amfanidisplay: grid
don kunna yanayin shimfidar grid. Thegrid-template-columns
an saita dukiya zuwarepeat(2, 1fr)
don ƙirƙirar ginshiƙai guda biyu masu faɗi daidai. Thegap
dukiya tana saita tazara tsakanin sel grid. The.grid-item
aji yana saita launi na bangon baya da padding don abubuwan grid.
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;
}
Sakamako
Abu na 1
Abu na 2
Abu na 3
Abu na 4
- Sauye-sauye: CSS3 ya gabatar da sabbin kaddarori da dabaru don ƙirƙirar sauyi akan shafukan yanar gizo. Misali, da
transition
Ana iya amfani da kadarorin don raya canje-canje a cikin kaddarorin CSS akan lokaci. A cikin wannan misali, da.box
aji yana saita faɗi, tsayi, da launi na farko don kashi. Thetransition
an saita dukiya zuwabackground-color 0.5s ease
don raye-rayen canje-canje ga kayan launi na bango sama da rabin daƙiƙa tare da aikin sauƙi-cikin lokaci. The.box:hover
aji yana canza launin bangon kashi lokacin da mai nunin linzamin kwamfuta ke samansa, yana haifar da motsin motsi.
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;
}
Sakamako
Tsaida
Nan!
Nan!
- rayarwa: CSS3 ya gabatar da sabbin kaddarori da dabaru don ƙirƙirar rayarwa akan shafukan yanar gizo. A cikin wannan misali, mun ƙara wani animation ta amfani da
animation
dukiya. Mun ayyana a@keyframes
mulkin don rayarwa, wanda ke ƙayyade cewa akwatin ya kamata ya juya daga digiri 0 zuwa digiri 90 a kan tsawon 0.5 seconds. Lokacin da akwatin ya shawagi, daspin
Ana amfani da rayarwa don juya akwatin. Theanimation-fill-mode
an saita dukiya zuwaforwards
don tabbatar da cewa an riƙe yanayin ƙarshe na motsin rai bayan ya ƙare.
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;
}
Sakamako
Tsaida
Nan!
Nan!
- CSS Custom Properties: Har ila yau, da aka sani da CSS masu canji, An gabatar da kaddarorin al'ada a cikin CSS3. Suna ba ku damar ayyana da amfani da abubuwan kaddarorin naku na al'ada a cikin CSS, waɗanda za a iya amfani da su don adanawa da sake amfani da ƙima cikin fa'idodin salon ku. Ana gano masu canjin CSS da sunan da ke farawa da dashes biyu, kamar
--my-variable
. A cikin wannan misali, mun ayyana ma'anar CSS mai canzawa mai suna -primary-launi kuma muna ba shi darajar#007bff
, wanda shine launin shudi wanda aka fi amfani dashi azaman launi na farko a yawancin kayayyaki. Mun yi amfani da wannan canji don saitabackground-color
dukiya na wani maɓalli, ta amfani davar()
aiki da wucewa cikin sunan mai canzawa. Wannan zai yi amfani da ƙimar madaidaicin azaman launi na bango don maɓallin.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Abubuwan Fage Da yawa: CSS3 yana ba ku damar ƙididdige hotuna na baya da yawa don wani kashi, tare da ikon sarrafa tsarin sa da tari. Bayana ya ƙunshi hotuna guda biyu,
red.png
da kumablue.png
, wanda aka loda ta amfani dabackground-image
dukiya. Hoton farko,red.png
, an sanya shi a kusurwar dama ta ƙasa na element, yayin da hoto na biyu,blue.png
, an sanya shi a saman kusurwar hagu na kashi. Thebackground-position
Ana amfani da dukiya don sarrafa matsayi na kowane hoto. Thebackground-repeat
ana amfani da dukiya don sarrafa yadda hotuna ke maimaitawa. Hoton farko,red.png
, an saita don kar a maimaita (no-repeat
), yayin da hoto na biyu,blue.png
, an saita don maimaita (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;
}