Content Marketing

CSS3 Zvimiro Zvausingazive: Flexbox, Grid Layouts, Tsika Zvivakwa, Shanduko, Animations, uye Multiple Backgrounds.

Cascading Style Sheets (CSS) ramba uchishanduka uye shanduro dzichangoburwa dzinogona kunge dziine zvimwe zvaungasatomboziva. Heano mamwe makuru ekuvandudza uye nzira dzakaunzwa neCSS3, pamwe nemienzaniso yekodhi:

  • Flexible Bhokisi Layout (Flexbox): dhizaini modhi inobvumidza iwe kugadzira inochinjika uye inopindura marongero emapeji ewebhu. Ne flexbox, unogona nyore kurongedza uye kugovera zvinhu mukati memudziyo. n muenzaniso uyu .container kushandiswa kwekirasi display: flex kugonesa flexbox marongedzero. The justify-content pfuma yakaiswa center kuisa pakati nepakati chinhu chemwana mukati memudziyo. The align-items pfuma yakaiswa center kuisa pakati nepakati chinhu chemwana. The .item kirasi inoseta iyo yekumashure ruvara uye padding yechinhu chemwana.

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

mugumisiro

Centered Element
  • Grid marongerwo: imwe dhizaini modhi inobvumidza iwe kugadzira yakaoma grid-yakavakirwa marongero emapeji ewebhu. Negridi, unogona kutsanangura mitsara nemakoramu, wobva waisa zvinhu mukati memasero chaiwo egridi. Mumuenzaniso uyu, the .grid-container kushandiswa kwekirasi display: grid kugonesa grid marodhi. The grid-template-columns pfuma yakaiswa repeat(2, 1fr) kugadzira makoramu maviri ehupamhi hwakaenzana. The gap pfuma inoisa nzvimbo pakati pemaseru egridi. The .grid-item kirasi inoseta iyo yekumashure ruvara uye padding yezvinhu zvegridi.

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

mugumisiro

Item 1
Item 2
Item 3
Item 4
  • Shanduko: CSS3 yakaunza huwandu hwezvivakwa uye matekiniki ekugadzira shanduko pamapeji ewebhu. Somuenzaniso, the transition pfuma inogona kushandiswa kuita shanduko muCSS zvivakwa nekufamba kwenguva. Mumuenzaniso uyu, the .box kirasi inoseta hupamhi, kureba, uye yekutanga kumashure kwemavara echinhu. The transition pfuma yakaiswa background-color 0.5s ease kuita shanduko kune yekumashure ruvara pfuma pamusoro pehafu yesekondi nekureruka-mu-kunze kwekuita nguva. The .box:hover kirasi inoshandura iyo yekumashure ruvara rwechinhu kana mbeva pointer iri pamusoro payo, zvichikonzera shanduko yehupenyu.

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

mugumisiro

kuyengerera
Pano!
  • Animations: CSS3 yakaunza huwandu hwezvivakwa uye matekiniki ekugadzira mifananidzo pamapeji ewebhu. Mumuenzaniso uyu, tawedzera animation tichishandisa iyo animation pfuma. Takatsanangura a @keyframes mutemo weiyo animation, iyo inotsanangura kuti bhokisi rinofanira kutenderera kubva pa0 madhigirii kusvika 90 madhigirii pamusoro penguva yemasekonzi 0.5. Kana bhokisi richitenderedzwa pamusoro, iyo spin animation inoshandiswa kutenderedza bhokisi. The animation-fill-mode pfuma yakaiswa forwards kuve nechokwadi chekuti iyo yekupedzisira mamiriro eiyo animation inochengetwa kana yapera.

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

mugumisiro

kuyengerera
Pano!
  • CSS Custom Properties: Uyewo anozivikanwa se CSS zvakasiyana, zvivakwa zvetsika zvakaunzwa muCSS3. Vanokutendera kuti utsanangure uye ushandise yako yetsika zvivakwa muCSS, inogona kushandiswa kuchengeta nekushandisazve tsika mumashiti ako ese. CSS vhezheni dzinozivikanwa nezita rinotanga nemadheshi maviri, akadai
    --my-variable. Mumuenzaniso uyu, tinotsanangura shanduko yeCSS inonzi -primary-color uye tinoipa kukosha kwe #007bff, inova ruvara rwebhuruu runowanzoshandiswa seruvara rwekutanga mumagadzirirwo mazhinji. Isu takashandisa shanduko iyi kuseta iyo background-color pfuma yebhatani chinhu, nekushandisa iyo var() kushanda uye kudarika muzita rekuchinja. Izvi zvinoshandisa kukosha kwekusiyana semuvara wekumashure webhatani.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Multiple Backgrounds: CSS3 inokutendera kuti utaure akawanda ekumashure mifananidzo yechinhu, nekugona kudzora mamiriro ayo uye kurongeka. Kumashure kunoumbwa nemifananidzo miviri, red.png uye blue.png, iyo inotakurwa uchishandisa iyo background-image pfuma. Mufananidzo wekutanga, red.png, yakamira pakona yekurudyi yepasi pechinhu, nepo yechipiri mufananidzo, blue.png, inomisikidzwa kuruboshwe kumusoro kwekona yechinhu. The background-position pfuma inoshandiswa kudzora kuiswa kwemufananidzo wega wega. The background-repeat pfuma inoshandiswa kudzora kuti mifananidzo inodzokorora sei. Mufananidzo wekutanga, red.png, yakagadzirirwa kusadzokorora (no-repeat), nepo mufananidzo wechipiri, blue.png, yakagadzirirwa kudzokorora (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;
    }

    mugumisiro

    Douglas Karr

    Douglas Karr ndiye CMO OpenINSIGHTS uye muvambi we Martech Zone. Douglas akabatsira akawanda ekubudirira kweMarTech kutanga, akabatsira mukushingairira kweanopfuura madhora mashanu emadhora mukutenga nekudyara kweMartech, uye anoenderera mberi nekubatsira makambani kuita nekuita otomatiki nzira dzawo dzekutengesa nekutengesa. Douglas inyanzvi inozivikanwa pasi rese yedhijitari uye MarTech nyanzvi uye mutauri. Douglas zvakare munyori akaburitswa wegwaro raDummie uye bhuku rehutungamiriri hwebhizinesi.

    Related Articles

    Kudzoka kumusoro
    pedyo

    Adblock Yaonekwa

    Martech Zone inokwanisa kukupa izvi zvemukati pasina muripo nekuti isu tinoita mari saiti yedu kuburikidza nemari yekushambadza, affiliate links, uye kutsigira. Tinozotenda kana iwe ukabvisa yako ad blocker iwe paunoona yedu saiti.