Mönstrad bläddringslist
I Internet Explorer finns möjligheten att färga bläddringslisten med hjälp av CSS-kod.
Jag har fått frågan om man kan göra så att "track"-delen, dvs bakgrunden på bläddringslisten, blir mönstrad och detta är den lösning jag kommit fram till. Jag har skrivit kommentarer i koden så att det ska vara lätt att gå in och ändra efter de bakgrunder och färger som man själv vill använda. Observera att detta bara fungerar i Internet Explorer! I andra webbläsare ser scrollen ut som vanligt. Om du får problem så maila mig. Hämta hem koden här.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Katarina Wästlund">
<!-- This code is written by Katarina Wästlund, http://kattisdesign.wastlund.se, and can be used for pages for personal use as long as this comment stays intact.
If you use this code for making linkware you must link to my page: http://kattisdesign.wastlund.se -->
<title>Mönstrad bläddringslist/ Scrollbar with patterned background</title>
<style type="text/css">
<!--
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
/*sätt färgerna på din scrollbar, fungerar endast i IE*/
/*Add the colours for your scrollbar, works only in IE*/
scrollbar-face-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color : #FFFFFF;
scrollbar-darkshadow-color : #000000;
scrollbar-base-color : #000000;
/*Sätt en färg på din track som inte används någon annanstans på sidan.
Denna färg kommer att bli genomskinlig*/
/*Add a color for your track. This colour should not be used anywhere else on the page,
since it will become transparent.*/
scrollbar-track-color : #FF0000;
/*Här sätter du den bakgrund som kommer att lysa igenom.*/
/*Here is the background that will shine through.*/
background : url("http://kattisdesign.wastlund.se/grafik/textures/greenglass.jpg");
/*Ange en bakgrundsfärg i samma färgnyans som bakgrunden medan sidan laddas*/
/*Add a background color in the same colour as the background while the page is loading*/
background-color: #B3CFB3;
overflow : auto;
}
.contentbox {
width: 100%;
height: 100%;
overflow: auto;
/*Här sätter vi vilken färg som ska bli transparent*/
/*Here is the color that will be transparent*/
filter: chroma(color=#FF0000);
/*Ange en bakgrundsfärg i samma färgnyans som bakgrunden på sidan medan sidan laddas*/
/*Add a background color in the same colour as the main background while the page is loading*/
background-color: #f4c6dc;
/*Bakgrunden på sidan*/
/*The main background on the page*/
background: url("http://kattisdesign.wastlund.se/grafik/textures/pinkmarmor.gif");
}
-->
</style>
</head>
<body>
<div class="contentbox" allowtranparency="true">
<p>Lägg till din text här...<br>
Add your text here...</p>
</div>
</body>
</html>
© Kattis 2004