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 brugerdisplay: flex
for at aktivere flexbox-layouttilstand. Detjustify-content
egenskab er indstillet tilcenter
at centrere det underordnede element vandret i beholderen. Detalign-items
egenskab er indstillet tilcenter
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 brugerdisplay: grid
for at aktivere gitterlayouttilstand. Detgrid-template-columns
egenskab er indstillet tilrepeat(2, 1fr)
for at skabe to kolonner med samme bredde. Detgap
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. Dettransition
egenskab er indstillet tilbackground-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!
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 denspin
animation anvendes til at rotere boksen. Detanimation-fill-mode
egenskab er indstillet tilforwards
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!
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 indstillebackground-color
egenskaben for et knapelement ved at brugevar()
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 afbackground-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. Detbackground-position
egenskaben bruges til at kontrollere placeringen af hvert billede. Detbackground-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;
}