CSS3 för nybörjare – Lär dig grunderna på svenska

av

Introduktion till CSS3

CSS3 är den senaste versionen av CSS (Cascading Style Sheets), språket som används för att styla och formatera webbsidor.

CSS3 introducerar många nya funktioner och möjligheter jämfört med tidigare versioner av CSS. Några av de viktigaste nyheterna i CSS3 är:

  • Runda hörn – Med CSS3 kan man enkelt skapa runda hörn på element med border-radius-egenskapen. Detta minskar behovet av bilder för att uppnå runda hörn.
  • Skuggor – Box och text shadows i CSS3 gör att man kan lägga skuggor på element utan att använda bilder.
  • Opacitet – Opacity-egenskapen gör att man kan ange transparens/genomskinlighet på ett enkelt sätt.
  • Övergångar – CSS3 introducerar övergångar (transitions) för animeringar när ett elements egenskaper ändras.
  • Transformationer – Med transform-egenskapen kan man rotera, skala och luta element.
  • Animationer – Keyframe-animationer gör att man kan skapa komplexa animationer med CSS3.
  • Gradienter – CSS3 har inbyggd support för gradient bakgrunder.
  • Mediafrågor – Medierfrågor ger större kontroll över stilregler baserat på enhetens skärmstorlek, orientering mm.

CSS3 är bakåtkompatibelt med tidigare versioner av CSS och webbläsare. Funktioner som inte stöds faller tillbaka på standard-CSS. Genom att använda CSS3 kan man skapa mer avancerade webbplatser och gränssnitt utan att behöva lika mycket bilder och Javascript.

CSS3-moduler

CSS3 är uppdelat i olika moduler som var och en fokuserar på en specifik del av stilmärkning. Modulstrukturen gör CSS3 extremt flexibelt och låter webbläsare implementera specifika funktioner utan att behöva stödja hela CSS3-specifikationen.

Detta betyder att olika webbläsare kan stödja olika CSS3-moduler. Vissa moduler har fått bredare stöd än andra. Det är därför viktigt att kontrollera stödet för specifika CSS3-egenskaper innan de används.

Några av de viktigaste CSS3-modulerna är:

  • Färg – Utvidgar färgvalet med rgba(), hsl(), hsla(), opacity.
  • Bakgrund och gradienter – Ger möjlighet att använda flera bakgrunder, bildstorlek, gradienter m.m.
  • Text – Ger mer kontroll över textgenomslag, skuggor, avstavning m.m.
  • Fonter – Ger stöd för @font-face, ladda ner typsnitt.
  • Boxar – Utvidgar möjligheter för boxmodellen med radie, skuggor och gradienter.
  • Layout – Ger nya layoutegenskaper som flexbox och grid.

Genom att dela upp CSS3 i moduler kan nya funktioner läggas till över tid utan att bryta befintlig kod. Detta gör att CSS3 kan utvecklas och förbättras kontinuerligt.

Runda hörn

CSS3 introducerade egenskapen border-radius som gör att du kan skapa element med runda hörn.

Genom att ange en border-radius kan du kontrollera hur runda hörn ett element ska ha. Egenskapen fungerar på alla element och du kan ange olika radier för varje hörn.

Här är ett exempel för att skapa ett element med runda hörn:

.box {
  border-radius: 10px; 
}

Detta ger boxen runda hörn med radie 10px på alla hörn.

För mer kontroll kan du ange olika värden för varje hörn:

.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

Du kan även ange radius i % för responsiva runda hörn.

Runda hörn fungerar på alla element som har en border, inklusive bilder, knappar, divs, och mycket mer. Det är ett enkelt sätt att skapa moderna, eleganta designelement på din webbplats.

Skuggor

CSS3 introducerade nya sätt att skapa skuggeffekter för element och text. De två viktigaste funktionerna är box-shadow och text-shadow.

box-shadow används för att lägga en skugga runt ett element. Syntaxen ser ut så här:

box-shadow: x-offset y-offset blur spread color;
  • x-offset anger hur mycket skuggan ska förskjutas horisontellt
  • y-offset anger den vertikala förskjutningen
  • blur anger oskärpan på skuggan, ju högre värde desto suddigare skugga
  • spread expanderar skuggan, positiva värden gör skuggan större
  • color anger färgen på skuggan

Exempel:

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);

Detta skapar en skugga 10px ner och till höger om elementet, med 5px oskärpa och svart färg på 50% opacitet.

text-shadow fungerar på liknande sätt men används för att skugga text. Syntaxen är:

text-shadow: x-offset y-offset blur color;

Exempel:


text-shadow: 2px 2px 2px black;

Med CSS3 går det alltså att på ett enkelt sätt lägga till skuggeffekter på element och text för att skapa mer avancerad visuell design.


Opacitet


CSS3 introducerade möjligheten att göra element genomskinliga med hjälp av opacity-egenskapen. Opacity anger hur genomskinligt ett element ska vara, där värdet 1 betyder helt ogenomskinligt och 0 helt genomskinligt.

Exempel:


div {
opacity: 0.5; /* Elementet blir 50% genomskinligt */
}

Vi kan alltså styra genomskinligheten i procent från 0 till 1. Detta gör att element kan överlappa varandra samtidigt som båda syns. Vi kan exempelvis placera en halvgenomskinlig text ovanpå en bakgrundsbild.

För färger introduceras även rgba()-notationen som gör att vi kan ange en färgs alfa-kanal (genomskinlighet). Vi anger rgb-värden som vanligt och lägger till ett värde mellan 0 och 1 för alfa-kanalen:


