NinetNet CSS CSS - Finesser

CSS - Finesser

Byt färg på Bläddringslister / Rullningslister / Scrollbars

Med Stilmallar kan man byta färg på bläddringslisterna på sidan. Än så länge fungerar det bara i Internet Explorer från version 5.5 och uppåt.

Vill man att bläddringslisterna ska visas även för dem som surfar med Internet Explorer 5.5 ( inte så värst överdrivet många numer ) får man ta till ett litet trix... Läs mer om det längre ner.

Numer fungerar det även i Opera från version 8 - men inte om du har en korrekt doctype på dina sidor... Läs mer om det längre ner.

Observera att det egentligen inte är korrekt enligt standard att stajla sidans bläddringslister! Om du gör det kommer din stilmall inte att validera...

Här till höger ser du hur färgerna på en bläddringslist i Internet Explorer 5 ser ut i orginal. Som du ser visas listen med en inbyggd 3D-effekt. Det är de färgerna du kan ändra eller ta bort i din Stilmall.

Det vanligaste är att man skriver in koden i en Extern stilmall som man sen anropar från alla sidorna på sajten. På det sättet får web-platsen ett enhetligt utseende.

Men man kan också ange färgändringarna i en Intern stilmall inom <head> . Men glöm då för all del inte att skriva in koden på ALLA sidor...

Den enklaste varianten...

Vill du behålla det grundläggande utseendet på bläddringslisten och bara byta färg gör du det enklast med egenskapen: "scrollbar-base-color".

Nedan ser du hur 3D-effekten finns kvar på bläddringslisten - det är bara grundfärgen som ändrats.

html, body
{
scrollbar-base-color: #E6E6FA
}

Alla färger...

Här kommer exempel på hur man kan byta ut färgerna i bläddringslisten genom att ange olika egenskaper i Stilmallen. Man behöver inte alls hålla sig till en i taget. Det går bra att blanda hej vilt! Det är bara att pröva sig fram!

För att det ska bli mer överskådligt har bläddringslisterna nedan fått ett "grundutseende" i svart och grått. De andra färgerna illustrerar vilka delar som går att förändra.

Inte så snyggt, kanske...

Men håll ut! Längre ner finns några mer användbara exemel!

html, body { scrollbar-highlight-color: blue }

Observera att koden ovan även ger blå "effekt" i spåret bakom själva rullnings-knappen.

html, body
{
scrollbar-highlight-color: blue;
scrollbar-shadow-color: white
}

blue = blå
white = vit

html, body
{
scrollbar-highlight-color: blue;
scrollbar-3dlight-color: red;
scrollbar-darkshadow-color: limegreen
}

red = röd
limegreen = limegrön

html, body
{
scrollbar-highlight-color: blue;
scrollbar-face-color: limegreen
}

Observera att koden ovan även ger grön "effekt" i spåret bakom själva rullningsknappen.

html, body
{
scrollbar-highlight-color: blue;
scrollbar-arrow-color: white;
scrollbar-track-color: limegreen
}

Observera att koden ovan tar bort den tvåfärgade "effekten" i spåret bakom själva rullningsknappen.

Några något mer användbara exemel...

Alla egenskaper med 3D-effekt:

html, body
{
scrollbar-face-color: #CCCCCC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
scrollbar-3dlight-color: #808080;
scrollbar-darkshadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #FFFFFF
}

html, body
{
scrollbar-face-color: #B0C4DE;
scrollbar-highlight-color: #668099;
scrollbar-shadow-color: #668099;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-arrow-color: #668099;
scrollbar-track-color: #FFFFFF
}

html, body
{
scrollbar-base-color: #006699;
scrollbar-arrow-color: #FFFFFF
}

html, body
{
scrollbar-face-color: #DEB887;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #DEB887;
scrollbar-darkshadow-color: #DEB887;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #F5F5DC
}

Opera 8

Från version 8 syns de färgade bläddringslisterna även i Opera, men konstigt nog bara om sidan visas i "quirks mode". Har du en korrekt doctype på sidan kommer Operas ordinarie lister att visas.

