Style Your Image Links
Mouse over behaviors have a certain significance when we’re talking about usability. Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. But what can you do with image mouseovers? Add a different border? This script will certainly help you to do a bit more than that…
Drop shadow div (IE)
<div style=” color: White; background-color: Maroon; width: 200px; height: 200px; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=’gray’, Positive=’true’)”> xxxxxxxxxx</div>
Solve problem Div Height for difference Browser (ie 6, ie 7, firefox and other)
<body style=”height: 100%; width: 100%; padding: 0px; margin: 0px;”>
IE.
HTML page:
<head>
<title>my css hacked page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”iehacks.css”>
<![endif]–>
<body>
<div class=”watermark”>….</div>…
styles.css
/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
background-color: black;
background-image: url(’images/gradient.jpg’);background-position: left top;
background-repeat: repeat-x;
} /* black background with gradient on top. */div.watermark {
background-image: url(’images/watermark.png’); /* transparent */
background-position: left top !important; /* for all but IE */
background-position: right top; /* for IE */
background-repeat: no-repeat;
}
iehacks.css
/* for IE6 and older */
div.watermark {
background-image: url(’images/watermark.gif’); /* here is a transparent that will be displayed better in IE6 and older */
}
Ofcourse above is just an example using semi-transparent png for all browsers but IE6 and older. Like that you’ll be able to make your website more compatible.
Setting div height=100%
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:80px;
padding:0;
width:200px;
height:60%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
CSS Technique: Fast Rollovers Without Preload
When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.
Let’s have a simple example. The menu items are the a-elements with display:block. Proper padding and background image for a, a:hover and a:active make the rollover. To simplify the rollover, I used only one picture containing three states of a button — normal, :hover, and :active.
Fig. 1: Three states together in one image
Usually, in CSS rollovers, we use background images in this way:
Když vytváříme dynamická obrázková tlačítka (rollovery), musí se obvykle do prohlížeče načíst dva, tři i více obrázků (pro základní stav, pro :hover, obrázek pro :active atd.). Často se načítají i předem na pozadí, aby uživatel při změně stavu nemusel čekat na načtení dalšího obrázku (preload). Když ale všechny tyto obrázky spojíme do jediného obrázku, dynamické změny urychlíme a navíc není třeba žádného preloadu.
Vezměme si jednoduchý příklad. Položky menu jsou tvořeny prvky “a” s nastavením display:block. Vhodné nastavení výplně (padding) a obrázek na pozadí pro a, a:hover a a:active vytvářejí dynamické tlačítko (rollover). Pro jeho zjednodušení jsem použil jen jeden obrázek, obsahující tři stavy tlačítka — normální, :hover a :active.
Obr. 1: Tři stavy současně v jednom obrázku
V CSS rolloverech používáme obrázky na pozadí obvykle nějak takto:
#menu a { ... background: url("button.gif") top left no-repeat; } #menu a:hover { ... background-image: url("button-over.gif"); } #menu a:active { ... background-image: url("button-active.gif"); } /* etc... */
Using one common picture, we don’t need to change the background image. We just change its background-position. The :hover state will use the background image moved proper count of pixels (in the example the shift is 157px to the left), the :active state will use bigger shift (by 314px in the example).
Když ale použijeme jeden společný obrázek, měnit obrázek na pozadí nemusíme. Stačí změnit jeho umístění (hodnota background-position). Pro stav :hover se použije pozadí posunuté o vhodný počet pixelů (v našem příkladu to je o 157px doleva), stav :active použije posun ještě větší (v příkladu o 314px).
#menu a { background: url("button.gif") 0 0 no-repeat; ... } #menu a:hover { background-position: -157px 0; ... } #menu a:active { background-position: -314px 0; ... } ref: http://wellstyled.com/css-nopreload-rollovers.html
