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 papa display: flex e ho'ā i ke ʻano hoʻonohonoho flexbox. ʻO ka justify-content waiwai i hoonohoia i center e hoʻokaʻawale i ke ʻano keiki i loko o ka pahu. ʻO ka align-items waiwai i hoonohoia i center 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 papa display: grid e ho'ā i ke ʻano hoʻonohonoho grid. ʻO ka grid-template-columns waiwai i hoonohoia i repeat(2, 1fr) e hana i elua kolamu like laula. ʻO ka gap 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 ka transition waiwai i hoonohoia i background-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
  • 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, ka spin Hoʻohana ʻia ka animation e hoʻohuli i ka pahu. ʻO ka animation-fill-mode waiwai i hoonohoia i forwards 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
  • ʻ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 ka background-color waiwai o kekahi mea pihi, ma ka hoohana ana i ka var() 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 a blue.png, i hoʻouka ʻia me ka hoʻohana ʻana i ka background-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 ka background-position hoʻohana ʻia ka waiwai e hoʻomalu i ke kūlana o kēlā me kēia kiʻi. ʻO ka background-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;
    }

    hualoa'a

    Douglas Karr

    Douglas Karr he CMO o OpenINSIGHTS a me ka mea nana i hookumu i ka Martech Zone. Ua kōkua ʻo Douglas i ka nui o nā hoʻomaka ʻana o MarTech, ua kōkua i ka hoʻomaʻamaʻa pono ʻana ma luna o $ 5 bil i nā loaʻa a me nā hoʻopukapuka kālā ʻo Martech, a hoʻomau i ke kōkua ʻana i nā hui i ka hoʻokō ʻana a me ka hoʻomaʻamaʻa ʻana i kā lākou kūʻai aku a me nā hoʻolālā kūʻai. ʻO Douglas kahi hoʻololi kikohoʻe i ʻike ʻia ma ka honua a me ka loea a me ka ʻōlelo a MarTech. He mea kākau ʻo Douglas i kahi alakaʻi a Dummie a me kahi puke alakaʻi ʻoihana.

    nā Articles

    E hoʻi i ke pihiʻaoʻao
    kokoke

    ʻIke ʻia ʻo Adblock

    Martech Zone hiki iā ia ke hāʻawi iā ʻoe i kēia ʻike me ka uku ʻole no ka mea ke hoʻolilo nei mākou i kā mākou pūnaewele ma o ka loaʻa kālā hoʻolaha, nā loulou pili, a me nā kākoʻo. Mahalo mākou inā e wehe ʻoe i kāu mea hoʻolaha hoʻolaha i kou nānā ʻana i kā mākou pūnaewele.