NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
UnoEuro rabatkode

Hvad er CSS3?
4 - CSS3

Tilbage   Næste    Oversigt

CSS3 er den nye standard, som er fastsat til at skulle overtage for CSS2, bedre kendt som bare CSS. CSS3 vil naturligvis være 100% bagud kompatibel, så det vil ikke være nødvendigt, at ændre eksisterende CSS designs for at sikre at de stadig fungerer - webbrowsere vil altid understøtte CSS2!

Faktisk kan man tænke på CSS3 som en udvidelse af CSS, da næsten alle de gamle egenskaber i CSS2 er taget med over i CSS3. Derfor er det en god ide, at lære de mest basale ting i CSS, inden man kaster sig ud i de nye tiltag i CSS3.

CSS3 tilbyder en lang række nye måder, hvorpå du kan style dine sider. Udviklings-teamet omkring CSS3 mente, at det gamle CSS var for komplekst til at opdatere i én omgang, og derfor er CSS3 blevet til i moduler. Nogle af disse moduler er:

  • Box modellen
  • Liste modulet
  • Link modulet
  • Tale modulet
  • Baggrund og kanter modulet
  • Tekst effekt modulet

Et eksempel på en ny funktion i CSS3, er rotation af elementer såsom divs. Nedenfor har vi roteret en div 50 grader. Hvis du ikke kan se at den er roteret eller det bare ser forkert ud, så er det fordi din browser ikke understøtter CSS3. I dette tilfælde bør du opdatere, så du kan være med hvor det er sjovt!

Dette er en Div.
Dette er den samme Div, bare roteret.


CSS koden til den roterede div ser således ud:

#roteretdiv
{
width:100px;
height:75px;
background-color:#EF8510; border:1px solid black; transform:rotate(50deg); -ms-transform:rotate(50deg); /* IE 9 */ -moz-transform:rotate(50deg); /* Firefox */ -webkit-transform:rotate(50deg); /* Safari and Chrome */ -o-transform:rotate(50deg); /* Opera */ }

Som du kan se anvendes width, height, background-color og border, som jo alle er egenskaber fra "den gamle" CSS. De resterende egenskaber i eksemplet hører til CSS3.

Andre nye tiltag i CSS3 omfatter runde hjørner, skygge-effekter, opacitet og animationer. For eksempel kan man med CSS3 animationer slippe for at implementere alt for meget Flash på ens hjemmeside, da man nu som webdesigner blot kan kode animationer såsom billeder der scroller ned af siden og knapper der skifter farve.

Når man vælger at benytte sig af CSS3, skal man være opmærksom på, at de fleste gamle browser-versioner ikke understøtter hverken CSS3 eller HTML5. CSS3 og HTML5 er dog efterhånden rigtig godt implementeret i alle de nye browsere, og derfor vil der ikke gå længe før at alle der anvender bare en nogenlunde ny browser vil kunne køre CSS3 og HTML5 uden problemer.

Afslutningsvis kan man konkludere, at CSS3 og HTML5 sammen har langt grundlaget for den næste store tidsalder indenfor webudvikling, og at det bare er med at komme med på vognen og få det lært

Hvis du ønsker du at lære CSS3, så tilbyder vi her på NemProgrammering.dk en lang række video-vejledninger for begyndere. Se dem her: Gratis online CSS3 kursus for begyndere.


Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!