50 besökare, 1 medlem och 2 Studenter är online nu
Loopia

Webdesign och HTML

Läs mer om CSS:
CSS grunder » - CSS positionering » - CSS meny  » - CSS layout »

Information om CSS level 3

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 layouten genom att ändra formateringen i CSS-mallen.

CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte tidigare fanns i HTML- standarden. 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 CSS grunder »

CSS levels

CSS finns specificerat i olika "nivåer" där CSS 1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS 2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (div, boxar) som tidigare bara varit möjligt med tabeller (tables).

Nu gäller CSS 3 som idag inte har fullt stöd i alla webbläsare men ändå bör användas. Använd prefix för att öka chansen att det fungerar i fler webbläsare.

Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS level 1 »  -  CSS level 2 »  -  CSS level 3 »

 

Använda prefix eller inte?

Innan CSS-specifikationen för en egenskap är helt klar kan tillverkarna av de olika webbläsarna ange att support ska finnas för det egna systemet genom att ange ett prefix till CSS-attributen. När specifikationen är helt klar kan tillverkaren bygga in stödet i nya versioner av webbläsaren och inget prefix behöver då längre användas.

Olika webbläsare använder olika prefix och ett exempel är runda hörn som kan anges så här:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

Prefixen som anges är -moz (Mozilla Firefox), -webkit (Safari, iOS, Android) och -ms (Internet Explorer).

OBS! Om du använder prefix måste standard-värdet (default value) anges sist som i exemplet ovan.

Generellt gäller att för senare versioner av webbläsarna är specifikationen inbyggd och inget prefix behöver användas. Du behöver då bara ange koden nedan för runda hörn:

border-radius: 10px;

Du kan vilket stöd som finns hos de olika webbläsarna hos Can I use »
Stöd för Runda hörn visas på sidan CSS3 border radius »

Vad händer om du inte använder prefix? Det är ett fåtal användare som inte kommer att se den effekt eller layout du använder. Du måste själv avgöra om det är viktigt för din webbplats att CSS-formateringen fungerar och då använda prefix för att öka chansen. I vårt exempel med runda hörn kommer hörnen istället att ha vinkelräta hörn om inget stöd finns för specifikationen. Det kanske inte är en så stor förlust för användaren att inte se dina runda hörn eller skuggor att det är motiverat att använda prefix.

Prefix används under en övergångsperiod och ofta i onödan eftersom webbläsarna uppdateras hela tiden.

I exemplen i denna guide används inga prefix om detta inte särskilt anges vid exemplen.

 

RGBa färgvärden med opacitet

CSS3 ger möjlighet att använda färgvärden i RGBa som är ett tillägg till RGB-färger och ger en alfa-kanal för att ange opacitet.

Ett RGBa-värde anges så här: rgba(red, green, blue, alpha)

Parametern Alpha anges som ett värde mellan 0 och 1 där 0.5 är 50% opacitet. Du kan tex ange värdet 0.45 om 0.5 är för hög opacitet.

I exemplen nedan används Svart färg för att skapa olika gråskalor med Alfa-värdet:

rgba(0, 0, 0, 0.15);

rgba(0, 0, 0, 0.3);

rgba(0, 0, 0, 0.45);

rgba(0, 0, 0, 0.75);

I exemplen nedan används Röd färg för att skapa olika nyanser med Alfa-värdet:

rgba(255, 0, 0, 0.15);

rgba(255, 0, 0, 0.3);

rgba(255, 0, 0, 0.45);

rgba(255, 0, 0, 0.75);

I exemplen nedan används Gråskalor för att skapa olika nyanser med Alfa-värdet. Observera att ingen transparens används då Alpha-värdet är "1":

rgba(204,204,204, 1);
motsvarar Hex-värde:
#CCC
rgba(253,253,253, 1);
motsvarar Hex-värde:
#999
rgba(102,102,102, 1);
motsvarar Hex-värde:
#666
rgba(51, 51, 51, 1);
motsvarar Hex-värde:
#333

