Ukukhangisa Okuqukethwe

Izici ze-CSS3 Ongeke Uzazi Ngazo: I-Flexbox, Izakhiwo Zegridi, Izakhiwo Zangokwezifiso, Ushintsho, Opopayi, Nezingemuva Eziningi

AmaSpredishithi esitayela se-Cascading (CSS) qhubeka nokushintsha futhi izinguqulo zakamuva zingase zibe nezici ongase ungazi nakancane ngazo. Nazi ezinye zentuthuko enkulu kanye nezindlela ezethulwe nge-CSS3, kanye nezibonelo zekhodi:

  • I-Flexible Box Layout (Flexbox): imodi yesakhiwo ekuvumela ukuthi udale izakhiwo eziguquguqukayo neziphendulayo zamakhasi ewebhu. Nge-flexbox, ungakwazi ukuqondanisa kalula futhi usabalalise izinto ngaphakathi kwesiqukathi. n lesi sibonelo, i .container ukusetshenziswa kwekilasi display: flex ukuze unike amandla imodi yesakhiwo se-flexbox. I justify-content impahla isethwe ukuze center ukubeka phakathi nendawo i-elementi yengane phakathi kwesiqukathi. I align-items impahla isethwe ukuze center ukuze umise phakathi ngokuqondile into yengane. I .item ikilasi lisetha umbala wangemuva kanye ne-padding ye-elementi yengane.

i-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;
}

Result

Isici Esimaphakathi
  • Isakhiwo segridi: enye imodi yesakhiwo ekuvumela ukuthi udale izakhiwo eziyinkimbinkimbi ezisekelwe kugridi zamakhasi ewebhu. Ngegridi, ungacacisa imigqa namakholomu, bese ubeka izici ngaphakathi kwamaseli athile wegridi. Kulesi sibonelo, i- .grid-container ukusetshenziswa kwekilasi display: grid ukuze unike amandla imodi yesakhiwo segridi. I grid-template-columns impahla isethwe ukuze repeat(2, 1fr) ukwakha amakholomu amabili anobubanzi obulinganayo. I gap impahla isetha isikhala phakathi kwamaseli egridi. I .grid-item ikilasi libeka umbala wangemuva kanye nokuphediswa kwezinto zegridi.

i-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;
}

Result

Into 1
Into 2
Into 3
Into 4
  • Izinguquko: I-CSS3 yethule inani lezakhiwo ezintsha namasu okudala izinguquko emakhasini ewebhu. Ngokwesibonelo, i transition impahla ingasetshenziswa ukwenza izinguquko kuzakhiwo ze-CSS ngokuhamba kwesikhathi. Kulesi sibonelo, i- .box ikilasi libeka ububanzi, ubude, nombala wangemuva wokuqala wesici. I transition impahla isethwe ukuze background-color 0.5s ease ukuze uphilise izinguquko kumbala ongemuva ngaphezu kwesigamu sesekhondi ngokusebenza kwesikhathi sokungena kalula. I .box:hover ikilasi lishintsha umbala wangemuva we-elementi uma isikhombi segundane siphezu kwaso, okucupha ukugqwayiza koshintsho.

i-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;
}

Result

I-Hover
Lapha!
  • Izithombe: I-CSS3 yethule inani lezakhiwo ezintsha namasu okudala izithombe ezinyakazayo emakhasini ewebhu. Kulesi sibonelo, sengeze ukugqwayiza sisebenzisa i- animation impahla. Sichaze a @keyframes umthetho wokugqwayiza, ocacisa ukuthi ibhokisi kufanele lijikeleze ukusuka ku-0 degrees ukuya ku-90 degrees esikhathini esingamasekhondi angu-0.5. Lapho ibhokisi lihanjiswa phezulu, i- spin ukugqwayiza kusetshenziselwa ukuzungezisa ibhokisi. I animation-fill-mode impahla isethwe ukuze forwards ukuqinisekisa ukuthi isimo sokugcina sokugqwayiza siyagcinwa ngemva kokuqeda.

i-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;
}

Result

I-Hover
Lapha!
  • Izakhiwo Zangokwezifiso ze-CSS: Obeye aziwe njengo Izinguquko ze-CSS, izakhiwo ngokwezifiso zethulwa ku-CSS3. Zikuvumela ukuthi uchaze futhi usebenzise izakhiwo zakho zangokwezifiso ku-CSS, ezingasetshenziswa ukugcina nokusebenzisa kabusha amanani kuwo wonke amashidi akho esitayela. Okuguquguqukayo kwe-CSS kukhonjwa ngegama eliqala ngamadeshi amabili, njengokuthi
    --my-variable. Kulesi sibonelo, sichaza okuguquguqukayo kwe-CSS okubizwa -primary-color futhi sikunikeze inani #007bff, okuwumbala oluhlaza okwesibhakabhaka ovame ukusetshenziswa njengombala oyinhloko kumiklamo eminingi. Sisebenzise lokhu okuguquguqukayo ukusetha i- background-color impahla yesici senkinobho, ngokusebenzisa i- var() umsebenzi nokudlulisa egameni eliguquguqukayo. Lokhu kuzosebenzisa inani lokuguquguquka njengombala ongemuva wenkinobho.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Izizinda Eziningi: I-CSS3 ikuvumela ukuthi ucacise izithombe eziningi zangemuva ze-elementi, enekhono lokulawula ukuma kwayo nokuhleleka kwesitaki. Ingemuva lakhiwe izithombe ezimbili, red.png futhi blue.png, ezilayishwa kusetshenziswa i background-image impahla. Isithombe sokuqala, red.png, ibekwe ekhoneni elingezansi kwesokudla le-elementi, kuyilapho isithombe sesibili, blue.png, ibekwe ekhoneni eliphezulu kwesokunxele le-elementi. I background-position impahla isetshenziselwa ukulawula ukuma kwesithombe ngasinye. I background-repeat impahla isetshenziselwa ukulawula ukuthi izithombe ziphinda kanjani. Isithombe sokuqala, red.png, isethwe ukuthi ingaphindi (no-repeat), kuyilapho isithombe sesibili, blue.png, isethwe ukuthi iphinde (repeat).

    i-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;
    }

    Result

    Douglas Karr

    Douglas Karr i-CMO ye VulaINSIGHTS kanye nomsunguli we Martech Zone. UDouglas usize inqwaba yeziqalo eziphumelelayo ze-MarTech, uye wasiza ekukhuthaleni okungaphezu kuka-$5 bil ekuthengeni nasekutshalweni kwe-Martech, futhi uyaqhubeka nokusiza izinkampani ekusebenziseni nasekuzenzeleni amasu azo okuthengisa nokumaketha. UDouglas uyingcweti yokuguqula idijithali eyaziwa emhlabeni wonke kanye nesikhulumi se-MarTech. UDouglas futhi ungumbhali oshicilelwe wencwadi kaDummie kanye nencwadi yobuholi bebhizinisi.

    Izihloko ezihlobene Nalesi

    Buyela emuva kunkinobho phezulu
    Close

    I-Adblock itholiwe

    Martech Zone iyakwazi ukukunikeza lokhu okuqukethwe ngaphandle kwenkokhiso ngoba senza imali ngesayithi yethu ngemali engenayo yezikhangiso, izixhumanisi ezingaphansi, noxhaso. Singajabula uma ungasusa i-ad blocker yakho njengoba ubuka isayithi lethu.