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 vasega display: flex e mafai ai le fa'atulagaina o le flexbox mode. O le justify-content meatotino ua seti i center e fa'ata'atia totonugalemu le elemene tamaiti i totonu o le koneteina. O le align-items meatotino ua seti i center 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 vasega display: grid e fa'aagaoioi ai le fa'atulagaina o fa'asologa. O le grid-template-columns meatotino ua seti i repeat(2, 1fr) e fai ai pou e lua e tutusa le lautele. O le gap 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 le transition meatotino ua seti i background-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!
  • 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 le spin fa'aoga le animation e sui ai le pusa. O le animation-fill-mode meatotino ua seti i forwards 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!
  • 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 le background-color meatotino a se elemene faamau, e ala i le faaaogaina o le var() 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 ma blue.png, o loʻo faʻapipiʻiina e faʻaaoga ai le background-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 le background-position e fa'aaoga meatotino e pulea ai le tulaga o ata taitasi. O le background-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;
    }

    iʻuga

    Douglas Karr

    Douglas Karr o CMO o OpenINSIGHTS ma le na faavaeina le Martech Zone. Ua fesoasoani Douglas i le tele o amataga manuia o MarTech, ua fesoasoani i le filiga tatau o le sili atu i le $ 5 piliona i le mauaina o le Martech ma tupe teufaafaigaluega, ma o loʻo faʻaauau pea ona fesoasoani i kamupani i le faʻatinoina ma le otometi a latou faʻatauga ma maketi. Douglas ose suiga fa'atekinolosi fa'avaomalo fa'avaomalo ma MarTech fa'apitoa ma failauga. O Douglas foi o se tusitala lolomi o le Dummie's guide ma se tusi taʻitaʻi pisinisi.

    Faatatau Mataupu Faavae o

    Toe i le pito i luga
    lata

    Ua maua le Adblock

    Martech Zone e mafai ona tu'uina atu ia te oe lenei 'anotusi e aunoa ma se tau aua matou te fa'atupeina la matou 'upega tafa'ilagi e ala i tupe maua fa'asalalauga, so'oga fa'atasi, ma lagolago. Matou te fa'afetai pe a e aveese lau fa'asalalauga fa'asalalau a'o e va'ai i la matou saite.