I exemplen nedan används Grundfärger för att skapa olika nyanser med Alfa-värdet. Observera att ingen transparens används då Alpha-värdet är "1":

rgba(255,0,0, 1);
motsvarar Hex-värde:
#FF0000
rgba(255,255,0, 1);
motsvarar Hex-värde:
#FFFF00
rgba(0,255,0, 1);
motsvarar Hex-värde:
#00FF00
rgba(0,0,255, 1);
motsvarar Hex-värde:
#0000FF

 

 

Runda hörn (border-radius)

Tillämpa runda hörn i boxar, tabeller, bilder etc genom att ange border-radius.

Radien på hörnen anges i ordningen Top-Left, Top-Right, Bottom-Right, Bottom-Left som tex:

border-radius: 20px 15px 10px 5px;

Exemplet nedan använder border-radius på en Box (DIV):

Runda hörn i en box (div)

              border-radius: 20px;

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 100px;
background-color: #95B995;
border-radius: 20px;
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

Exemplet nedan använder border-radius på en Bild (image):

Casino Cosmopol i Sundsvall

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.round_corner {
border-radius: 30px;
}

HTML-koden:

<img src="casino_cosmopol" class="round_corner" />

 

Exemplet nedan använder border-radius på en Tabell (Table):

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

 

klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden. Notera att två classer används, en till tabellen och en till tabellcellerna:

.round_corner_table {
width: 400px;
margin: 10px;
padding: 10px;
border: 1px solid #95B995;
border-radius: 15px;
}

.round_corner_table_cell {
border: 1px solid #95B995;
border-radius: 5px;
}

HTML-koden:

<table class="round_corner_table" border="0" cellpadding="8" cellspacing="10">
<tr>
<td class="round_corner_table_cell">Cell 1</td>
<td class="round_corner_table_cell">Cell 2</td>
<td class="round_corner_table_cell">Cell 3</td>
</tr>
<tr>
<td class="round_corner_table_cell">Cell 4</td>
<td class="round_corner_table_cell">Cell 5</td>
<td class="round_corner_table_cell">Cell 6</td>
</tr>
<tr>
<td class="round_corner_table_cell">Cell 7</td>
<td class="round_corner_table_cell">Cell 8</td>
<td class="round_corner_table_cell">Cell 9</td>
</tr>
</table>

 

 

Skugga (box-shadow)

Tillämpa skugga i boxar, tabeller, bilder etc genom att ange box-shadow.

Skuggans placering anges i X- och Y-led (h-shadow, v-shadow) och parametrar som kan anges är blur (oskärpa), spread (spridning), color (färg) och inset (inre skugga).

Exempel på parametrar:

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

I exemplet ovan anges skuggans placering horisontellt 5px och vertikalt 5px. Oskärpan på skuggan är 10px och spridningen är 5px. Färgen anges som RGBa med opacitet 50%.

Notera att skuggans färg och opacitet anges med RGBa där du anger en färg och ett Alfa-värde för opaciteten. För gråskala kan du tex ange rgba(0,0,0, 0.5) där färgen är Svart men opaciteten sänkts för att ge Gråskala.
Läs mer om RGBa här »

Observera att du fortfarande kan använda hexidecimala färgvärden för att ange gråskalor som tex #333, #666, #999, och #CCC för skuggan istället för att använda RGBa: box-shadow: 5px 5px 10px 5px #CCC;

Exemplet nedan använder box-shadow på en Box (DIV):

Skugga i en box (div)

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

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 100px;
background-color: #BAD1BA;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.5);"
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

Inre skugga

Du kan använda flera skuggor och kombinera dessa genom att ange parametrarna åtskiljda av kommatecken. Det går alltså att kombinera en skugga och en inre skugga för att få en 3D-effekt av skuggor och högdagrar:

Inre skugga i en box (div)

box-shadow:
inset 4px 4px 4px rgba(255,255,255, 0.8),
inset -4px -4px 4px rgba(0,0,0,0.6),
5px 5px 10px 5px rgba(0,0,0,0.4);

 

