Content Marketing
CSS3-funktioner du kanske inte är medveten om: Flexbox, rutnätslayouter, anpassade egenskaper, övergångar, animationer och flera bakgrunder
Cascading Style Sheets (CSS) fortsätter att utvecklas och de senaste versionerna kan ha vissa funktioner som du kanske inte ens är medveten om. Här är några av de stora förbättringarna och metoderna som introducerats med CSS3, tillsammans med kodexempel:
- Flexibel boxlayout (Flexbox): ett layoutläge som låter dig skapa flexibla och responsiva layouter för webbsidor. Med flexbox kan du enkelt rikta in och fördela element i en container. n detta exempel
.container
klass använderdisplay: flex
för att aktivera flexbox layoutläge. Dejustify-content
fastigheten är inställd påcenter
för att horisontellt centrera det underordnade elementet i behållaren. Dealign-items
fastigheten är inställd påcenter
för att centrera det underordnade elementet vertikalt. De.item
klass ställer in bakgrundsfärgen och stoppningen för det underordnade 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
Centrerat element
- Rutnätslayout: ett annat layoutläge som låter dig skapa komplexa rutnätsbaserade layouter för webbsidor. Med rutnät kan du ange rader och kolumner och sedan placera element i specifika celler i rutnätet. I det här exemplet är
.grid-container
klass använderdisplay: grid
för att aktivera rutnätslayoutläge. Degrid-template-columns
fastigheten är inställd pårepeat(2, 1fr)
för att skapa två kolumner med samma bredd. Degap
egenskapen anger avståndet mellan rutnätsceller. De.grid-item
klass ställer in bakgrundsfärgen och stoppningen för rutnätsobjekten.
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
Objektet 1
Objektet 2
Objektet 3
Objektet 4
- övergångar: CSS3 introducerade ett antal nya egenskaper och tekniker för att skapa övergångar på webbsidor. Till exempel
transition
egenskap kan användas för att animera ändringar i CSS-egenskaper över tid. I det här exemplet är.box
klass anger bredd, höjd och initial bakgrundsfärg för elementet. Detransition
fastigheten är inställd påbackground-color 0.5s ease
för att animera ändringar av bakgrundsfärgegenskapen under en halv sekund med en lätt-in-ut timing-funktion. De.box:hover
klass ändrar bakgrundsfärgen för elementet när muspekaren är över det, vilket utlöser övergångsanimeringen.
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
Hovra
Här!
Här!
- animationer: CSS3 introducerade ett antal nya egenskaper och tekniker för att skapa animationer på webbsidor. I det här exemplet har vi lagt till en animation med hjälp av
animation
fast egendom. Vi har definierat en@keyframes
regel för animeringen, som anger att rutan ska rotera från 0 grader till 90 grader under en varaktighet på 0.5 sekunder. När lådan hålls över, visasspin
animering används för att rotera rutan. Deanimation-fill-mode
fastigheten är inställd påforwards
för att säkerställa att det slutliga tillståndet för animeringen behålls efter att den är klar.
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
Hovra
Här!
Här!
- Anpassade CSS-egenskaper: Också känd som CSS-variabler, introducerades anpassade egenskaper i CSS3. De låter dig definiera och använda dina egna anpassade egenskaper i CSS, som kan användas för att lagra och återanvända värden i dina stilmallar. CSS-variabler identifieras med ett namn som börjar med två bindestreck, som t.ex
--my-variable
. I det här exemplet definierar vi en CSS-variabel som heter –primary-color och ger den ett värde på#007bff
, som är en blå färg som vanligtvis används som primärfärg i många mönster. Vi har använt den här variabeln för att ställa inbackground-color
egenskapen för ett knappelement, genom att användavar()
funktion och skicka in variabelnamnet. Detta kommer att använda variabelns värde som bakgrundsfärg för knappen.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Flera bakgrunder: CSS3 låter dig ange flera bakgrundsbilder för ett element, med möjligheten att styra dess positionering och staplingsordning. Bakgrunden består av två bilder,
red.png
ochblue.png
, som laddas med hjälp avbackground-image
fast egendom. Den första bilden,red.png
, är placerad i det nedre högra hörnet av elementet, medan den andra bilden,blue.png
, är placerad i elementets övre vänstra hörn. Debackground-position
egenskapen används för att styra placeringen av varje bild. Debackground-repeat
egenskapen används för att styra hur bilderna upprepas. Den första bilden,red.png
, är inställd på att inte upprepas (no-repeat
), medan den andra bilden,blue.png
, är inställd på att upprepa (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;
}