Maketi aano
CSS3 Fa'aaliga Atonu E te Le'o silafiaina: Flexbox, Grid Layouts, Meatotino Fa'aleaganu'u, Su'iga, Animations, ma Tala'aga Tele
Pepa Sitaili Fa'aoso (CSS) o lo'o fa'aauau pea ona fa'atupuina ma o fa'aliliuga aupito lata mai e ono iai ni fa'ailoga e te le'o iloa. O nisi nei o faʻaleleia atili ma metotia faʻafeiloaʻi ma le CSS3, faʻatasi ai ma faʻataʻitaʻiga faʻailoga:
- Fa'atulagaina o Pusa Fa'alelei (Flexbox): se faiga fa'atulagaina e mafai ai e oe ona faia ni fa'aoga fetu'utu'una'i ma tali atu mo itulau uepi. Fa'atasi ai ma le flexbox, e faigofie ona e fa'aogaina ma tufatufa elemene i totonu o se atigipusa. i lenei faataitaiga, o le
.container
fa'aoga a le vasegadisplay: flex
e mafai ai le fa'atulagaina o le flexbox mode. O lejustify-content
meatotino ua seti icenter
e fa'ata'atia totonugalemu le elemene tamaiti i totonu o le koneteina. O lealign-items
meatotino ua seti icenter
ia fa'atotonugalemu le elemene tamaiti. O le.item
setiina e le vasega le lanu pito i tua ma le paluga mo le elemene o tamaiti.
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;
}
iʻuga
Elemene Tutotonu
- Fa'asologa o laina: se isi faiga fa'atulagaina e mafai ai ona e faia ni fa'asologa fa'apipi'i lavelave mo itulau uepi. Fa'atasi ai ma fa'asologa, e mafai ona e fa'amaoti laina ma koluma, ona tu'u lea o elemene i totonu o sela fa'apitoa o le fa'asologa. I lenei faataitaiga, o le
.grid-container
fa'aoga a le vasegadisplay: grid
e fa'aagaoioi ai le fa'atulagaina o fa'asologa. O legrid-template-columns
meatotino ua seti irepeat(2, 1fr)
e fai ai pou e lua e tutusa le lautele. O legap
meatotino e fa'atulaga le va i le va o sela fa'ata. O le.grid-item
vasega e fa'atulaga le lanu pito i tua ma fa'amau mo mea fa'asologa.
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;
}
iʻuga
Meatotino 1
Meatotino 2
Meatotino 3
Meatotino 4
- Suiga: CSS3 fa'afeiloa'i le tele o meatotino fou ma metotia mo le fa'atupuina o suiga i luga o itulau uepi. Mo se faataitaiga, o le
transition
e mafai ona fa'aoga meatotino e fa'aola ai suiga i meatotino CSS ile taimi. I lenei faataitaiga, o le.box
setiina e le vasega le lautele, maualuga, ma le lanu muamua o le talaaga mo le elemene. O letransition
meatotino ua seti ibackground-color 0.5s ease
e fa'aola suiga i le fanua lanu mea totino i luga o le afa sekone fa'atasi ai ma se galuega fa'afaigofie ile taimi. O le.box:hover
e suia e le vasega le lanu pito i tua o le elemene pe a o'o i luga le fa'ailoga o le isumu, ma fa'aoso ai le suiga o le animation.
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;
}
iʻuga
TAPĒINA
Lenei!
Lenei!
- Animations: O le CSS3 na fa'alauiloa mai ai le tele o meatotino fou ma metotia mo le fatuina o fa'afiafiaga i luga o itulau uepi. I lenei faʻataʻitaʻiga, ua matou faʻaopoopoina se animation e faʻaaoga ai le
animation
meatotino. Ua matou faauigaina a@keyframes
tulafono mo le animation, lea e faʻamaoti mai e tatau ona sui le pusa mai le 0 tikeri i le 90 tikeri ile umi ole 0.5 sekone. A fa'ae'e le pusa i luga, o lespin
fa'aoga le animation e sui ai le pusa. O leanimation-fill-mode
meatotino ua seti iforwards
ia mautinoa o lo'o tumau pea le tulaga mulimuli o le animation pe a uma.
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;
}
iʻuga
TAPĒINA
Lenei!
Lenei!
- CSS Meatotino Fa'apitoa: E lauiloa foi CSS fesuiaiga, o mea fa'aleaganu'u na fa'aofi mai ile CSS3. Latou te fa'atagaina oe e fa'amatala ma fa'aoga au lava mea fa'aleaganu'u ile CSS, lea e mafai ona fa'aoga e teu ma toe fa'aoga tau i au sitaili. O fesuiaiga CSS e iloa e se igoa e amata i vase lua, pei ole
--my-variable
. I lenei faʻataʻitaʻiga, matou te faʻamatalaina se fesuiaiga CSS e taʻua -primary-color ma tuʻuina atu i ai se tau o#007bff
, o se lanu lanumoana e masani ona faʻaaogaina e fai ma lanu muamua i le tele o mamanu. Ua matou faʻaogaina lenei fesuiaiga e seti ai lebackground-color
meatotino a se elemene faamau, e ala i le faaaogaina o levar()
galuega ma pasi i le igoa fesuia'i. O le a fa'aogaina ai le tau o le fesuiaiga e fai ma lanu pito i tua mo le ki.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Tala'aga Tele: O le CSS3 e mafai ai ona e faʻamaonia le tele o ata faʻapitoa mo se elemene, faʻatasi ai ma le malosi e pulea ai lona faʻatulagaina ma le faʻatulagaina o le faasologa. O le pito i tua e aofia ai ata e lua,
red.png
mablue.png
, o loʻo faʻapipiʻiina e faʻaaoga ai lebackground-image
meatotino. O le ata muamua,red.png
, o loʻo tuʻuina i le tulimanu pito i lalo taumatau o le elemene, ae o le ata lona lua,blue.png
, o lo'o tu'u i le tulimanu pito i luga agavale o le elemene. O lebackground-position
e fa'aaoga meatotino e pulea ai le tulaga o ata taitasi. O lebackground-repeat
e fa'aoga meatotino e pulea ai le toe fai o ata. O le ata muamua,red.png
, ua seti e aua le toe faia (no-repeat
), ae o le ata lona lua,blue.png
, ua seti e toe fai (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;
}