Klicka här för att se fler exempel »

CSS-koden. Exemplet använder en Vit inre skugga (inset), en Grå inre skugga (inset) och en Grå yttre skugga. Varje skugga fungerar som ett eget Layer med ett Z-index för placering ovanför varandra. Den skugga som anges sist i koden placeras underst. Här är den yttre skuggan placerad längst ned i Layer-ordningen:

#box1 {
width: 400px;
height: 100px;
background-color: #BAD1BA;
border-radius: 20px;
box-shadow:
inset 4px 4px 4px rgba(255,255,255, 0.8),
inset -4px -4px 4px rgba(0,0,0,0.6),
5px 5px 10px 5px rgba(0,0,0,0.4);

}

 

Skugga i bild (Image)

Exemplet nedan använder box-shadow på en Bild (image):

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.image_shadow {
border-radius: 30px;
box-shadow: 5px 5px 15px rgba(0,0,0, 0.5);
}

HTML-koden:

<img class="image_shadow" src="bilder/esko_fyr.jpg" width="400" height="302" />

 

Fotokant med skugga

Du kan ge dina bilder en fotokant genom att använda en kantlinje (border) och kombinera med en skugga.

CSS-koden:

.photo_border {
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);"

}

HTML-koden:

<img class="photo_border" src="bilder/rodhallan_iggohallan.jpg" width="400" height="225" />

 

Inre skugga i bild

Exemplet nedan använder en kombination av inre skugga (inset) och yttre skugga på en Bild (image):

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

En inre skugga (inset) fungerar inte direkt på en bild. I exemplet är bilden en bakgrundsbild i en tom DIV-box. Det är viktigt att du anger samma storlek på boxen som bildens storlek.

CSS-koden. Exemplet använder en Vit inre skugga (inset), en Grå inre skugga (inset) och en Grå yttre skugga. Varje skugga fungerar som ett eget Layer med ett Z-index för placering ovanför varandra. Den skugga som anges sist i koden placeras underst. Här är den yttre skuggan placerad längst ned i Layer-ordningen:

#image_shadow {
background-image:
url(bilder/esko_fyr.jpg);
width: 400px;
height: 302px;
clear: both;
border-radius: 30px;
box-shadow: inset 5px 5px 5px rgba(255,255,255,0.7),
inset -5px -5px 5px rgba(0,0,0, 0.5),
5px 5px 5px rgba(0,0,0, 0.5);

}

HTML-koden. Observera att Boxen är tom:

<div id="image_shadow"></div>

 

Skugga i Tabell (Table)

Exemplet nedan använder box-shadow på en Tabell (Table):

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden. Notera att två classer används, en till tabellen och en till tabellcellerna:

.box_shadow_table1 {
width: 400px;
margin: 10px;
padding: 10px;
border: 1px solid #95B995;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.3);
}

.box_shadow_table_cell1 {
border: 1px solid #95B995;
border-radius: 5px;
box-shadow: inset 3px 3px 3px rgba(0,0,0, 0.3);
}

HTML-koden:

<table class="box_shadow_table1" border="0" cellpadding="8" cellspacing="10">
<tr>
<td class="box_shadow_table_cell1">Cell 1</td>
<td class="box_shadow_table_cell1">Cell 2</td>
<td class="box_shadow_table_cell1">Cell 3</td>
</tr>
<tr>
<td class="box_shadow_table_cell1">Cell 4</td>
<td class="box_shadow_table_cell1">Cell 5</td>
<td class="box_shadow_table_cell1">Cell 6</td>
</tr>
<tr>
<td class="box_shadow_table_cell1">Cell 7</td>
<td class="box_shadow_table_cell1">Cell 8</td>
<td class="box_shadow_table_cell1">Cell 9</td>
</tr>
</table>

 

Textskugga (text-shadow)

Tillämpa skugga i text genom att ange text-shadow.

