Content Marketing

Mga Feature sa CSS3 Mahimong Wala Nimo Mahibaloan: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, ug Multiple Backgrounds

Cascading Style Sheet (CSS) nagpadayon sa pag-uswag ug ang pinakabag-o nga mga bersyon mahimong adunay pipila ka mga bahin nga tingali wala nimo nahibal-an. Ania ang pipila sa mga dagkong kalamboan ug pamaagi nga gipaila sa CSS3, uban sa mga pananglitan sa code:

  • Flexible nga Layout sa Kahon (Flexbox): usa ka layout mode nga nagtugot kanimo sa paghimo og flexible ug responsive nga mga layout alang sa mga web page. Uban sa flexbox, dali nimo ma-align ug maapod-apod ang mga elemento sa sulod sa usa ka sudlanan. n niini nga pananglitan, ang .container gamit sa klase display: flex aron mahimo ang flexbox layout mode. Ang justify-content kabtangan gitakda sa center sa horizontally center sa bata nga elemento sulod sa sudlanan. Ang align-items kabtangan gitakda sa center sa vertically center sa bata nga elemento. Ang .item Ang klase nagtakda sa kolor sa background ug padding alang sa elemento sa bata.

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

resulta

Nakasentro nga Elemento
  • Layout sa grid: laing layout mode nga nagtugot kanimo sa paghimo og komplikadong grid-based nga mga layout alang sa mga web page. Uban sa grid, mahimo nimong ipiho ang mga laray ug kolum, ug dayon ibutang ang mga elemento sulod sa piho nga mga selyula sa grid. Niini nga pananglitan, ang .grid-container gamit sa klase display: grid aron mahimo ang grid layout mode. Ang grid-template-columns kabtangan gitakda sa repeat(2, 1fr) sa paghimo sa duha ka mga kolum sa managsama nga gilapdon. Ang gap Ang kabtangan nagtakda sa gilay-on tali sa mga selula sa grid. Ang .grid-item Ang klase nagtakda sa kolor sa background ug padding alang sa mga butang sa 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;
}

resulta

Item 1
Item 2
Item 3
Item 4
  • Mga transisyon: Gipaila sa CSS3 ang daghang bag-ong mga kabtangan ug mga teknik sa paghimo og mga transisyon sa mga panid sa web. Pananglitan, ang transition ang propyedad mahimong gamiton aron ma-animate ang mga kausaban sa CSS properties sa paglabay sa panahon. Niini nga pananglitan, ang .box Ang klase nagtakda sa gilapdon, gitas-on, ug inisyal nga kolor sa background alang sa elemento. Ang transition kabtangan gitakda sa background-color 0.5s ease aron i-animate ang mga pagbag-o sa kolor sa background nga kabtangan sa tunga sa segundo nga adunay usa ka dali nga pag-in-out nga function sa oras. Ang .box:hover Gibag-o sa klase ang kolor sa background sa elemento kung naa na ang pointer sa mouse, nga nagpalihok sa animation sa pagbalhin.

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

resulta

Lutaw
Dinhi!
  • animation: Gipaila sa CSS3 ang daghang bag-ong mga kabtangan ug mga teknik sa paghimo og mga animation sa mga panid sa web. Niini nga pananglitan, nagdugang kami og animation gamit ang animation kabtangan. Atong gihubit a @keyframes lagda alang sa animation, nga nagtino nga ang kahon kinahanglan magtuyok gikan sa 0 degrees ngadto sa 90 degrees sa gidugayon nga 0.5 segundos. Sa diha nga ang kahon gipalupad sa ibabaw, ang spin Ang animation gigamit aron i-rotate ang kahon. Ang animation-fill-mode kabtangan gitakda sa forwards aron maseguro nga ang kataposang kahimtang sa animation mapabilin human kini mahuman.

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

resulta

Lutaw
Dinhi!
  • CSS Custom Properties: Gitawag usab nga CSS variables, gipaila-ila ang custom nga mga kabtangan sa CSS3. Gitugotan ka nila sa paghubit ug paggamit sa imong kaugalingon nga naandan nga mga kabtangan sa CSS, nga magamit sa pagtipig ug paggamit pag-usab sa mga kantidad sa imong mga stylesheet. Ang mga variable sa CSS giila sa usa ka ngalan nga nagsugod sa duha ka dash, sama sa
    --my-variable. Niini nga pananglitan, among gihubit ang usa ka variable nga CSS nga gitawag og -primary-color ug hatagan kini og bili sa #007bff, nga usa ka asul nga kolor nga sagad gigamit ingon usa ka panguna nga kolor sa daghang mga disenyo. Gigamit namon kini nga variable aron itakda ang background-color kabtangan sa usa ka elemento sa buton, pinaagi sa paggamit sa var() function ug pagpasa sa variable nga ngalan. Gamiton niini ang bili sa variable isip kolor sa background alang sa buton.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Daghang Background: Gitugotan ka sa CSS3 sa pagpiho sa daghang mga imahe sa background alang sa usa ka elemento, nga adunay katakus nga makontrol ang pagkahan-ay sa pagpahimutang ug pag-stack niini. Ang background gilangkuban sa duha ka mga imahe, red.png ug blue.png, nga gikarga gamit ang background-image kabtangan. Ang una nga imahe, red.png, nahimutang sa tuo nga ubos nga suok sa elemento, samtang ang ikaduhang hulagway, blue.png, nahimutang sa wala sa ibabaw nga suok sa elemento. Ang background-position Ang kabtangan gigamit aron makontrol ang posisyon sa matag imahe. Ang background-repeat Ang kabtangan gigamit aron makontrol kung giunsa pagbalik ang mga imahe. Ang una nga imahe, red.png, gitakda nga dili na masubli (no-repeat), samtang ang ikaduhang hulagway, blue.png, gitakdang balikon (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;
    }

    resulta

    Douglas Karr

    Douglas Karr mao ang CMO sa OpenINSIGHTS ug ang nagtukod sa Martech Zone. Gitabangan ni Douglas ang daghang mga malampuson nga mga pagsugod sa MarTech, nakatabang sa tungod sa kakugi nga kapin sa $5 bilyon sa mga pagkuha ug pamuhunan sa Martech, ug nagpadayon sa pagtabang sa mga kompanya sa pagpatuman ug pag-automate sa ilang mga estratehiya sa pagbaligya ug pagpamaligya. Si Douglas usa ka internasyonal nga giila nga digital nga pagbag-o ug eksperto ug mamumulong sa MarTech. Si Douglas usa usab ka gipatik nga tagsulat sa usa ka giya ni Dummie ug usa ka libro sa pagpangulo sa negosyo.

    Nalangkit nga mga Artikulo

    Balik sa ibabaw nga button
    Close

    Nakit-an ang Adblock

    Martech Zone makahatag kanimo niini nga sulod nga walay bayad tungod kay among gi-monetize ang among site pinaagi sa ad revenue, affiliate links, ug sponsorships. Mapasalamaton kami kung imong tangtangon ang imong ad blocker samtang imong gitan-aw ang among site.