Content Marketing

CSS3-funksjoner du kanskje ikke er klar over: Flexbox, rutenettoppsett, egendefinerte egenskaper, overganger, animasjoner og flere bakgrunner

Cascading Style Sheets (CSS) fortsetter å utvikle seg og de nyeste versjonene kan ha noen funksjoner som du kanskje ikke engang er klar over. Her er noen av de viktigste forbedringene og metodene introdusert med CSS3, sammen med kodeeksempler:

  • Fleksibel boksoppsett (Flexbox): en layoutmodus som lar deg lage fleksible og responsive layouter for nettsider. Med flexbox kan du enkelt justere og fordele elementer i en beholder. n dette eksempelet .container klasse bruker display: flex for å aktivere flexbox-layoutmodus. De justify-content eiendommen er satt til center for å sentrere det underordnede elementet horisontalt i beholderen. De align-items eiendommen er satt til center for å sentrere det underordnede elementet vertikalt. De .item klasse setter bakgrunnsfargen og polstringen for det underordnede elementet.

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

Sentrert element
  • Rutenettoppsett: en annen layoutmodus som lar deg lage komplekse rutenettbaserte oppsett for nettsider. Med rutenett kan du spesifisere rader og kolonner, og deretter plassere elementer i bestemte celler i rutenettet. I dette eksemplet er .grid-container klasse bruker display: grid for å aktivere rutenettoppsettmodus. De grid-template-columns eiendommen er satt til repeat(2, 1fr) for å lage to kolonner med lik bredde. De gap egenskap angir avstanden mellom rutenettceller. De .grid-item klasse setter bakgrunnsfargen og polstringen for rutenettelementene.

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

Sak 1
Sak 2
Sak 3
Sak 4
  • overganger: CSS3 introduserte en rekke nye egenskaper og teknikker for å lage overganger på nettsider. For eksempel transition egenskap kan brukes til å animere endringer i CSS-egenskaper over tid. I dette eksemplet er .box klasse angir bredden, høyden og den opprinnelige bakgrunnsfargen for elementet. De transition eiendommen er satt til background-color 0.5s ease for å animere endringer i bakgrunnsfargeegenskapen i løpet av et halvt sekund med en lett-inn-ut tidsfunksjon. De .box:hover klasse endrer bakgrunnsfargen til elementet når musepekeren er over det, og utløser overgangsanimasjonen.

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

Sveve
Her!
  • animasjoner: CSS3 introduserte en rekke nye egenskaper og teknikker for å lage animasjoner på nettsider. I dette eksemplet har vi lagt til en animasjon ved hjelp av animation eiendom. Vi har definert en @keyframes regel for animasjonen, som spesifiserer at boksen skal rotere fra 0 grader til 90 grader over en varighet på 0.5 sekunder. Når boksen holdes over, vises spin animasjon brukes for å rotere boksen. De animation-fill-mode eiendommen er satt til forwards for å sikre at den endelige tilstanden til animasjonen beholdes etter at den er ferdig.

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

Sveve
Her!
  • Egendefinerte CSS-egenskaper: Også kjent som CSS-variabler, ble tilpassede egenskaper introdusert i CSS3. De lar deg definere og bruke dine egne tilpassede egenskaper i CSS, som kan brukes til å lagre og gjenbruke verdier gjennom stilarkene dine. CSS-variabler identifiseres med et navn som starter med to bindestreker, som f.eks
    --my-variable. I dette eksemplet definerer vi en CSS-variabel kalt –primærfarge og gir den en verdi på #007bff, som er en blåfarge som vanligvis brukes som primærfarge i mange design. Vi har brukt denne variabelen til å angi background-color egenskapen til et knappeelement, ved å bruke var() funksjon og innlevering av variabelnavnet. Dette vil bruke verdien til variabelen som bakgrunnsfarge for knappen.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Flere bakgrunner: CSS3 lar deg spesifisere flere bakgrunnsbilder for et element, med muligheten til å kontrollere posisjonering og stablingsrekkefølge. Bakgrunnen er satt sammen av to bilder, red.png og blue.png, som lastes inn ved hjelp av background-image eiendom. Det første bildet, red.png, er plassert nederst til høyre i elementet, mens det andre bildet, blue.png, er plassert øverst til venstre på elementet. De background-position egenskapen brukes til å kontrollere plasseringen av hvert bilde. De background-repeat egenskapen brukes til å kontrollere hvordan bildene gjentas. Det første bildet, red.png, er satt til ikke å gjenta (no-repeat), mens det andre bildet, blue.png, er satt til å gjenta (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 er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

    Relaterte artikler

    Tilbake til toppen-knappen
    Lukke

    Annonseblokkering oppdaget

    Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.