Skuggans placering anges i X- och Y-led (h-shadow, v-shadow) och parametrar som kan anges är blur (oskärpa) och color (färg).

Exempel på parametrar:

text-shadow: 4px 5px 3px rgba(0,0,0, 0.5);

I exemplet ovan anges skuggans placering horisontellt 4px och vertikalt 5px. Oskärpan på skuggan är 3px och färgen anges som RGBa med opacitet 50%.

Notera att skuggans färg och opacitet anges med RGBa där du anger en färg och ett Alfa-värde för opaciteten. För gråskala kan du tex ange rgba(0,0,0, 0.5) där färgen är Svart men opaciteten sänkts för att ge Gråskala.
Läs mer om RGBa här »

Observera att du fortfarande kan använda hexidecimala färgvärden för att ange gråskalor som tex #333, #666, #999, och #CCC för skuggan istället för att använda RGBa: text-shadow: 4px 5px 3px #CCC;

 

TEXTSKUGGA

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.text_skugga {
text-shadow: 4px 5px 3px rgba(0,0,0, 0.5);
font-family: Verdana, Geneva, sans-serif;
font-size: 60px;
font-weight: bold;
color: #000;
}

HTML-koden:

<p><span class="text_skugga">TEXTSKUGGA</span></p>

 

 

TEXTSKUGGA

 

 

CSS-koden:

.text_skugga {
padding: 20px;
background-color: #000;
text-shadow: 0 0 5px rgba(255,102,0, 1);

font-family: Verdana, Geneva, sans-serif;
font-size: 60px;
font-weight: bold;
color: #000;
}

HTML-koden:

<p><span class="text_skugga">TEXTSKUGGA</span></p>

 

 

Opacitet (opacity)

Tillämpa opacitet i objekt genom att ange opacity som anger transparensen.

Värdet kan vara från 0.0 (full transparens) till 1.0 (ingen transparens)

Exemplet nedan använder opacity på en Box (DIV) med text som är placerad ovanför boxen med bilden:

Opacitet i en box (div)

width: 300px;
border: 15px solid #BAD1BA; border-radius: 20px;
background-color: #fff;
opacity: 0.5;

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.bild_box {
width: 440px;
height: 266px;
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);
background-image: url(bilder/grand_hotell_gavle.jpg);
}

.text_box {
width: 300px;
margin: 50px auto 0 auto;
padding: 20px;
border: 15px solid #BAD1BA;
border-radius: 20px;
background-color: #fff;
opacity: 0.7;

}

HTML-koden:

<div class="bild_box">
<div class="
text_box">
Textinnehållet här.
</div>
</div>

 

Opacitet utan att allt innehåll blir transparent

Metod 1

Egenskapen opacity påverkar allt innehåll i boxen (div) och det gäller alltså även text i exemplet ovan. Egenskapen opacity ärvs (inherit) från överordnade objekt (parent-child) och resultatet blir att även text-boxen får opacitet. Även om du placerar texten i en egen <DIV> så omsluts den av opacitets-boxen och ärver (inherit) egenskaperna från denna.

En lösning för att textinnehållet inte ska få transparens är att den inte har parent-child-förhållande till den box som använder opacity och då inte ärver egenskapen.

Exemplet nedan använder en Box (DIV) med text som är placerad i absolut position i förhållande till boxen med opacity. Opacitets-boxen som är transparent har en relativ position och omsluter inte textboxen. De två boxarna med opacitet och text har då inget parent-child-förhållande och textboxen ärver inte egenskapen.

Opacitet i en box (div)

width: 300px;
border: 15px solid #BAD1BA; border-radius: 20px;
background-color: #fff;
opacity: 0.5;

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden. Notera att tre classer används, en till bilden, en till opaciteten och en till texten:

.bild_box {
width: 440px;
height: 266px;
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);
background-image: url(bilder/grand_hotell_gavle.jpg);
}


.opacitets-box {
position: relative;
width: 300px;
height: 130px;
float: left;
margin: 50px 0 0 40px;
padding: 35px;
background-color: #fff;
border-radius: 20px;
opacity: 0.5;
}


