Tips: Mörka en sida
Jag såg ett inlägg från någon som undrade hur utvecklarna bakom webForum kunde göra sidan svartvit i explorer när man klickar på 'Logga ut'.
Jag blev lite intresserad och försökte kolla om det var möjligt att göra i Firefox.
Tyvärr verkar det inte som att man kan få webbsidan att bli svartvit, men däremot var det inga problem att mörka ner sidan, vilket ju kan vara nog så bra.
Metoden jag gjorde detta på var att slänga upp ett lager framför webbsidan med en halvtransparent png-bild i. Sidan kommer då att mörkas ner.
Eftersom inte explorer stödjer transparens i png-bilder för än i version 7.0 så fick det bli lite specialfall för äldre explorer-versioner.
Här är exempelkoden:
För att mörka ner sidan så kallar man på bwFade(); Jag har ingen funktion för att ta bort nermörkningen, men det är ju bara att byta ut display="block" mot display="none" för att få till det.
Om du använder en Doctype i ditt html-dokument så kan det hända att bredden och höjden blir fel. Sätt då in följande style:
Bifogat finns den lilla png-bilden som används för bakgrunden.
Jag blev lite intresserad och försökte kolla om det var möjligt att göra i Firefox.
Tyvärr verkar det inte som att man kan få webbsidan att bli svartvit, men däremot var det inga problem att mörka ner sidan, vilket ju kan vara nog så bra.
Metoden jag gjorde detta på var att slänga upp ett lager framför webbsidan med en halvtransparent png-bild i. Sidan kommer då att mörkas ner.
Eftersom inte explorer stödjer transparens i png-bilder för än i version 7.0 så fick det bli lite specialfall för äldre explorer-versioner.
Här är exempelkoden:
HTML Code:
<html> <head> <script type="text/javascript"> <!-- function bwFade() { var el = document.getElementById('bwFadeDiv'); el.style.display = "block"; } // --> </script> <style type="text/css"> #bwFadeDiv { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; z-index: 1000; background-image: url('bwFadeBG.png');" } </style> <!--[if gte IE 5.5]> <![if lt IE 7]> <style type="text/css"> #bwFadeDiv { background-image: url(''); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bwFadeBG.png',sizingMethod='scale'); } </style> <![endif]> <![endif]--> </head> <body> <div id="bwFadeDiv"> </div> INNEHÅLL PÅ SIDAN </body> </html>
Om du använder en Doctype i ditt html-dokument så kan det hända att bredden och höjden blir fel. Sätt då in följande style:
Code:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
Comment