Marketing Content

Likarolo tsa CSS3 O kanna oa se Tseba ka tsona: Flexbox, Libopeho tsa Grid, Maemo a Tloaelehileng, Liphetoho, Lipopae, le Mehato e mengata.

Cascading Style Sheets (CSS) tsoela pele ho fetoha 'me liphetolelo tsa morao-rao li ka ba le likarolo tseo mohlomong u sa li tsebeng. Mona ke tse ling tsa lintlafatso tse kholo le mekhoa e hlahisitsoeng ka CSS3, hammoho le mehlala ea likhoutu:

  • Sebopeho sa Lebokose la Flexible (Flexbox): mokhoa oa ho beakanya o o lumellang ho theha meralo e feto-fetohang le e arabelang bakeng sa maqephe a tepo. Ka flexbox, o ka ikamahanya habonolo le ho aba likarolo ka har'a setshelo. n mohlala ona, the .container lisebelisoa tsa sehlopha display: flex ho nolofalletsa mokhoa oa sebopeho sa flexbox. The justify-content thepa e behiloe ho center ho tsepama setsing sa ngoana element ka har'a setshelo. The align-items thepa e behiloe ho center ho thethefatsa hare ho element ya ngoana. The .item sehlopha se beha bokamorao ba 'mala le padding bakeng sa karolo ea ngoana.

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

Phello

Centered Element
  • Sebopeho sa grid: mokhoa o mong oa tlhophiso o o lumellang ho theha meralo e rarahaneng e thehiloeng ho grid bakeng sa maqephe a tepo. Ka grid, o ka hlakisa mela le litšiea, ebe o beha likarolo ka har'a lisele tse itseng tsa grid. Mohlala ona, the .grid-container lisebelisoa tsa sehlopha display: grid ho nolofalletsa mokhoa oa sebopeho sa grid. The grid-template-columns thepa e behiloe ho repeat(2, 1fr) ho bopa dikholomo tse pedi tsa bophara bo lekanang. The gap thepa e beha sebaka pakeng tsa lisele tsa grid. The .grid-item sehlopha se beha bokamorao ba 'mala le padding bakeng sa lintho tsa grid.

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

Phello

Ntho ea 1
Ntho ea 2
Ntho ea 3
Ntho ea 4
  • Liphetoho: CSS3 e hlahisitse mefuta e mengata e mecha le mekhoa ea ho etsa liphetoho maqepheng a tepo. Ka mohlala, the transition thepa e ka sebelisoa ho phelisa liphetoho tsa thepa ea CSS ha nako e ntse e ea. Mohlala ona, the .box sehlopha se beha bophara, bophahamo, le 'mala oa bokamorao ba element. The transition thepa e behiloe ho background-color 0.5s ease ho phelisa liphetoho tsa bokamorao ba 'mala ka nako e fetang halofo ea motsotsoana ka ts'ebetso ea nako ea boiketlo ba ho tsoa. The .box:hover class e fetola 'mala oa bokamorao ba ntho ha pointer ea mouse e le holim'a eona, e etsa hore ho be le animation ea phetoho.

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

Phello

okaokele
Mona!
  • Litšoantšo: CSS3 e hlahisitse mefuta e mengata e mecha le mekhoa ea ho etsa lipopae maqepheng a tepo. Mohlaleng ona, re kentse animation ka ho sebelisa animation thepa. Re hlalositse a @keyframes molao bakeng sa animation, e bolelang hore lebokose le lokela ho potoloha ho tloha ho likhato tse 0 ho isa ho tse 90 nakong ea metsotsoana e 0.5. Ha lebokose le hovered ka holimo, the spin animation e sebelisoa ho potoloha lebokose. The animation-fill-mode thepa e behiloe ho forwards ho etsa bonnete ba hore boemo ba ho qetela ba animation bo a bolokoa ha bo qeta.

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

Phello

okaokele
Mona!
  • CSS Custom Properties: E boetse e tsejoa e le Mefuta e fapaneng ea CSS, thepa ea tloaelo e ile ea hlahisoa ho CSS3. Li u lumella ho hlalosa le ho sebelisa thepa ea hau ea tloaelo ho CSS, e ka sebelisoang ho boloka le ho sebelisa boleng bocha maqepheng a hau a setaele. Mefuta-futa ea CSS e khetholloa ka lebitso le qalang ka li-dashe tse peli, joalo ka
    --my-variable. Mohlala ona, re hlalosa mofuta oa CSS o bitsoang -primary-color mme o o fa boleng ba #007bff, e leng 'mala o moputsoa o atisang ho sebelisoa e le' mala o ka sehloohong meralong e mengata. Re sebelisitse phetoho ena ho theha background-color thepa ea konopo element, ka ho sebelisa var() tshebetso le ho fetisa lebitsong la phetoho. Sena se tla sebelisa boleng ba ho feto-fetoha joalo ka bokamorao ba 'mala oa konopo.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Mehaho e Mengata: CSS3 e u lumella ho hlakisa litšoantšo tse ngata tsa bokamorao bakeng sa element, ka bokhoni ba ho laola boemo ba eona le tatellano ea ho e bokella. Bokamorao bo entsoe ka litšoantšo tse peli, red.png 'me blue.png, tse kenngoeng ka ho sebelisa background-image thepa. Setšoantšo sa pele, red.png, e behiloe hukung e ka tlase e ka tlase ea element, ha setšoantšo sa bobeli, blue.png, e behiloe hukung e kaholimo ho le letšehali ea element. The background-position thepa e sebelisoa ho laola boemo ba setšoantšo ka seng. The background-repeat thepa e sebelisoa ho laola hore na litšoantšo li ipheta joang. Setšoantšo sa pele, red.png, e behiloe hore e se ke ea pheta (no-repeat), ha setšoantšo sa bobeli, blue.png, e hlophiselitsoe ho pheta-pheta (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;
    }

    Phello

    Douglas Karr

    Douglas Karr ke CMO ea Bula LITLHAKISO le mothehi oa Martech Zone. Douglas o thusitse batho ba bangata ba atlehileng ho qala ka MarTech, o thusitse boitelong bo nepahetseng ba chelete e fetang $5 bilione ho reka le matsete a Martech, mme o ntse a tsoela pele ho thusa lik'hamphani ho kenya ts'ebetsong le ho iketsetsa maano a bona a ho rekisa le ho bapatsa. Douglas ke setsebi le sebui sa MarTech se tsebahalang lefatšeng ka bophara. Douglas hape ke sengoli se hatisitsoeng sa tataiso ea Dummie le buka ea boetapele ba khoebo.

    Related Articles

    Konopo ea holimo
    Close

    Adblock e fumanwe

    Martech Zone e khona ho u fa litaba tsena ntle ho tefo hobane re etsa chelete sebakeng sa rona sa marang-rang ka lekeno la lipapatso, likhokahano tsa kopanelo le lithuso tsa lichelete. Re ka thabela ha o ka tlosa se thibelang lipapatso ha u ntse u sheba sebaka sa rona sa marang-rang.