.text_box {
position: absolute;
width: 300px;
height: 130px;
float: left;
margin: 50px 0 0 40px;
padding: 20px;
border: 15px solid #BAD1BA;
border-radius: 20px;
}

HTML-koden. Bild-boxen omsluter både opacitets-boxen och text-boxen. Opacitets-boxen har inget innehåll och omsluter inte text-boxen. Text-boxen placeras trots detta ovanför opacitets-boxen genom att absolut positionering används:

<div class="bild_box">
<div class="opacitets-box">
</div>
<div class="
text_box">
Textinnehållet här.
</div>
</div>

 

Opacitet utan att allt innehåll blir transparent

Metod 2

En enklare metod än att använda opacity enligt ovan är att använda RGBa färgvärden där du kan använda en alfa-kanal för att ange opacitet - se avsnittet ovan »

OBS! Den här metoden fungerar inte på bilder utan endast färger.

Exemplet nedan använder RGBa på en Box (DIV) med text som är placerad ovanför boxen med bilden. RGB-värdet 255,255,255 ger en Vit färg (samma som hexadecimala värdet #FFF). Alfa-värdet som ger opaciteten är angivet till 0.5:

Opacitet i en box (div)

width: 300px;
border: 15px solid #BAD1BA;
border-radius: 20px;
background-color:
rgba(255,255,255, 0.5);

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.bild_box {
width: 440px;
height: 266px;
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);
background-image: url(bilder/grand_hotell_gavle.jpg);
}


.text_box {
width: 300px;
margin: 50px auto 0 auto;
padding: 20px;
border: 15px solid #BAD1BA;
border-radius: 20px;
background-color: rgba(255,255,255, 0.5);
}

HTML-koden:

<div class="bild_box">
<div class="
text_box">
Textinnehållet här.
</div>
</div>

 

Övertoning (gradient)

Övertoning (gradient) ger en mjuk övergång mellan två eller flera färger. Du kan använda två typer av övertoningar, linear-gradient (linjär övertoning) och radial-gradient (radiell övertoning).

Dessutom kan du ange att övertoningen ska upprepas enligt ett angivet intervall genom att använda repeating-linear-gradient och repeating-radial-gradient

OBS! Stödet för linear-gradient och radial-gradient varierar i webbläsarna och du bör använda prefix för att öka chansen att det fungerar.

Läs mer om prefix här »

Linjär övertoning

Den linjära övertoningen ger en övergång mellan två färger. Parametrar som kan anges är direction (riktning), color1 (färgvärde 1), color2 (färgvärde2) osv. Du kan ange flera färger än två.

Riktningen på övertoningen kan anges som top, bottom, left, right. Du kan även ange riktningen i grader, tex 180deg

Exempel på parametrar:

linear-gradient(top, rgba(255,255,255, 1), rgba(0,0,255, 1) );

