maʻiʻo ke kūʻai akuʻana
Nā hiʻohiʻona CSS3 ʻaʻole ʻoe e ʻike: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Backgrounds
Nā Pepa Kaila Holoi (CSS) e hoʻomau i ka ulu ʻana a loaʻa paha i nā mana hou kekahi mau hiʻohiʻona āu i ʻike ʻole ai. Eia kekahi o nā hoʻomaikaʻi nui a me nā ʻano hana i hoʻokomo ʻia me CSS3, me nā hiʻohiʻona code:
- ʻO ka hoʻolālā pahu maʻalahi (Flexbox): he ʻano hoʻolālā e hiki ai iā ʻoe ke hana i nā hoʻolālā maʻalahi a pane no nā ʻaoʻao pūnaewele. Me ka flexbox, hiki iā ʻoe ke hoʻonohonoho maʻalahi a puʻunaue i nā mea i loko o kahi pahu. n keia laana, ka
.container
hoohana papadisplay: flex
e ho'ā i ke ʻano hoʻonohonoho flexbox. ʻO kajustify-content
waiwai i hoonohoia icenter
e hoʻokaʻawale i ke ʻano keiki i loko o ka pahu. ʻO kaalign-items
waiwai i hoonohoia icenter
e hoʻokuʻu i ke kikowaena o ke keiki. ʻO ka.item
hoʻonohonoho ka papa i ka waihoʻoluʻu a me ka uhi no ka mea keiki.
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;
}
hualoa'a
ʻElemu Kauwaena
- Ka hoʻolālā pae: ʻO kahi ʻano hoʻolālā ʻē aʻe e hiki ai iā ʻoe ke hana i nā hoʻonohonoho hoʻonohonoho paʻakikī no nā ʻaoʻao pūnaewele. Me ka mākia, hiki iā ʻoe ke kuhikuhi i nā lālani a me nā kolamu, a laila kau i nā mea i loko o nā keena kikoʻī o ka mākia. Ma kēia laʻana, ka
.grid-container
hoohana papadisplay: grid
e ho'ā i ke ʻano hoʻonohonoho grid. ʻO kagrid-template-columns
waiwai i hoonohoia irepeat(2, 1fr)
e hana i elua kolamu like laula. ʻO kagap
Hoʻonohonoho ka waiwai i ke kaʻawale ma waena o nā pūnaewele puni honua. ʻO ka.grid-item
Hoʻonohonoho ka papa i ka waihoʻoluʻu kāʻei a me ka uhi no nā mea kiko.
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;
}
hualoa'a
Helu 1
Helu 2
Helu 3
Helu 4
- Nā hoʻololi: Ua hoʻolauna ʻo CSS3 i kekahi mau waiwai a me nā ʻenehana hou no ka hana ʻana i nā hoʻololi ma nā ʻaoʻao pūnaewele. No ka laʻana, ka
transition
hiki ke hoʻohana i ka waiwai e hoʻololi i nā waiwai CSS i ka manawa. Ma kēia laʻana, ka.box
hoʻonohonoho ka papa i ka laulā, ke kiʻekiʻe, a me ka waihoʻoluʻu kumu mua no ka mea. ʻO katransition
waiwai i hoonohoia ibackground-color 0.5s ease
e hoʻolalelale i nā hoʻololi i ka waiwai waihoʻoluʻu hope ma luna o ka hapalua kekona me kahi hana manawa maʻalahi. ʻO ka.box:hover
Hoʻololi ka papa i ka waihoʻoluʻu kāʻei o ka mea i ka wā e kau ai ke kuhikuhi ʻiole ma luna o ia, e hoʻomaka ana i ka animation hoʻololi.
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;
}
hualoa'a
Hover
Eia
Eia
- ka pāpaho: Ua hoʻolauna ʻo CSS3 i kekahi mau waiwai a me nā ʻenehana hou no ka hana ʻana i nā animation ma nā ʻaoʻao pūnaewele. Ma kēia hiʻohiʻona, ua hoʻohui mākou i kahi animation me ka hoʻohana ʻana i ka
animation
waiwai. Ua wehewehe mākou a@keyframes
lula no ka animation, e kuhikuhi ana e hoololi ka pahu mai 0 degere a 90 degere ma kahi o 0.5 kekona. Ke kau ʻia ka pahu ma luna, kaspin
Hoʻohana ʻia ka animation e hoʻohuli i ka pahu. ʻO kaanimation-fill-mode
waiwai i hoonohoia iforwards
e hoʻopaʻa ʻia ke kūlana hope o ka animation ma hope o ka pau ʻana.
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;
}
hualoa'a
Hover
Eia
Eia
- ʻO nā waiwai maʻamau CSS: Ua'ike pū'ia Nā loli CSS, ua hoʻokomo ʻia nā waiwai maʻamau i CSS3. Hāʻawi lākou iā ʻoe e wehewehe a hoʻohana i kāu mau waiwai maʻamau i CSS, hiki ke hoʻohana ʻia no ka mālama ʻana a hoʻohana hou i nā waiwai i kāu mau stylesheets. ʻIke ʻia nā ʻano hoʻololi CSS e kahi inoa e hoʻomaka me nā kaha ʻelua, e like me
--my-variable
. Ma kēia hiʻohiʻona, wehewehe mākou i kahi ʻano CSS i kapa ʻia -primary-color a hāʻawi iā ia i ka waiwai o#007bff
, ʻo ia ka waihoʻoluʻu polū i hoʻohana mau ʻia ma ke ʻano he kala mua i nā hoʻolālā he nui. Ua hoʻohana mākou i kēia hoʻololi e hoʻonohonoho i kabackground-color
waiwai o kekahi mea pihi, ma ka hoohana ana i kavar()
hana a me ka hele ʻana i ka inoa hoʻololi. E hoʻohana kēia i ka waiwai o ka mea hoʻololi e like me ke kala hope no ke pihi.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Nā Kūlana Nui: Hiki iā CSS3 ke kuhikuhi i nā kiʻi hope he nui no kahi mea, me ka hiki ke hoʻomalu i kona kūlana a me ka hoʻonohonoho ʻana. Ua haku ʻia ke kua i nā kiʻi ʻelua,
red.png
ablue.png
, i hoʻouka ʻia me ka hoʻohana ʻana i kabackground-image
waiwai. ʻO ke kiʻi mua,red.png
, ua hoʻonoho ʻia ma ke kihi ʻākau lalo o ka mea, ʻoiai ke kiʻi ʻelua,blue.png
, aia ma ka ʻaoʻao hema hema o ka mea. ʻO kabackground-position
hoʻohana ʻia ka waiwai e hoʻomalu i ke kūlana o kēlā me kēia kiʻi. ʻO kabackground-repeat
hoʻohana ʻia ka waiwai e hoʻomalu i ka hana hou ʻana o nā kiʻi. ʻO ke kiʻi mua,red.png
, ua hoʻonohonoho ʻia ʻaʻole e hana hou (no-repeat
), ʻoiai ke kiʻi ʻelua,blue.png
, ua hoʻonohonoho ʻia e hana hou (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;
}