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 brukerdisplay: flex
for å aktivere flexbox-layoutmodus. Dejustify-content
eiendommen er satt tilcenter
for å sentrere det underordnede elementet horisontalt i beholderen. Dealign-items
eiendommen er satt tilcenter
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 brukerdisplay: grid
for å aktivere rutenettoppsettmodus. Degrid-template-columns
eiendommen er satt tilrepeat(2, 1fr)
for å lage to kolonner med lik bredde. Degap
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. Detransition
eiendommen er satt tilbackground-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!
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, visesspin
animasjon brukes for å rotere boksen. Deanimation-fill-mode
eiendommen er satt tilforwards
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!
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 å angibackground-color
egenskapen til et knappeelement, ved å brukevar()
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
ogblue.png
, som lastes inn ved hjelp avbackground-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. Debackground-position
egenskapen brukes til å kontrollere plasseringen av hvert bilde. Debackground-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;
}