I exemplet ovan anges en vertikal övertoning (to-top) från Vitt till Rött. Färgen anges som RGBa ( läs mer om RGBa här » ) men du kan använda hexadecimala värden istället: linear-gradient(top, #fff, #ff5 );

 

Exemplet nedan använder linear-gradient på en Box (DIV) från Grönt till Vitt:

Linjär övertoning i en box (div)

background:
linear-gradient(0deg,
rgba(255,255,255, 1),
rgba(100,151,100, 1));

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 200px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background: linear-gradient(0deg, rgba(255,255,255, 1), rgba(100,151,100, 1));
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

Flera färgsteg i övertoningen

Du kan använda flera färger genom att ange färgsteg i övertoningen. Start och stopp kan anges procentuellt som en del av längden av den totala övertoningen.

Exemplet nedan använder linear-gradient i flera färgsteg utan angivna start och stopp:

Linjär övertoning i en box (div)

background: linear-gradient(180deg,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(0,51,255,1.00));

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
background: linear-gradient(180deg,
rgba(255,0,0, 1.00),
rgba(255,153,0, 1.00),
rgba(255,255,0, 1.00),
rgba(0,255,0, 1.00),
rgba(0,51,255, 1.00));
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 Exemplet nedan använder linear-gradient i flera färgsteg med angivna start och stopp:

Linjär övertoning i en box (div)

background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,0,0,1.00) 18%,
rgba(255,153,0,1.00) 22%,
rgba(255,153,0,1.00) 38%,
rgba(255,255,0,1.00) 42%,
rgba(255,255,0,1.00) 58%,
rgba(0,255,0,1.00) 62%,
rgba(0,255,0,1.00) 78%,
rgba(0,51,255,1.00) 82%,
rgba(0,51,255,1.00) 100%);

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
background: linear-gradient(180deg,
rgba(255,0,0, 1.00) 0%,
rgba(255,0,0, 1.00) 18%,
rgba(255,153,0, 1.00) 22%,
rgba(255,153,0, 1.00) 38%,
rgba(255,255,0, 1.00) 42%,
rgba(255,255,0, 1.00) 58%,
rgba(0,255,0, 1.00) 62%,
rgba(0,255,0, 1.00) 78%,
rgba(0,51,255, 1.00) 82%,
rgba(0,51,255, 1.00) 100%);
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

Radiell övertoning

Den radiella övertoningen ger en övergång mellan två eller flera färger. Parametrar som kan anges är shape (form), color1 (färgvärde 1), color2 (färgvärde2) osv. Du kan ange flera färger än två.

Formerna som kan anges är circle eller ellipse och du kan ange var övertoningens centrumpunkt ska starta. Positionen på övertoningens centrum-punkt kan anges som ett X- och Y-värde för horisontell och vertikal position. Ange positionen procentuellt eller med ett värde i pixlar.

Storleken på övertoningen kan anges genom att ange var den ska sluta. Ange om ytterkanten ska sluta vid en sida eller ett hörn. Värden som kan anges för storlek är: closest-side, farthest-side, closest-corner och farthest-corner.

Exempel på parametrar:

radial-gradient(60px 80%, circle closest side, rgba(255,255,255, 1), rgba(0,0,255, 1) );

I exemplet ovan anges en cirkelformad övertoning från Vitt till Rött. Positionen är 60 pixlar horisontellt och 80% vertikalt. Övertoningens ytterkant slutar vid den närmaste sidan.

Färgen anges som RGBa ( läs mer om RGBa här » ) men du kan använda hexadecimala värden istället: linear-gradient(180deg, #fff, #ff5 );

Exemplet nedan använder radial-gradient på en Box (DIV):

Radiell övertoning i en box (div)

background: radial-gradient(circle,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(255,255,255,1.00));

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 200px;
margin: 10px;
padding: 20px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background: radial-gradient( circle,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(255,255,255,1.00));

}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

Upprepade övertoningar

Du kan upprepa en övertoning genom att använda repeating-linear-gradient och repeating-radial-gradient som automatiskt upprepar färgstegen i båda riktningarna.

Exemplet nedan använder repeating-linear-gradient på en Box (DIV):

Upprepad övertoning i en box

background:
repeating-linear-gradient(180deg,
rgba(255,255,255,1.00) 10%,
rgba(255,0,0,1.00) 20%);

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 200px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background: repeating-linear-gradient(180deg,
rgba(255,255,255,1.00) 10%,
rgba(255,0,0,1.00) 20%);

}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

Knappar (buttons) med CSS

Nu kan du skapa knappar (buttons) utan att använda bilder! Genom att kombinera runda hörn (border-radius), skugga (box-shadow), övertoning (gradient) och opacitet (opacity) kan du ge knapparna nästan samma utseende som du tidigare bara kunnat göra i ett bildbehandlingsprogram som tex Photoshop.

Exemplet nedan visar knappar som är gjorda i CSS utan bilder:

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

För att se CSS-koden och HTML-koden till exemplet ovan klickar du på länken ovan.

 

