Content Marketing

CSS3-funktioner, du måske ikke er opmærksom på: Flexbox, gitterlayouts, brugerdefinerede egenskaber, overgange, animationer og flere baggrunde

Cascading Style Sheets (CSS) fortsætter med at udvikle sig, og de seneste versioner kan have nogle funktioner, som du måske ikke engang er opmærksom på. Her er nogle af de store forbedringer og metoder introduceret med CSS3, sammen med kodeeksempler:

  • Fleksibelt bokslayout (Flexbox): en layouttilstand, der giver dig mulighed for at skabe fleksible og responsive layouts til websider. Med flexbox kan du nemt justere og fordele elementer i en container. i dette eksempel .container klasse bruger display: flex for at aktivere flexbox-layouttilstand. Det justify-content egenskab er indstillet til center at centrere det underordnede element vandret i beholderen. Det align-items egenskab er indstillet til center for at centrere det underordnede element lodret. Det .item klasse indstiller baggrundsfarven og polstringen for det underordnede element.

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

Centreret element
  • Tabellayout: en anden layouttilstand, der giver dig mulighed for at oprette komplekse gitterbaserede layouts til websider. Med gitter kan du angive rækker og kolonner og derefter placere elementer i bestemte celler i gitteret. I dette eksempel er .grid-container klasse bruger display: grid for at aktivere gitterlayouttilstand. Det grid-template-columns egenskab er indstillet til repeat(2, 1fr) for at skabe to kolonner med samme bredde. Det gap egenskab indstiller afstanden mellem gitterceller. Det .grid-item klasse indstiller baggrundsfarven og polstringen for gitterelementerne.

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

Item 1
Item 2
Item 3
Item 4
  • Overgange: CSS3 introducerede en række nye egenskaber og teknikker til at skabe overgange på websider. For eksempel transition egenskab kan bruges til at animere ændringer i CSS-egenskaber over tid. I dette eksempel er .box klasse indstiller bredden, højden og den oprindelige baggrundsfarve for elementet. Det transition egenskab er indstillet til background-color 0.5s ease til at animere ændringer af baggrundsfarveegenskaben over et halvt sekund med en let-ind-ud timing-funktion. Det .box:hover klasse ændrer elementets baggrundsfarve, når musemarkøren er over det, hvilket udløser overgangsanimationen.

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
Her!
  • Animationer: CSS3 introducerede en række nye egenskaber og teknikker til at skabe animationer på websider. I dette eksempel har vi tilføjet en animation ved hjælp af animation ejendom. Vi har defineret en @keyframes regel for animationen, som angiver, at boksen skal rotere fra 0 grader til 90 grader over en varighed på 0.5 sekunder. Når kassen holdes over, vil den spin animation anvendes til at rotere boksen. Det animation-fill-mode egenskab er indstillet til forwards for at sikre, at den endelige tilstand af animationen bevares, når den er færdig.

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
Her!
  • CSS brugerdefinerede egenskaber: Også kendt som CSS variabler, blev brugerdefinerede egenskaber introduceret i CSS3. De giver dig mulighed for at definere og bruge dine egne brugerdefinerede egenskaber i CSS, som kan bruges til at gemme og genbruge værdier i hele dine stylesheets. CSS-variabler identificeres med et navn, der starter med to bindestreger, som f.eks
    --my-variable. I dette eksempel definerer vi en CSS-variabel kaldet –primary-color og giver den en værdi på #007bff, som er en blå farve, der almindeligvis bruges som primærfarve i mange designs. Vi har brugt denne variabel til at indstille background-color egenskaben for et knapelement ved at bruge var() funktion og indtastning af variabelnavnet. Dette vil bruge værdien af ​​variablen som baggrundsfarve for knappen.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Flere baggrunde: CSS3 giver dig mulighed for at angive flere baggrundsbilleder for et element, med evnen til at kontrollere dets placering og stablingsrækkefølge. Baggrunden er sammensat af to billeder, red.png , blue.png, som indlæses ved hjælp af background-image ejendom. Det første billede, red.png, er placeret i nederste højre hjørne af elementet, mens det andet billede, blue.png, er placeret i elementets øverste venstre hjørne. Det background-position egenskaben bruges til at kontrollere placeringen af ​​hvert billede. Det background-repeat egenskaben bruges til at kontrollere, hvordan billederne gentages. Det første billede, red.png, er indstillet til ikke at gentage (no-repeat), mens det andet billede, blue.png, er indstillet til at gentage (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 OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

    Relaterede artikler

    Tilbage til toppen knap
    Luk

    Adblock fundet

    Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.