Inhalt Marketing

CSS3 Features déi Dir vläicht net bewosst sidd: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, a Multiple Backgrounds

Cascading Style Sheets (CSS) weider ze entwéckelen an déi lescht Versioune kënnen e puer Features hunn, déi Dir vläicht net emol bewosst sidd. Hei sinn e puer vun de grousse Verbesserungen a Methodologien agefouert mat CSS3, zesumme mat Code Beispiller:

  • Flexibel Box Layout (Flexbox): e Layoutmodus deen Iech erlaabt flexibel a reaktiounsfäeger Layouten fir Websäiten ze kreéieren. Mat Flexbox kënnt Dir Elementer an engem Container einfach ausrichten a verdeelen. n dësem Beispill, der .container Klass benotzt display: flex fir de flexbox Layoutmodus z'aktivéieren. Déi justify-content Propriétéit ass op center fir d'Kandelement am Container horizontal ze zentréieren. Déi align-items Propriétéit ass op center fir d'Kandelement vertikal ze zentréieren. Déi .item Klass setzt den Hannergrondfaarf a Padding fir d'Kandelement.

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

Resultat

zentréiert Element
  • Gitter Layout: en anere Layoutmodus deen Iech erlaabt komplex Gitter-baséiert Layouten fir Websäiten ze kreéieren. Mat Gitter kënnt Dir Reihen a Spalten spezifizéieren, an dann Elementer bannent spezifesch Zellen vum Gitter setzen. An dësem Beispill, der .grid-container Klass benotzt display: grid Gitter Layout Modus z'aktivéieren. Déi grid-template-columns Propriétéit ass op repeat(2, 1fr) fir zwou Saile vun der selwechter Breet ze kreéieren. Déi gap Property setzt d'Distanz tëscht Gitterzellen. Déi .grid-item Klass setzt d'Hannergrondfaarf an d'Padding fir d'Gitterartikelen.

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

Resultat

Artikel 1
Artikel 2
Artikel 3
Artikel 4
  • Iwwergäng: CSS3 huet eng Rei vun neien Eegeschaften an Techniken agefouert fir Iwwergäng op Websäiten ze kreéieren. Zum Beispill, de transition Eegeschafte kënne benotzt ginn fir Ännerungen an CSS Eegeschafte mat der Zäit ze animéieren. An dësem Beispill, der .box Klass setzt d'Breet, d'Héicht an d'initial Hannergrondfaarf fir d'Element. Déi transition Propriétéit ass op background-color 0.5s ease fir Ännerungen an der Hannergrondfaarfeigenschaft iwwer eng hallef Sekonn mat enger einfacher Timingfunktioun ze animéieren. Déi .box:hover Klass ännert d'Hannergrondfaarf vum Element wann de Mauszeiger driwwer ass, wat d'Iwwergangsanimatioun ausléist.

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

Resultat

Hover
Hei!
  • Animatiounen: CSS3 huet eng Rei vun neien Eegeschaften an Techniken agefouert fir Animatiounen op Websäiten ze kreéieren. An dësem Beispill hu mir eng Animatioun bäigefüügt mat der animation Propriétéit. Mir hunn eng definéiert @keyframes Regel fir d'Animatioun, déi spezifizéiert datt d'Këscht vun 0 Grad op 90 Grad iwwer eng Dauer vun 0.5 Sekonnen rotéiere soll. Wann d'Këscht iwwerhiewen ass, gëtt de spin Animatioun gëtt applizéiert fir d'Këscht ze rotéieren. Déi animation-fill-mode Propriétéit ass op forwards fir sécherzestellen datt den definitiven Zoustand vun der Animatioun erhale bleift nodeems se fäerdeg ass.

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

Resultat

Hover
Hei!
  • CSS Custom Properties: Och bekannt CSS Verännerlechen, Benotzerdefinéiert Eegeschafte goufen an CSS3 agefouert. Si erlaben Iech Är eege personaliséiert Eegeschaften an CSS ze definéieren an ze benotzen, déi benotzt kënne fir Wäerter an Äre Stylesheets ze späicheren an ze benotzen. CSS Variablen ginn identifizéiert mat engem Numm deen mat zwee Bindestrecke ufänkt, wéi z
    --my-variable. An dësem Beispill definéiere mir eng CSS Variabel genannt -primary-color a ginn et e Wäert vun #007bff, wat eng blo Faarf ass, déi allgemeng als primär Faarf a ville Designen benotzt gëtt. Mir hunn dës Variabel benotzt fir d' background-color Propriétéit vun engem Knäppche Element, andeems Dir de var() Funktioun a laanschtgoungen an der Variabel Numm. Dëst wäert de Wäert vun der Variabel als Hannergrondfaarf fir de Knäppchen benotzen.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Multiple Hannergrënn: CSS3 erlaabt Iech e puer Hannergrondbiller fir en Element ze spezifizéieren, mat der Fäegkeet fir seng Positionéierungs- a Stackuerdnung ze kontrolléieren. Den Hannergrond besteet aus zwee Biller, red.png an blue.png, déi gelueden sinn mat der background-image Propriétéit. Dat éischt Bild, red.png, ass um riets ënnen Eck vum Element positionéiert, während dat zweet Bild, blue.png, ass am lénksen ieweschten Eck vum Element positionéiert. Déi background-position Property gëtt benotzt fir d'Positionéierung vun all Bild ze kontrolléieren. Déi background-repeat Eegeschafte gëtt benotzt fir ze kontrolléieren wéi d'Biller widderhuelen. Dat éischt Bild, red.png, ass agestallt fir net ze widderhuelen (no-repeat), während dat zweet Bild, blue.png, ass agestallt fir ze widderhuelen (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;
    }

    Resultat

    Douglas Karr

    Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

    Verbonnen Artikelen

    Zréck erop zum Knäppchen
    Zoumaachen

    Adblock entdeckt

    Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.