Därför kan det vara bra att ha samma doctype på alla dina sidor på sajten om man vill stajla sina bläddringslister. Här på NinetNet har jag av olika anledningar lite olika doctyper på sidorna och surfar man med Opera ser det därför lite tokigt ut för tillfället... Vissa sidor visar färgade lister och andra inte. Men man kan ju hoppas att de rättar till det där om de ska fortsätta med funktionen.

I Opera kommer ALLA bläddringslister på sidan - även i boxar och textrutor med scroll - att få samma utseende som på själva sidan. Det fungerar inte att stajla dem separat.

Läs mer om olika doctypes här: HTML / Doctype & Validering

Internet Explorer 5

I Internet Explorer 5 kommer bläddringslisterna inte visas om man som ovan använder html, body som selectorer. Men det är nödvändigt för senare versioner av IE. För att det ska funka för IE 5 ska det se ut så här:


body { scrollbar-base-color: #E6E6FA; }

Om det är jätte-viktigt att de färgade listerna visas även för användare med denna äldre version av IE kan man använda sig av Conditional comment för Internet Explorer där man serverar dem en alldeles egen stilmall.

Så här ( kommentaren ska skrivas in efter länken till din vanliga stilmall ):


<head>

<link rel="stylesheet" href="stilmall.css" type="text/css">

<!--[if lt IE 6]>
<link rel="stylesheet" href="stilmall_ie5.css" type="text/css">
<![endif]-->

</head>

I stilmallen: stilmall_ie5.css skriver man in css-koden för den stajlade bläddringslisten som ovan - med endast body som selector.

Läs mer om Conditional comment här: LAYOUT & DESIGN / Min-Max-Height-Width

Till Toppen

Stajlad Avdelare

Med CSS kan man variera utseendet på sina avdelare: <hr>. Det gör man genom att ge avdelaren en kantlinje med "border". På det sättet får man en avdelare som ser likadan ut i Internet Explorer, Mozilla, Opera och Netscape...

Exempel 1

Så här kan man skriva i stilmallen:

Så här skriver man in avdelaren i Html-koden:

<hr>

Så här blir det:

Exempel 2

Så här kan du göra om du vill styra tjockleken och bredden på avdelaren. Med "border: dashed" blir den streckad.

Så här kan man skriva i stilmallen:

Så här skriver man in avdelaren i Html-koden för att placera den till vänster:

Så här blir det:

Exempel 3

Vill du ha en tunn kantlinje på bara 1px måste du särskilt ange det i även i HTML-koden eftersom avdelare som standard är 2px.

Så här kan man skriva i stilmallen:

Så här skriver man in avdelaren i Html-koden:

Så här blir det:

Läs mer om border / kantlinjer här: CSS / Grunder II

Till Toppen

Olikfärgad Länklinje

Du kanske vill att länkarna och länklinjen ska ha olika färg? Med egenskapen "hover" kan du ange hur dina länkar ska se ut när muspekaren förs över dem. Här ändrar länken färg.

Så här kan man skriva i stilmallen:

<style type="text/css">
<!--

.lankar { font-family: Tahoma, sans-serif; font-size: 14px; color: #000000}


a { text-decoration: underline; color: #990000; }
a:hover { text-decoration: underline; color: #000000; }

-->
</style>

Så här skriver du sedan i Html-koden:

<a href="http://www.ninetnet.com">
<span class="lankar">NinetNet's Hemsideguide</span>
</a>

Klicka här om du vill se hur det kan se ut!

Till Toppen

Dubbel Länklinje

Genom att ange att länken ska vara understruken och dessutom lägga till en kantlinje under länken kan man skapa dubbla länklinjer.

I exemplet nedan har linjerna olika färg. När muspekaren förs över länken förvinner den undre linjen. När länken är besökt - endast en linje i avvikande färg. Genom att mixtra med färgerna och alternativen kan du få det att se ut som du själv vill!

Så här kan man skriva i stilmallen:

<style type="text/css">
<!--
a {
color: #000000;
border-bottom: #990000 1px solid;
text-decoration: underline; }

a:visited {
color: #000000;
border-bottom: #C66868 1px solid;
text-decoration: none; }

a:hover {
color: #473414;
border-bottom: none;
text-decoration: underline; }
-->
</style>

Klicka här om du vill se hur det kan se ut!

Till Toppen

Egen Muspekare

Med Css kan du infoga en egen muspekare på din sida. Än så länge fungerar den här finessen bara i Internet Explorer från version 6.0.

Muspekare som heter "cursor" på engelska har filändelsen "cur" eller för animerade pekare: "ani".

Muspekare finns att ladda hem från nätet. Windows har också en hel mängd olika pekare inbyggda. Sök på " *.cur" eller "*.ani" på din hårddisk så får du se! Man kan också tillverka egna muspekare...

Här kan du hitta muspekare att ladda hem:

CuRsOrs.com
Dierk's Page

Du kan också gå in på t.ex. Download.com eller Tucows och söka på "cursors" eller titta under rubriken Desktop / Cursors.

I de här programmmen kan du tillverka egna muspekare:

PixelToolBox               Gratis!
Liquid Icon XP            Gratis!
Axialis AX Cursors      Pröva gratis! Registrering c:a $ 14
Icon Cool Editor        Pröva gratis! Registrering c:a $ 20
Icon Forge                  Pröva gratis! Registrering c:a $ 38

Infoga muspekare

Man måste förstås ladda upp själva muspekaren till webplatsens server. Alltså en liten bild med filtillägget "cur" eller "ani". Till exempel "orange.cur" eller "flower.ani". Ladda upp muspekaren med ditt FTP-program.

Sedan länkar man till muspekaren antingen med Stilmall eller med "Inline Style" direkt i sidans HTML-kod. Oavsett metod så ska själva koden se ut på det här sättet: cursor: url(minpekare.cur) eller cursor: url(minpekare.ani).

Om du har placerat muspekaren i någon annan mapp än sidan måste du ange hela sökvägen till pekaren: cursor: url(mapp/minpekare.cur).

Eftersom alla webläsare inte visar "egna muspekre" gör man klokast i att också lägga till "default" som alternativ för att det inte ska bli konstigt för dom som inte kan se muspekaren.

Så här kan man skriva i stilmallen:

Och så här i Html-koden:

<a href="sida.html" >Länkexempel 1</a>

<a href="sida.html" >Länkexempel 2</a>

<a href="sida.html" style="cursor: url(polka.cur), default">Länkexempel 3</a>

<a href="sida.html" style="cursor: url(flower.ani), default">Länkexempel 4</a>

•  body { cursor: url(orange.cur), default}
Muspekaren gäller för hela sidan oavsett om man för muspekaren över en länk eller inte.

•  a:hover { cursor: url(green.cur), default}
Muspekaren visas när man för muspekaren över länkarna på sidan om inget annat anges. Som i Länkexempel 1 och 2.

•  Med style="cursor: url(minpekare.cur), default" direkt i länkens start-tagg <a> kan man välja olika muspekare till olika länkar.

•  Det går bra att kombinera som i exemplet ovan. Om koden skrivs in i en separat stilmall kan den förstås gälla för hur många sidor som helst.

Klicka här om du vill se hur en sida med ovanstående kod ser ut. Om du inte kan se muspekarna betyder det att din webläsare inte kan visa "egna muspekare"!

Avslutningsvis...

Med den här metoden kommer de tjusiga muspekarna alltså bara att synas för dem som surfar med Internet Explorer.

Man kan också använda en variant med JavaScript. Det kommer inte att se ut precis som när man byter pekare helt med CSS - men alla kommer att kunna se din pekare!

Läs mer om det under: JAVASCRIPT / Festliga Finesser - "Egen" Muspekare

Till Toppen

CSS - Menyer

CSS - Referens