ynhâld Marketing

CSS3-funksjes wêrfan jo miskien net bewust binne: Flexbox, Grid-layouts, oanpaste eigenskippen, transysjes, animaasjes en meardere eftergrûnen

Cascading Style Sheets (CSS) trochgean te ûntwikkeljen en de lêste ferzjes kinne guon funksjes hawwe wêrfan jo miskien net iens bewust binne. Hjir binne guon fan 'e grutte ferbetterings en metodologyen yntrodusearre mei CSS3, tegearre mei koadefoarbylden:

  • Fleksibele doaze-yndieling (Flexbox): in opmaak modus wêrmei jo te meitsjen fleksibele en responsive layouts foar websiden. Mei flexbox kinne jo eleminten maklik ôfstimme en fersprieden binnen in kontener. n dit foarbyld, de .container klasse brûkt display: flex om flexbox-yndielingsmodus yn te skeakeljen. De justify-content eigendom is ynsteld op center om it bernelemint horizontaal yn 'e kontener te sintrum. De align-items eigendom is ynsteld op center om it bernelemint fertikaal te sintrum. De .item klasse stelt de eftergrûnkleur en padding foar it bernelemint.

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

Resultaat

Centered elemint
  • Grid layout: in oare opmaakmodus wêrmei jo komplekse rasterbasearre opmaak foar websiden kinne meitsje. Mei raster kinne jo rigen en kolommen opjaan, en dan eleminten pleatse binnen spesifike sellen fan it raster. Yn dit foarbyld, de .grid-container klasse brûkt display: grid om de rasteryndielingsmodus yn te skeakeljen. De grid-template-columns eigendom is ynsteld op repeat(2, 1fr) om twa kolommen fan gelikense breedte te meitsjen. De gap eigenskip stelt de ôfstân tusken grid sellen. De .grid-item klasse stelt de eftergrûnkleur en padding foar de rasteritems yn.

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

Resultaat

Artikel 1
Artikel 2
Artikel 3
Artikel 4
  • Oergongen: CSS3 yntrodusearre in oantal nije eigenskippen en techniken foar it meitsjen fan transysjes op websiden. Bygelyks, de transition eigendom kin brûkt wurde om feroarings yn CSS-eigenskippen oer tiid te animearjen. Yn dit foarbyld, de .box klasse stelt de breedte, hichte en earste eftergrûnkleur foar it elemint yn. De transition eigendom is ynsteld op background-color 0.5s ease om feroarings oan 'e eftergrûnkleureigenskip oer in heale sekonde te animearjen mei in maklik-yn-út timingfunksje. De .box:hover klasse feroaret de eftergrûn kleur fan it elemint as de mûsoanwizer is oer it, trigger de oergong animaasje.

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

Resultaat

Hover
Hjir!
  • animaasjes: CSS3 yntrodusearre in oantal nije eigenskippen en techniken foar it meitsjen fan animaasjes op websiden. Yn dit foarbyld hawwe wy in animaasje tafoege mei de animation besit. Wy hawwe definiearre a @keyframes regel foar de animaasje, dy't spesifisearret dat it fak moat draaie fan 0 graden nei 90 graden oer in doer fan 0.5 sekonden. As de doaze wurdt hovered oer, de spin animaasje wurdt tapast om it fak te draaien. De animation-fill-mode eigendom is ynsteld op forwards om te soargjen dat de definitive steat fan 'e animaasje wurdt behâlden neidat it klear is.

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

Resultaat

Hover
Hjir!
  • CSS oanpaste eigenskippen: Ek bekind as CSS fariabelen, oanpaste eigenskippen waarden yntrodusearre yn CSS3. Se kinne jo jo eigen oanpaste eigenskippen definiearje en brûke yn CSS, dy't kinne wurde brûkt om wearden yn jo stylblêden op te slaan en opnij te brûken. CSS-fariabelen wurde identifisearre troch in namme dy't begjint mei twa streepkes, lykas
    --my-variable. Yn dit foarbyld definiearje wy in CSS-fariabele neamd -primary-color en jouwe it in wearde fan #007bff, dat is in blauwe kleur dy't faak brûkt wurdt as primêre kleur yn in protte ûntwerpen. Wy hawwe dizze fariabele brûkt om de background-color eigendom fan in knop elemint, mei help fan de var() funksje en trochjaan yn de fariabele namme. Dit sil de wearde fan 'e fariabele brûke as de eftergrûnkleur foar de knop.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Meardere eftergrûnen: CSS3 kinne jo opjaan meardere eftergrûn ôfbyldings foar in elemint, mei de mooglikheid om te kontrolearjen syn posisjonearring en Stacking folchoarder. De eftergrûn is gearstald út twa bylden, red.png en blue.png, dy't laden wurde mei de background-image besit. De earste ôfbylding, red.png, is pleatst oan 'e rjochter ûnderkant fan it elemint, wylst de twadde ôfbylding, blue.png, is pleatst oan de linker boppeste hoeke fan it elemint. De background-position eigendom wurdt brûkt om de posisjonearring fan elke ôfbylding te kontrolearjen. De background-repeat eigendom wurdt brûkt om te kontrolearjen hoe't de ôfbyldings werhelje. De earste ôfbylding, red.png, is ynsteld om net te werheljen (no-repeat), wylst de twadde ôfbylding, blue.png, is ynsteld om te werheljen (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;
    }

    Resultaat

    Douglas Karr

    Douglas Karr is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

    Related Articles

    Werom nei topknop
    Slute

    Adblock ûntdutsen

    Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.