div {
background: rgba(255, 0, 0, 0.5); /* Röd färg 50% genomskinlig */
}

Med hjälp av opacity och rgba() kan vi alltså skapa intressanta genomskinliga effekter. Detta öppnar upp för nya kreativa möjligheter i layout och design.


Övergångar


CSS3 introducerar övergångar (transitions) som gör att vi kan animera ändringar av CSS-properties. Med övergångar kan vi få element att ändra utseende och position på ett smidigt och naturligt sätt.

För att lägga till en övergång anger vi transition-property, transition-duration, transition-timing-function och transition-delay.

Transition-property anger vilken CSS-property som ska animeras, till exempel background-color eller transform. Transition-duration anger hur lång tid övergången ska ta. Transition-timing-function styr hastigheten på animationen, till exempel linear, ease-in eller ease-out. Transition-delay anger en fördröjning innan övergången startar.

Genom att kombinera dessa properties kan vi skapa komplexa animationer när användaren interagerar med elementen på sidan. Övergångar förbättrar användarupplevelsen och gör gränssnittet mer levande. De bidrar också till att guida användarens fokus och uppmärksamhet på sidan.

Övergångar fungerar i alla moderna webbläsare och är enkla att implementera. De öppnar upp för nya möjligheter i webbdesign utan att behöva använda Flash, JavaScript eller video. Med bara några rader CSS-kod kan vi ge liv åt våra element och skapa dynamiska och interaktiva webbupplevelser.



Transformationer


Ett av de mest kraftfulla tilläggen i CSS3 är möjligheten att transformera element på en webbsida. Transformationer gör att vi kan rotera, skala, flytta och vrida element utan att behöva använda bilder eller skript. Det här öppnar upp för många nya möjligheter för interaktiva och dynamiska webbupplevelser.

Några av de vanligaste transformationerna är:

Rotera (rotate)

Med `rotate()` kan vi rotera ett element med ett visst antal grader. Till exempel:


.box {
transform: rotate(30deg);
}

Det här roterar .box 30 grader medurs. Vi kan även ange negativa värden för att rotera moturs.

Skala (scale)

För att skala ett element upp eller ner använder vi `scale()`. 1 är normal storlek, medan 2 dubblerar storleken och 0.5 halverar den.


.box {
transform: scale(2);
}

Det här dubblar storleken på .box. Vi kan skala element olika mycket på x- och y-axeln för intressanta effekter.

Flytta (translate)

`translate()` flyttar ett element horisontellt och/eller vertikalt. Vi anger förflyttningen i px, em, eller andra måttenheter.


.box {
transform: translate(100px, 50px);
}

Här flyttas .box 100px åt höger och 50px nedåt på sidan.

Vrida (skew)

`skew()` vrider ett element en viss grad längs x- eller y-axeln. Det vrider effektivt olika sidor olika mycket och skapar ett snedvridet utseende.

Med CSS3 transformationer kan vi alltså enkelt rotera, skala, flytta och vrida element för dynamiska och interaktiva effekter. Det finns många kreativa möjligheter!

Animationer

CSS3 introducerar möjligheten att animera HTML-element på webbsidor utan att behöva använda Flash eller JavaScript. Animeringar definieras med @keyframes-regeln som anger start- och slutpunkter för animationen.

För att animera ett element används animation-egenskapen. Exempel:


div {

animation-name: example;

animation-duration: 5s;

}

@keyframes example {

from {

width: 100px;

}

to {

width: 300px;  

}

}

Detta animera div-elementets bredd från 100px till 300px under 5 sekunder.

Andra användbara animationsegenskaper är animation-delay för att ange fördröjning innan animationen startar och animation-iteration-count för att ange hur många varv animationen ska köras.

Element kan få flera animationer genom att ange flera animation-name. Det går även att ange animation-direction för att ändra riktningen på animationen.

CSS-animationer är ett kraftfullt verktyg för att skapa interaktiva webbupplevelser utan tunga script. Det går att styra uppstart, varaktighet, loopning och mycket mer.



Bakgrund och gradienter

CSS3 introducerade flera nya möjligheter för att styla elementens bakgrunder.


Flera bakgrunder

Med CSS3 kan du ange flera bakgrundsbilder för ett element, separerade med kommatecken. Bakgrundsbilderna visas ovanpå varandra med den första bilden överst. Detta gör att du kan kombinera bakgrunder på ett flexibelt sätt.

css
div {
background:
url(image1.jpg),
url(image2.jpg),
url(image3.jpg);
}

Gradienter

CSS3 gradienter låter dig skapa mjuka färgövergångar som bakgrund. Det finns linjära gradienter som går i en riktning och radiala gradienter som går ut från en punkt. Gradienter ger ett modernt och dynamiskt utseende.


div {
background: linear-gradient(to bottom, red, blue);
}

För linjära gradienter anger du riktningen, t.ex. to bottom eller to left. För radiala gradienter anger du formen, t.ex. circle eller ellipse. Du kan också ange flera färgstopp för komplexa gradienter.


Bakgrundsstorlek

Med bakgrundsstorlek kan du styra hur en bakgrundsbild skastorleksändras. Tidigare var alternativen att bakgrunden skulle upprepas eller sträckas ut för att fylla hela elementet.

Nu kan du ange att bakgrunden ska innehålla sig inom elementet med `background-size: contain`, eller täcka hela elementet med `background-size: cover`. Detta ger större kontroll över bakgrunden.



Lämna en kommentar