Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 

skriv ut »

CSS - effekter

Vad är CSS och varför ska du använda det?

Innehåll och struktur
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte fanns i HTML standarden. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webläsaren. Då samma mall används för varje dokument behöver inte webläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.

Tillgänglighet
En målsättning med CSS är att läsaren ska kunna påverka utseendet av dokumentet när sidorna läses i webläsaren vilket inte alltid har varit populärt bland författarna av dokumenten då förändringar kan påverka webplatsens layout. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på websidor. Tillgänglighet är ett av ledorden när framtidens webplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet. Det innebär att många webplatser som byggts med layout som första prioritet inte fungerar om de använder tex Frames, Iframes, Imagemaps, java, javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer, Flash, Shockwave, PDF-dokument osv. Många funktioner som används idag går då alltså bort helt... (läs mer om W3C och webstandards »)

CSS levels
CSS finns specificerat i olika "nivåer" där CSS1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (boxar) som tidigare bara varit möjligt med tabeller (tables). CSS2 har förbättrats och finns i version CSS21 men kommer att ersättas av CSS3 som idag inte är helt färdig. Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS1 »  -  CSS2 »  -  CSS3 »

TIPS! CSS har begränsat stöd i framförallt äldre webläsare men även i IE6. Den webläsare som bäst följer specifikationerna från W3C är Firefox - detta gäller framförallt CSS2- positionering ». Använd i första hand Firefox när du testar dina CSS-layoter för att se det korrekta resultatet och anpassa sedan koden till IE vid behov. Läs mer om Firefox och andra webläsare här »

Läs mer om: grunderna i CSS » - CSS-positionering » - CSS-menyer » - CSS-layout »

CSS med olika metoder

Du kan tillämpa CSS med olika metoder och det är viktigt att du redan från början bestämmer dig för vilken metod som passar dig bäst. Läs mer om de olika metoderna i Läs om grunderna i CSS »

Runda hörn (utan att använda bilder)

Genom att lägga flera boxar inuti varandra och låta varje box vara någon pixel mindre än föregående skapas ett runt hörn som ju egentligen är "taggigt". OBS! För att bättre förstå hur boxarna skapar hörnen bör du ha kunskaper i CSS-positionering ».

klicka här för att se exemplet »

De runda hörnen i överkant och underkant skapas med 4 st boxar i samma färg som är placerade på längden under varandra i en yttre "containerbox". Den yttre boxen ska ha samma färg som dokumentets bakgrundfärg - i exemplet vit färg. Varje box är något kortare än föregående box och det är detta som ger intrycket av en rundning i hörnen.

I exemplet nedan är de 4 boxarna olikfärgade för att bättre visa hur de runda hörnen skapas:

En förstoring av de två exemplen ovan visar att de "runda" hörnen egentligen är "taggiga":

Allt innehåll är placerat i en box med namnet #container. Toppkanten är boxen .roundtop som innehåller de fyra boxarna med namnen: .r1 .r2 .r3 och .r4 som skapar radien för rundningen. Texten och övrigt innehåll är placerat i boxen .content och bottenkanten är boxen .roundbottom som innehåller samma fyra boxar som toppen men i omvänd ordningsföljd.

<head>
<style type="text/css">
<!--
#container {background: #cccccc;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccccc;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccccc;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccccc;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccccc;}
.content {padding: 10px;}
-->
</style>
</head>

<body>
<div id="container">
 <div class="roundtop">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
 </div>
<div class="content">Innehållet i boxen här...</div>
 <div class="roundbottom">
   <div class="r4"></div>
   <div class="r3"></div>
   <div class="r2"></div>
   <div class="r1"></div>
 </div>
</div>
</body>

klicka här för att se exemplet »

Box med runda hörn och kantlinjer:

klicka här för att se exemplet »

