Ábhar Margaíochta
Gnéithe CSS3 nach féidir leat a bheith ar an eolas fúthu: Bosca Flex, Leaganacha Eangaí, Airíonna Saincheaptha, Aistrithe, Beochan agus Cúlraí Il
Stílbhileoga Cascáideacha (CSS) leanúint ar aghaidh ag éabhlóidiú agus d’fhéadfadh gnéithe áirithe a bheith sna leaganacha is déanaí nach fiú a bheith ar an eolas fúthu. Seo cuid de na feabhsuithe agus na modheolaíochtaí móra a tugadh isteach le CSS3, mar aon le samplaí cóid:
- Leagan Amach Bosca Solúbtha (Flexbox): modh leagan amach a ligeann duit leagan amach solúbtha agus sofhreagrach a chruthú do leathanaigh ghréasáin. Le flexbox, is féidir leat eilimintí a ailíniú agus a dháileadh go héasca laistigh de choimeádán. n sampla seo, an
.container
úsáidí rangadisplay: flex
chun modh leagan amach flexbox a chumasú. Tá anjustify-content
tá maoin socraithe gocenter
chun an eilimint linbh a lárú go cothrománach laistigh den choimeádán. Tá analign-items
tá maoin socraithe gocenter
chun an eilimint linbh a lárú go hingearach. Tá an.item
leagann an rang an dath cúlra agus an stuáil don eilimint leanbh.
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;
}
Toradh
Eilimint Láraithe
- Leagan amach greille: modh leagan amach eile a ligeann duit leagan amach casta bunaithe ar ghreille a chruthú do leathanaigh ghréasáin. Le greille, is féidir leat sraitheanna agus colúin a shonrú, agus ansin gnéithe a chur laistigh de chealla ar leith den ghreille. Sa sampla seo, tá an
.grid-container
úsáidí rangadisplay: grid
chun modh leagan amach greille a chumasú. Tá angrid-template-columns
tá maoin socraithe gorepeat(2, 1fr)
chun dhá cholún ar chomhleithead a chruthú. Tá angap
socraíonn maoin an spásáil idir cealla greille. Tá an.grid-item
leagann an rang an dath cúlra agus an stuáil le haghaidh na míreanna greille.
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;
}
Toradh
Mír 1
Mír 2
Mír 3
Mír 4
- Aistrithe: Thug CSS3 isteach roinnt airíonna agus teicnící nua chun aistrithe a chruthú ar leathanaigh ghréasáin. Mar shampla, an
transition
is féidir maoin a úsáid chun athruithe ar airíonna CSS a bheochan le himeacht ama. Sa sampla seo, tá an.box
leagann an rang leithead, airde, agus dath cúlra tosaigh an eilimint. Tá antransition
tá maoin socraithe gobackground-color 0.5s ease
chun athruithe ar airí dath an chúlra thar leath soicind a bheochan le feidhm ama éascaíochta isteach. Tá an.box:hover
athraíonn an rang dath cúlra na heiliminte nuair a bhíonn an pointeoir luiche os a chionn, rud a chuireann tús leis an mbeochan trasdula.
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;
}
Toradh
Hover
Anseo!
Anseo!
- Íomhánna Beo: Thug CSS3 isteach roinnt airíonna agus teicnící nua chun beochan a chruthú ar leathanaigh ghréasáin. Sa sampla seo, chuireamar beochan leis ag baint úsáide as an
animation
maoin. Táimid sainithe a@keyframes
riail don bheochan, a shonraíonn gur chóir an bosca a rothlú ó 0 céim go 90 céim thar thréimhse 0.5 soicind. Nuair a bhíonn an bosca hovered os a chionn, anspin
cuirtear beochan i bhfeidhm chun an bosca a rothlú. Tá ananimation-fill-mode
tá maoin socraithe goforwards
a chinntiú go gcoimeádtar staid deiridh an bheochana tar éis dó críochnú.
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;
}
Toradh
Hover
Anseo!
Anseo!
- Airíonna Saincheaptha CSS: Chomh maith leis sin ar a dtugtar Athróga CSS, tugadh isteach airíonna saincheaptha i CSS3. Ligeann siad duit d'airíonna saincheaptha féin a shainiú agus a úsáid i CSS, ar féidir iad a úsáid chun luachanna a stóráil agus a athúsáid ar fud do stílbhileoga. Sainaithnítear athróga CSS trí ainm a thosaíonn le dhá dhas, mar shampla
--my-variable
. Sa sampla seo, sainmhínímid athróg CSS ar a dtugtar -primary-color agus tugaimid luach de#007bff
, a bhfuil dath gorm a úsáidtear go coitianta mar dath príomhúil i go leor dearaí. Bhaineamar úsáid as an athróg seo chun anbackground-color
airí eiliminte cnaipe, trí úsáid a bhaint as anvar()
feidhm agus pas san ainm athróg. Úsáidfidh sé seo luach an athróg mar dhath cúlra an chnaipe.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Cúlraí Il: Ligeann CSS3 duit íomhánna cúlra iolracha a shonrú le haghaidh eilimint, leis an gcumas a ordú suite agus cruachta a rialú. Tá an cúlra comhdhéanta de dhá íomhá,
red.png
agusblue.png
, atá luchtaithe ag baint úsáide as anbackground-image
maoin. An chéad íomhá,red.png
, suite ag an gcúinne ar dheis ag bun an eilimint, agus an dara íomhá,blue.png
, suite ag an gcúinne uachtarach ar chlé den eilimint. Tá anbackground-position
úsáidtear maoin chun suíomh gach íomhá a rialú. Tá anbackground-repeat
úsáidtear an t-airí chun an dóigh a n-athdhéantar na híomhánna a rialú. An chéad íomhá,red.png
, socraithe chun gan athrá (no-repeat
), agus an dara íomhá,blue.png
, socraithe chun athuair (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;
}