TWNet

In Cascading Style Sheets is het mogelijk om systeemkleuren te gebruiken. Zo kan je een site hetzelfde uiterlijk geven als het OS.

Voorbeeld

1 van mijn sites die hier gebruik van maakt:

Windows XP Luna theme met Olive Green als kleurschema

Windows XP Luna theme met Default (Blue) als kleurschema

Windows XP met Blue Turquesa theme


De kleurcodes

ActiveBorderRand van het actieve venster

ActiveCaption Titelbalk van het actieve venster

AppWorkspace Achtergrond van de werkruimte in een programma dat meerdere documentvensters bevat

Background Achtergrond van het bureaublad

ButtonFace Een drie-dimensionaal weergegeven element

ButtonHighlight Lichte schaduwrand langs drie-dimensioneel weergegeven elementen (links en boven)

ButtonShadow Donkere schaduwrand langs drie-dimensioneel weergegeven elementen (rechts en onder)

ButtonText Tekst op een knop

CaptionText Tekst in de titelbalk van het actieve venster

GrayText Geblokkeerde tekst (zoals een uitgeschakelde menu-optie)

Highlight Achtergrond van een selectie

HighlightText Tekst van een selectie

InactiveBorder Rand van een niet actief venster

InactiveCaption Titelbalk van een niet actief venster

InactiveCaptionText Tekst in de titelbalk van een niet actief venster

InfoBackground Achtergrond van een tooltip

InfoText Tekst in een tooltip

Menu Achtergrond van een menu

MenuText Tekst in een menu

Scrollbar Stationaire deel van een schuifbalk

ThreeDDarkShadow Donkere rand van drie-dimensioneel weergegeven elementen

ThreeDFace Een drie-dimensionaal weergegeven element

ThreeDHighLight Lichte schaduwrand van drie-dimensioneel
weergegeven elementen

ThreeDLightShadow Lichte rand langs drie-dimensioneel weergegeven elementen

ThreeDShadow Donkere schaduwrand van drie-dimensioneel weergegeven elementen

Window Achtergrond van een venster

WindowFrame Rand van een venster

WindowText Tekst in een venster

Bron: http://4umi.com/web/css/colorsystem.htm

Gebruik

Heel simpel, gewoon deze codes opgeven op de plek van een kleur in de CSS:

Code: Selecteer alles

body {
  background: WindowFrame;
}


Ondersteuning
Het werkt in ieder geval in IE6+7, Firefox win32/Linux en Opera 8 & 9 (win32). De meeste overige browsers zullen het ook wel snappen aangezien het gewoon onderdeel is van de CSS specificatie afaik.

niet helemaal, zie screenshot

Hmmmm. Als ik ergens van houd, dan is het wel een .BMP-file.

sorry, ik had hem als EXTENSIE PNG opgeslagen maar met de INDELING BMP, nu zou het goed moeten zijn met de INDELING PNG dus

ddaemen schreef:niet helemaal, zie screenshot

[plaatje]

En wat bedoel je hier nu mee Je moet wel vertellen over welk OS met welke theme het gaat, welke browser je gebruikt en of dit nu wel of niet werkt.

nou, ik gebruik windows XP SP2 silver theme, heb gewoon IE6 en als ik die site open, dan is het menu (waar "download" enzo staat) verdwenen, en op die screenshots van jouw staat die er wel. de achtergron is gewoon wit van dat menu en de tekst ook wat het dus onzichtbaar maakt. ik zie wel de knoppen verschijnen als je met de muis eroverheen gaat

same here @ 2k3, Silver Theme, FF 1.5

ik denk dus dat het te maken heeft met Silver Theme...

zal wel ff een andere theme proberen...

yup, met olive theme wel de balk... dus je moet ff kijken of je daar wat mee kan doen....

Wat aangepast aan het menu.

het is nu wel te zien, maar als ik het vergelijk met je andere menu's, vind ik de oude menu's mooier...

maargoed, ik zou ook niet weten welke CSS-oplossing hiervoor zou zijn...

Ja, ik kan het ook niet helpen dat Microsoft zich niet aan hun eigen thema richtlijnen houdt.

Willen jullie de screenshots verkleinen zodat ze netjes binnen het forum passen?

Nog 2 screenshots:
http://www.cybertinus.nl/temp/Systeem_kleuren_FF20.png
Firefox 2.0 in Gentoo Linux

http://www.cybertinus.nl/temp/Systeem_k ... queror.png
Konqueror 3.5.5 ook al op Gentoo Linux

Zeker FF ziet er schitterend uit

Dus heel leuk dat je systeemkleuren kan gebruiken, maar aangezien het er bij iedereen anders uit ziet zou ik het zelf niet gebruiken.


[Edit by deWit:]
Afbeeldingen omgezet in linkje, anders slopen ze de layout nogal erg!

hmmm, wat zou er dan gebeuren als je themes van derden probeert?? (Niet Microsoft Themes) dan krijg je waarschijnlijk zo'n indeling als Cybertinus