<head>
<style type="text/css">
<!--
#container {background: #cccc99;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #000000;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccc99;
border-left: 1px solid #000000; border-right: 1px solid #000000;
border-width: 0 2px;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccc99;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccc99;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
.content {padding: 10px;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
-->
</style>
</head>

Runda hörn med större radie:

klicka här för att se exemplet »

<head>
<style type="text/css">
<!--
#container {background: #CCCC99;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 16px; height: 1px; overflow: hidden; background: #CCCC99;}
.r2{margin: 0 13px; height: 1px; overflow: hidden; background: #CCCC99;}
.r3{margin: 0 11px; height: 1px; overflow: hidden; background: #CCCC99;}
.r4{margin: 0 9px; height: 1px; overflow: hidden; background: #CCCC99;}
.r5{margin: 0 8px; height: 1px; overflow: hidden; background: #CCCC99;}
.r6{margin: 0 7px; height: 1px; overflow: hidden; background: #CCCC99;}
.r7{margin: 0 6px; height: 1px; overflow: hidden; background: #CCCC99;}
.r8{margin: 0 5px; height: 1px; overflow: hidden; background: #CCCC99;}
.r9{margin: 0 4px; height: 1px; overflow: hidden; background: #CCCC99;}
.r10{margin: 0 3px; height: 2px; overflow: hidden; background: #CCCC99;}
.r11{margin: 0 2px; height: 2px; overflow: hidden; background: #CCCC99;}
.r12{margin: 0 1px; height: 3px; overflow: hidden; background: #CCCC99;}
.content {padding: 0px 10px;}
-->
</style>
</head>

Runda hörn endast i överkant:

klicka här för att se exemplet »

<head>
<style type="text/css">
<!--
#container {background: #99ff66;}
.roundtop {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #99ff66;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #99ff66;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #99ff66;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #99ff66;}
.content {padding: 10px;}
-->
</style>
</head>

<body>
<div id="container">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">Innehållet i boxen här...</div>
</div>
</body>

Rundning i övre högra hörnet:

klicka här för att se exemplet »

<head>
<style type="text/css">
<!--
#container {background: #66ccff;}
.roundtop {background: #ffffff;}
.r1{margin: 0 5px 0 0; height: 1px; overflow: hidden; background: #66ccff;}
.r2{margin: 0 3px 0 0; height: 1px; overflow: hidden; background: #66ccff;}
.r3{margin: 0 2px 0 0; height: 1px; overflow: hidden; background: #66ccff;}
.r4{margin: 0 1px 0 0; height: 2px; overflow: hidden; background: #66ccff;}
.content {padding: 0px 10px 5px;}
-->
</style>
</head>

Rundning i övre vänstra hörnet:

klicka här för att se exemplet »

<head>
<style type="text/css">
<!--
#container {background: #66ccff;}
.roundtop {background: #ffffff;}
.r1{margin: 0 0 0 5px; height: 1px; overflow: hidden; background: #66ccff;}
.r2{margin: 0 0 0 3px; height: 1px; overflow: hidden; background: #66ccff;}
.r3{margin: 0 0 0 2px; height: 1px; overflow: hidden; background: #66ccff;}
.r4{margin: 0 0 0 1px; height: 2px; overflow: hidden; background: #66ccff;}
.content {padding: 0px 10px 5px;}
-->
</style>
</head>

Hörn med 45 graders vinkel:

klicka här för att se exemplet »

Opacitet - genomskinlig bild och bakgrund

Genomskinlighet på objekt anges med opacity för FF och Mozilla och med filter: alpha för IE och gör hela objektets innehåll genomskinligt oavsett om du tillämpar opaciteten på tabeller eller boxar (ett alternativ till opacity är att använda övertoning - se avsnittet "Övertoningar - tona objekt" » )

Allt innehåll i objektet som tilldelas opacitet blir genomskinligt och det gäller tyvärr även texten. Det beror på att innehållet i ett objekt får samma egenskaper som det omgivande objektet oavsett om det gäller en tabell eller en box. Egenskapen "opacity" ärvs (inherit) inte från överordnade objekt (parent-child) men resultatet blir detsamma då boxen med opacitet omsluter textinnehållet. I exemplet ligger boxar med vit bakgrundsfärg mot en bakgrundsbild och även texten i boxarna påverkas av opaciteten:

klicka här för att se exemplet »

TIPS! För att verkligen se de genomskinliga objekten mot bakgrundsbilden kan du minska fönstrets storlek i varje exempel du tittar på så att du kan scrolla bilder, bakgrunder och text mot den fixerade bakgrundsbilden.

CSS-koden för boxen:

<head>
<style type="text/css">
<!--
#opacitetsbox {background: #ffffff; padding: 10px; width: 350px;
opacity: 0.5; filter: alpha(opacity=50);}
-->
</style>
</head>

HTML-koden för boxen:

<body>
<div id="opacitetsbox">
Text och innehåll...
</div>
</body>

EXTRA: Solid text utan opacitet i IE
Texten i boxen påverkas av opaciteten och det finns ingen lösning på detta enligt W3C. Däremot går det att få Internet Explorer att visa solid text genom att placera en extra box inuti #opacitetsbox och där ange en textfärg (i exemplet svart textfärg):

CSS-koden för boxen:

<head>
<style type="text/css">
<!--
/* genomskinlig box */
#opacitetsbox {background: #ffffff; padding: 10px; width: 350px;
opacity: 0.5; filter: alpha(opacity=50);}
/* box med solid text (fungerar i IE) */
#solidtext {position: relative; color: #000000;}
-->
</style>
</head>

OBS! Boxen med textfärgen måste positioneras relativt annars fungerar det inte i IE och ingen vet varför...

HTML-koden för boxen:

<body>
<div id="opacitetsbox">
<div id="solidtext">
Text och innehåll...
</div>
</div>
</body>

Opacitet fungerar för de flesta objekt och även i tabeller där du kan tilldela <table> eller <td> genomskinlighet. Resultatet är detsamma som för boxar och även texten påverkas av opaciteten men det går att kompensera i IE med en extra box som i exemplet ovan:

klicka här för att se exemplet »

CSS-koden för tabellcell och textboxen:

<head>
<style type="text/css">
<!--
/* genomskinlig box */
#opacitetsbox {background: #ffffff; opacity: 0.5; filter: alpha(opacity=50);}
/* box med solid text (fungerar i IE) */
#solidtext {position: relative; color: #000000;}
-->
</style>
</head>

OBS! Boxen med textfärgen måste positioneras relativt annars fungerar det inte i IE och ingen vet varför...

HTML-koden för boxen där tabellcellen <td> har opacitet:

<body>
<table width="350" border="0" cellspacing="0" cellpadding="8">
<tr>
<td id="genomskinlig"><div id="solidtext">Text och innehåll...</div></td>
</tr>
</table>
</body>

Möjligheteten att tillämpa opacitet direkt på en bild är användbar om du vill tona ner bilder i en layout i förhållande till sidans bakgrund. I exemplet är opacitet tillämpad med CSS-mallen direkt på bilden:

klicka här för att se exemplet »

TIPS! För att verkligen se de genomskinliga objekten mot bakgrundsbilden kan du minska fönstrets storlek i varje exempel du tittar på så att du kan scrolla bilder, bakgrunder och text mot den fixerade bakgrundsbilden.

CSS-koden för bilden:

<head>
<style type="text/css">
<!--
/* genomskinlig bild */
#opacitet {opacity: 0.5; filter: alpha(opacity=50);}
-->
</style>
</head>

HTML-koden för bilden:

<body>
<img src="bild.gif" id="opacitet">
</body>

Opacitet på en bild genom att placera den inuti eller som bakgrund i ett objekt med opacitet:

klicka här för att se exemplet »

 

Opacitet - genomskinlig text

Genomskinlig text fungerar bra i Firefox men kräver mer planering och ger ett sämre resultat i Internet Explorer. Opacitet i FF kan tillämpas direkt på befintliga märken som tex <P> <Table> <H> och delar av områden med <SPAN>. Exemplet visar stycketext där hela stycket <P> och stycken där vissa ord och bokstäver har opacitet:

klicka här för att se exemplet »

CSS-koden:

<head>
<style type="text/css">
<!--
#opacitet {opacity: 0.5; filter: alpha(opacity=50);}
-->
</style>
</head>

HTML-koden tillämpad på helt stycke <P> och delar av text <span>:

<body>
<p id="opacitet">Textstycke med opacitet</p>
<p>Vissa<span id="opacitet">ord</span>genomskinliga</p>
</body>

IE visar inte opacitet om inte en bredd angivits för området som ska ha opacitet. I exemplet nedan används width: 100%; då textinnehållet i stycket ska avgöra längden på raderna. Notera att textkanterna blir ojämna i IE men inte i FF och att delar av texten inte kan ha opacitet:

klicka här för att se exemplet »

CSS-koden:

<head>
<style type="text/css">
<!--
#opacitet {width: 100%; opacity: 0.5; filter: alpha(opacity=50);}
-->
</style>
</head>

HTML-koden tillämpad på helt stycke <P> och delar av text <span>. OBS! IE visar bara opacitet i hela området och inte för delar av texten:

<body>
<p id="opacitet">Textstycke med opacitet</p>
<p>Vissa<span id="opacitet">ord</span>genomskinliga</p>
</body>

Lösningen på problemet kan vara att placera varje ord eller bokstav i en egen containerbox men då är en del av poängen med CSS-formateringen förlorad och du kanske ska använda bilder istället...

En enkel effekt av övertoning kan du få i FF genom att använda flera opacitetsmallar och tillämpa en mall på varje bokstav:

klicka här för att se exemplet »

CSS-koden med 8 mallar till 8 bokstäver som ger en effekt av övertoning :

<head>
<style type="text/css">
<!--
#opacitet80 {opacity: 0.8; filter: alpha(opacity=80);}
#opacitet70 {opacity: 0.7; filter: alpha(opacity=70);}
#opacitet60 {opacity: 0.6; filter: alpha(opacity=60);}
#opacitet50 {opacity: 0.5; filter: alpha(opacity=50);}
#opacitet40 {opacity: 0.4; filter: alpha(opacity=40);}
#opacitet30 {opacity: 0.3; filter: alpha(opacity=30);}
#opacitet20 {opacity: 0.2; filter: alpha(opacity=20);}
#opacitet10 {opacity: 0.1; filter: alpha(opacity=10);
-->
</style>
</head>

HTML-koden där varje mall är tillämpad på en egen bokstav - 8 mallar till 8 bokstäver :

<body>
<span id="opacitet80">O</span><span id="opacitet70">p</span><span id="opacitet60">a</span><span id="opacitet50">c</span><span id="opacitet40">i</span><span id="opacitet30">t</span><span id="opacitet20">e</span><span id="opacitet10">t</span>
</body>

Bläddringslister - färg

Du kan få din egen färg på bläddringslisterna eller delar av bläddringslisten.

OBS! fungerar bara i Internet Explorer >5.5 med rätt doctype. Fungerar inte i Firefox.

Använd rätt doctype

Om du inte anger rätt doctype visar inte IE bläddringslisternas färg. Använd doctype-deklarationen Transitional utan länk till W3C för korrekta resultat i IE:

Denna doctype fungerar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

OBS! Detta fungerar inte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Läs mer om Doctypes och W3C här »

<head>
<style type="text/css">
<!--
body {scrollbar-base-color: #cccc66; scrollbar-track-color: #cccc66;}
-->
</style>
</head>

klicka här för att se exemplet »

De delar av bläddringslisten du kan ändra är:

scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color

scrollbar-track-color
(ej ändrat originalutseende)


En kombination av olika delars färgvärden med några av egenskaperna enligt ovan kan alltså se ut så här:

<head>
<style type="text/css">
<!--
body {
scrollbar-face-color: #e6e6e6;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #cccccc;
scrollbar-arrow-color: #333333;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #cccccc;
}
-->
</style>
</head>

 klicka här för att se exemplet »

 

TIPS! Du kan även byta färg på bläddringslisten när användaren klickar på en länk eller som en "rollover-effekt" läs mer här »

Bläddringslister - dölj

Du kan dölja alla bläddringslister eller endast bläddring i sid- eller höjdled. Ofta är det bättre att anpassa sidans innehåll så att bläddingslisten inte behövs och då inte heller visas.

OBS! fungerar bara i Internet Explorer >5.5 med rätt doctype. Fungerar inte i Firefox.
(Se exemplet med färgade bläddringslister ovan)

Klicka här för att se ett "normalt" fönster utan ändringar »

 

Ta bort alla bläddringslister:

body { overflow: hidden;}

Se exemplet här »

Ta bort högra bläddringslisten (vertikal Y)

:body { overflow-Y: hidden;}

Se exemplet här »

Ta bort nedre bläddringslisten (horisontell scrollning; X):

body { overflow-X: hidden;}

Se exemplet här »

 

TIPS! Du kan även ta bort bläddringslist med javascript - läs mer här »

Bläddringbar ruta - scrollbox

En Box tillämpar du med CSS2 positionering som du kan läsa mer om här » Exemplen nedan använder bredd och höjd i pixlar och egenskapen "overflow" för att skapa scrollbars.

Exempel:

Nyheter! News!
En scrollbar ruta som du själv bestämmer storleken på. Denna ruta är 200 pixlar bred och 100 pixlar hög. Det är är egentligen en "Box" som kan ha de flesta andra egenskaperna för CSS-formatering som text kantlinjer, teckensnitt och bakgrundsfärg. Det som gör denna ruta bläddringsbar är egenskapen "overflow" som här är angiven till "auto" vilket innebär att bläddringslisten visas när innehållet i boxen inte får plats...
...glömde nästan berätta att avståndet från boxens kanter kan anges i som "padding", denna ruta har 10 pixlars avstånd från kanten.

Använd ett eget class-namn som text ".scrollbox":

.scrollbox {padding: 10px; height: 100px; width: 200px; border: 1px solid #999999; overflow: auto; background-color: #F1F1EB;}

Tillämpa på märket <P> <TD> eller annat märke där du vill ha din scrollbox:

<p class="scrollbox">
Din text som ska vara i rutan skriver du här...
</p>

Du kan även använda <DIV> för att placera ut koden i dokumentet utan att koppla den till ett speciellt märke:

<div class="scrollbox">
Din text som ska vara i rutan skriver du här...
</div>

Om du inte kan koppla CSS-egenskapen till ett speciellt märke kan du ofta använda <DIV> före och efter märket istället. Här är ett exempel på hur du kan lägga boxen i en tabellcell med hjälp av märket <DIV>.

Exempel:

Nyheter! News!
En scrollbar ruta som du själv bestämmer storleken på. Denna ruta är 200 pixlar bred och 100 pixlar hög. Det är är egentligen en "Box" som kan ha de flesta andra egenskaperna för CSS-formatering som text kantlinjer, teckensnitt och bakgrundsfärg. Det som gör denna ruta bläddringsbar är egenskapen "overflow" som här är angiven till "auto" vilket innebär att bläddringslisten visas när innehållet i boxen inte får plats...
...glömde nästan berätta att avståndet från boxens kanter kan anges i som "padding", denna ruta har 10 pixlars avstånd från kanten.

Det går ju även bra att ha text under boxen men i samma cell.

Till vänster är den bläddringsbara rutan placerad i en tabellcell med <DIV>. Här är koden:

<td>
<div class="scrollbox">
Din text som ska vara i rutan skriver du här...
</div>
</td>

(egenskaperna för "scrollbox" inom <HEAD> är samma som tidigare enligt rutan ovan)

Färgerna på bläddringsslister (scrollbars) kan du också ändra. OBS! Boxar fungerar i Firefox men inte färg på scrollbars.

I exemplen nedan ser du koderna under respektive exempel. Läs mer om att ändra färg på bläddringslisten här »

Exempel:

<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #999999;
overflow: auto;
background-color: #F1F1EB;
scrollbar-face-color: #F1F1EB;
scrollbar-highlight-color: #F1F1EB;
scrollbar-shadow-color: #F1F1EB;
scrollbar-3dlight-color: #F1F1EB;
scrollbar-arrow-color: #999999;
scrollbar-track-color: #F1F1EB;
scrollbar-darkshadow-color: #F1F1EB;
}
-->
</style>
</HEAD>
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 5px double #999999;
overflow: auto;
background-color: #669999;
scrollbar-face-color: #669999;
scrollbar-highlight-color: #669999;
scrollbar-shadow-color: #669999;
scrollbar-3dlight-color: #669999;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #669999;
scrollbar-darkshadow-color: #669999;
}
-->
</style>
</HEAD>
   
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #669999;
overflow: auto;
scrollbar-face-color: #339999;
scrollbar-highlight-color: #339999;
scrollbar-shadow-color: #339999;
scrollbar-3dlight-color: #336699;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #339999;
scrollbar-darkshadow-color: #336699;
}
-->
</style>
</HEAD>
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #669999;
overflow: auto;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #336699;
scrollbar-arrow-color: #336699;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #336699;
}
-->
</style>
</HEAD>
   
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: none;
overflow: auto;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #cccccc;
scrollbar-arrow-color: #cccccc;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #cccccc;
}
-->
</style>
</HEAD>
<HEAD>
<style type="text/css">
<!--
.scrollbox6 {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #CCCCCC;
overflow: auto;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}
-->
</style>
</HEAD>

Formulärfält och kontroller

Med CSS kan du anpassa dina formulärkontroller så de får det utseende du vill. Du hittar mer information om Formulär och dess egenskaper i guiden "Formulär" »

Klicka här » eller på de olika exemplen nedan för att se en utförligare beskrivning.

Exempel:

 

Effekter på bild och text

Med CSS kan du skapa effekter på objekt som text, bilder, tabeller och andra element utan att använda ett bildhandlingsprogram. OBS! Exemplen nedan fungerar i Internet Explorer men inte i Firefox och vissa andra webläsare. Bilden nedan visar resultatet för dig som inte kan se CSS i din webläsare (tex Firefox):

Klicka här  » eller på bilderna nedan för exempel och kod.

Exempel:

 

Övertoningar - tona objekt eller hela sidans innehåll

Använd CSS-effekten "ALPHA" på <BODY> för att ge hela websidan med allt innehåll en övertoning. OBS! Exemplen fungerar i Internet Explorer men inte i Firefox och vissa andra webläsare. Notera att allt innehåll på sidan omfattas av övertoningen och även texten blir tonad.

Klicka här för att se CSS-koden och exemplen »

Ett alternativ till övertoning är att använda opacitet - se avsnittet om "Opacitet - genomskinlig bakgrund" »

Oskärpa eller skugga på hela sidan

Använd CSS-effekten "BLUR" på <BODY> för att ge hela websidan med allt innehåll en skugga eller oskärpa. OBS! Exemplen fungerar i Internet Explorer men inte i vissa andra webläsare.

Klicka här för att se CSS-koden och exemplen »