Du kan även placera knapparna i en menylist:

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

För att se CSS-koden och HTML-koden till exemplet ovan klickar du på länken ovan.

Tips! När du arbetar med övertoningar kan du använda en "CSS Gradient Generator" där du får CSS-koden och kan klippa/klistra den till din egen kod. Du kan även importera övertoning från en bild och få det omvandlat till CSS-kod. Du kan importera din egen CSS-kod och bearbeta övertoningen för att byta färg eller göra den mörkare. Byt nyans (Hue) eller mättnad (Saturation) i färgen för att få exakt den övertoning du vill ha.

http://www.colorzilla.com/gradient-editor Öppnas i nytt fönster (Open in new window) 

http://www.cssmatic.com/gradient-generator Öppnas i nytt fönster (Open in new window) 

 

 

 

Kolumner (column-count)

Du kan dela upp ett texflöde i kolumner. När textinnehållet når botten av kolumn 1 fortsätter innehållet högst upp i kolumn 2 osv. Den här metoden finns i ordbehandlingsprogram och desktop-publishing-program som används för tidninglayouter och böcker, men har inte funnits tidigare för HTML och CSS.

OBS! Stödet för column-count varierar i webbläsarna och du bör använda prefix för att öka chansen att det fungerar.

Läs mer om prefix här »

Egenskaper som kan anges för kolumnerna är:

column-count
Antal kolumner som ska användas
column-width 
Bredd på kolumnerna. OBS! Fungerar inte i alla webbläsare.
column-gap
Avstånd mellan kolumnerna.
column-rule-width 
Bredd på den kantlinje som kan användas mellan kolumnerna.
column-rule-style 
Typ av kantlinje som ska användas. Samma attribut som för border kan användas:
dotted, dashed, solid, double, groove, ridge, inset, outset
column-rule-color
 
Färg på kantlinjen.
column-span 
Antal kolumner som ett element, tex rubrik, ska sträcka sig över. Samma funktion som colspan och rowspan i tabeller. OBS! column-span fungerar inte på element som använder float eller absolut positionering.
Firefox söder inte column-span

 

Exemplet nedan använder column-count på en Box (DIV):

Använd CSS3 för att få textflöde över flera kolumner!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tincidunt diam ante in leo.

Class aptent

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna.

Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna.

Nulla quis turpis sit amet justo adipiscing viverra vitae non dui.

Pellentesque quis

Pellentesque quis urna nisl. Nunc tincidunt nibh id turpis condimentum ac imperdiet ipsum posuere. Maecenas fermentum, magna eu suscipit suscipit, eros diam elementum nibh, imperdiet gravida mauris odio ac velit.

Quisque sit amet mauris lectus

Quisque sit amet mauris lectus. Suspendisse semper iaculis porttitor. Donec ultricies, augue id vulputate sollicitudin, quam enim feugiat lacus, sit amet ornare risus est viverra ligula.

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.kolumner3 {
width: 650px;
margin: 10px 0 10px 0;
padding: 20px;
background-color: #BAD1BA;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #000

}

HTML-koden:

<div class="kolumner3">
Text och innehåll här.
</div>

 

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.

Klicka här för att se ett vanligt fönster med bläddringslister Öppnas i nytt fönster (Open in new window)

 

Ta bort alla bläddringslister:

body { overflow: hidden;}

Se exemplet här Öppnas i nytt fönster (Open in new window)

 

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

body { overflow-Y: hidden;}

Se exemplet här Öppnas i nytt fönster (Open in new window)

 

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

body { overflow-X: hidden;}

Se exemplet här Öppnas i nytt fönster (Open in new window)

 

 

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.

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 tex: .scrollbox enligt exemplet nedan:

.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>.

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 även bra att ha text under boxen men i samma cell.

Den bläddringsbara Boxen är placerad i en tabellcell med <DIV>:

<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)

Du kan använda färg på bläddringsslister (scrollbars). OBS! Fungerar inte i alla webbläsare.

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: