Content Marketing

Siffofin CSS3 Wataƙila Ba Ku Sani ba: Flexbox, Grid Layouts, Abubuwan Al'ada, Canje-canje, Rarrabawa, da Fage da yawa

Sheets Salon Cascading (CSS) ci gaba da haɓakawa kuma sabbin sigogin na iya samun wasu fasalulluka waɗanda ƙila ma ba za ku sani ba. Anan ga wasu manyan haɓakawa da hanyoyin da aka gabatar tare da CSS3, tare da misalan lambobi:

  • Layout Akwatin Mai Sauƙi (Flexbox): yanayin shimfidawa wanda ke ba ka damar ƙirƙirar shimfidar wurare masu sassauƙa da amsawa don shafukan yanar gizo. Tare da flexbox, zaka iya daidaitawa cikin sauƙi da rarraba abubuwa a cikin akwati. n wannan misali, da .container class amfani display: flex don kunna yanayin shimfidar flexbox. The justify-content an saita dukiya zuwa center zuwa a kwance a tsakiya sashin yara a cikin akwati. The align-items an saita dukiya zuwa center zuwa a tsaye a tsakiyan sashin yara. The .item aji yana saita kalar bangon baya da padding don ɓangaren yaro.

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

Sakamako

Matsakaici Element
  • Tsarin grid: wani yanayin shimfidar wuri wanda ke ba ka damar ƙirƙirar rikitattun shimfidar grid don shafukan yanar gizo. Tare da grid, zaku iya saka layuka da ginshiƙai, sannan sanya abubuwa cikin takamaiman sel na grid. A cikin wannan misali, da .grid-container class amfani display: grid don kunna yanayin shimfidar grid. The grid-template-columns an saita dukiya zuwa repeat(2, 1fr) don ƙirƙirar ginshiƙai guda biyu masu faɗi daidai. The gap dukiya tana saita tazara tsakanin sel grid. The .grid-item aji yana saita launi na bangon baya da padding don abubuwan 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;
}

Sakamako

Abu na 1
Abu na 2
Abu na 3
Abu na 4
  • Sauye-sauye: CSS3 ya gabatar da sabbin kaddarori da dabaru don ƙirƙirar sauyi akan shafukan yanar gizo. Misali, da transition Ana iya amfani da kadarorin don raya canje-canje a cikin kaddarorin CSS akan lokaci. A cikin wannan misali, da .box aji yana saita faɗi, tsayi, da launi na farko don kashi. The transition an saita dukiya zuwa background-color 0.5s ease don raye-rayen canje-canje ga kayan launi na bango sama da rabin daƙiƙa tare da aikin sauƙi-cikin lokaci. The .box:hover aji yana canza launin bangon kashi lokacin da mai nunin linzamin kwamfuta ke samansa, yana haifar da motsin motsi.

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

Sakamako

Tsaida
Nan!
  • rayarwa: CSS3 ya gabatar da sabbin kaddarori da dabaru don ƙirƙirar rayarwa akan shafukan yanar gizo. A cikin wannan misali, mun ƙara wani animation ta amfani da animation dukiya. Mun ayyana a @keyframes mulkin don rayarwa, wanda ke ƙayyade cewa akwatin ya kamata ya juya daga digiri 0 zuwa digiri 90 a kan tsawon 0.5 seconds. Lokacin da akwatin ya shawagi, da spin Ana amfani da rayarwa don juya akwatin. The animation-fill-mode an saita dukiya zuwa forwards don tabbatar da cewa an riƙe yanayin ƙarshe na motsin rai bayan ya ƙare.

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

Sakamako

Tsaida
Nan!
  • CSS Custom Properties: Har ila yau, da aka sani da CSS masu canji, An gabatar da kaddarorin al'ada a cikin CSS3. Suna ba ku damar ayyana da amfani da abubuwan kaddarorin naku na al'ada a cikin CSS, waɗanda za a iya amfani da su don adanawa da sake amfani da ƙima cikin fa'idodin salon ku. Ana gano masu canjin CSS da sunan da ke farawa da dashes biyu, kamar
    --my-variable. A cikin wannan misali, mun ayyana ma'anar CSS mai canzawa mai suna -primary-launi kuma muna ba shi darajar #007bff, wanda shine launin shudi wanda aka fi amfani dashi azaman launi na farko a yawancin kayayyaki. Mun yi amfani da wannan canji don saita background-color dukiya na wani maɓalli, ta amfani da var() aiki da wucewa cikin sunan mai canzawa. Wannan zai yi amfani da ƙimar madaidaicin azaman launi na bango don maɓallin.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Abubuwan Fage Da yawa: CSS3 yana ba ku damar ƙididdige hotuna na baya da yawa don wani kashi, tare da ikon sarrafa tsarin sa da tari. Bayana ya ƙunshi hotuna guda biyu, red.png da kuma blue.png, wanda aka loda ta amfani da background-image dukiya. Hoton farko, red.png, an sanya shi a kusurwar dama ta ƙasa na element, yayin da hoto na biyu, blue.png, an sanya shi a saman kusurwar hagu na kashi. The background-position Ana amfani da dukiya don sarrafa matsayi na kowane hoto. The background-repeat ana amfani da dukiya don sarrafa yadda hotuna ke maimaitawa. Hoton farko, red.png, an saita don kar a maimaita (no-repeat), yayin da hoto na biyu, blue.png, an saita don maimaita (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;
    }

    Sakamako

    Douglas Karr

    Douglas Karr shine CMO Bude INSIGHTS kuma wanda ya kafa Martech Zone. Douglas ya taimaka da yawa na nasara MarTech farawa, ya taimaka a cikin ƙwazo na sama da $5 biliyan a Martech saye da zuba jari, kuma ya ci gaba da taimaka wa kamfanoni wajen aiwatar da sarrafa sarrafa tallace-tallace da dabarun talla. Douglas ƙwararren ƙwararren dijital ne na duniya kuma ƙwararren MarTech kuma mai magana. Douglas kuma marubuci ne da aka buga na jagorar Dummie da kuma littafin jagoranci na kasuwanci.

    shafi Articles

    Komawa zuwa maɓallin kewayawa
    Close

    An Gano Adblock

    Martech Zone zai iya ba ku wannan abun cikin ba tare da farashi ba saboda muna yin monetize da rukunin yanar gizon mu ta hanyar kudaden talla, hanyoyin haɗin gwiwa, da tallafi. Za mu yi godiya idan za ku cire mai hana tallan ku yayin da kuke duba rukunin yanar gizon mu.