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 vytvme dynamick obrzkov tlatka (rollovery), mus se obvykle do prohlee nast dva, ti i vce obrzk (pro zkladn stav, pro
:hover, obrzek pro :active atd.). asto se nataj i pedem na pozad, aby uivatel pi zmn stavu nemusel ekat na naten dalho
obrzku (preload).Kdy ale vechny tyto obrzky spojme do jedinho obrzku, dynamick zmny urychlme a navc nen teba
dnho preloadu.
Vezmme si jednoduch pklad. Poloky menu jsou tvoeny prvky "a" s nastavenm

display:block. Vhodn nastaven vpln

(padding) a obrzek na pozad pro a, a:hover a a:activevytvej dynamick tlatko (rollover). Pro jeho zjednoduen jsem
pouil jen jeden obrzek, obsahujc ti stavy tlatka normln, :hover a :active.

Obr. 1: Ti stavy souasn v jednom obrzku

V CSS rolloverech pouvme obrzky na pozad obvykle njak 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 pouijeme jeden spolen obrzek, mnit obrzek na pozad nemusme. Sta zmnit jeho umstn (hodnota backgroundposition). Pro stav :hover se pouije pozad posunut o vhodn poet pixel (v naem pkladu to je o 157px doleva), stav :active pouije
posun jet vt (v pkladu 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;

...

HOJAS DE ESTILO PARA LA WEB

TRUCOS Y SUGERENCIAS PARA CSS
Texto con sombra
Texto con sombra borrosa
Texto blanco legible
Varias sombras
Contornos
Brillo de nen

TEXTO CON SOMBRA

El CSS nivel 3 tiene una propiedad llamada "text-shadow" que
permite aadir una sombra a cada letra de un texto. En su
forma ms simple, es ms o menos as:
h3 {text-shadow: 0.1em 0.1em #333}

Esto aade una sombra gris oscuro (#333) un poco a la

derecha (0.1em) y abajo (0.1em) en relacin con el texto
normal. El resultado se ve as:

The noak and the barcicle

(En agosto de 2005, no todos los navegadores son totalmente
compatibles con la propiedad "text-shadow". El ejemplo
anterior debera funcionar al menos en Safari y Konqueror).

TEXTO CON SOMBRA BORROSA

La forma ms sencilla de la propiedad "text-shadow" tiene dos

partes: un color (como #333 en el ejemplo anterior) y un
desplazamiento (0.1em 0.1em en el ejemplo anterior). El
resultado es una sombra ntida con el desplazamiento
indicado. Pero tambin puede hacerse que el desplazamiento
sea impreciso, lo que da por resultado una sombra ms o
menos borrosa.
La
cantidad
de
imprecisin
se
da
como
otro
desplazamiento. Aqu se muestran dos lneas, una con un
poco de imprecisin (0.05em) y la otra con mucha imprecisin
(0.2em):
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

What do you say? said the UK

In order to see more clearly
TEXTO BLANCO LEGIBLE
El uso de sombras puede hacer ms legible el texto cuanto
hay poco contraste entre el primer plano y el fondo. Lo que
sigue es un ejemplo de texto blanco contra fondo azul plido,
primero sin sombra y luego con ella:
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Sin sombra:

What is in it for me?

Con sombra:

With a shovel and some oranges

VARIAS SOMBRAS
Tambin es posible poner ms de una sombra. En general, el
resultado es un tanto extrao:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}

I wish wish wish

Pero colocando acertadamente dos sombras, una oscura y la
otra clara, el efecto puede ser til:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

I, Augustus (you know who)

That's extra, of course
Esto es un poco peligroso, como podr apreciar si su
navegador no admite la propiedad "text-shadow". De hecho,
en este ejemplo los colores del fondo y del texto son casi
iguales (#CCCCCC y #D1D1D1), de modo que sin las sombras
apenas existe algn contraste.

TRAZAR LETRAS COMO CONTORNOS

El ejemplo con dos sombras de la versin previa se puede
llevar todava ms all. Con cuatro sombras, es posible dar a
las letras un contorno:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera
No es un contorno perfecto y, por ahora (agosto de 2005)
sigue en discusin el tema de si CSS debera tener una
propiedad separada (o tal vez un valor para la propiedad
"text-decoration") que permita hacer contornos de mejor
calidad.

BRILLO DE NEN
Si se pone una sombra borrosa justo detrs del texto, es decir,
con desplazamiento igual a cero, el efecto es un resplandor
alrededor de las letras. Si el resplador de una sola sombra no
es suficientemente intenso, basta repetir la misma sombra
unas pocas veces:
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}

With a zest of best

There's no no like a better no
Indeed, quite right, Mr M

CSS Sliding Door using only 1

image
May 27th, 2008 in CSS, Tutorials by kailoon

Before I know about this technique, I was using different images for each
of the button I needed in a navigation bar. I found that it is not user friendly and also need more
CSS coding. Besides, it is increasing the processing time and bandwidth in loading a site. In this
tutorial, I will show you how to code the navigation bar using only 1 image. I will not cover the image
creation part because I think you should know how to do that after follow few of my tutorials in the
past. So, start here

The Image

I will not show how to create this but I will let you guys download the psd file as a reference. I
provided 4 types of colors as default, you can edit them according to your preferences. Download
the psd here and I even prepared the slices for you. What you need in building the navigation menu
is only a 493px X 24px image like below.

Before we start, head over and see what we are going to achieve from this tutorial.

Concept
The concept of the sliding door is to use a background image for the buttons in a navigation menu. I
am using a span within a link in the list to hold a part of the image. the link itself will hold another
part of it. Which means, the important part will be the background-image position.

HTML
?

<ul class="blue">

<li><a href="#" title="home">home</a></li>

<li><a href="#" title="products">products</a></li>

<li><a href="#" title="blog">blog</a></li>

<li><a href="#" title="contact">contact</a></li>

</ul>

Now, I add in a <span> for each of the link to hold the left hand side of the background image.
?

<ul>

<li><a href="#" title="home" class="current"><span>home</span></a></li>

<li><a href="#" title="products"><span>products</span></a></li>

<li><a href="#" title="blog"><span>blog</span></a></li>

<li><a href="#" title="contact"><span>contact</span></a></li>

</ul>

CSS
1. <ul> Unorder-List
?

ul {

2
padding: 5px;

margin: 10px 0;

list-style: none;

5
6

float: left;
}

7
8

ul li {

float: left;

10

display: inline; /*For ignore double margin in IE6*/

11
12

margin: 0 10px;
}

13
14

ul li a {

15

text-decoration: none;

16

float:left;

17

color: #999;

18

cursor: pointer;
font: 900 14px/22px "Arial", Helvetica, sans-serif;

19
20

21
22

ul li a span {
margin: 0 10px 0 -10px;

23

padding: 1px 8px 5px 18px;

24

position: relative; /*To fix IE6 problem (not displaying)*/

25
26
27

float:left;
}

We need to make list-style as none because no image for any list within it. I use a float left here
because I am going to use float left for the <span> and also <li>. I am not going to define a width
for it because this is just a sample.
4. <Hover> mouse over action
?

ul.blue li a.current, ul.blue li a:hover {

background: url(images/blue.png) no-repeat top right;

color: #0d5f83;

5
6

ul.blue li a.current span, ul.blue li a:hover span {

background: url(images/blue.png) no-repeat top left;

7
8

Since we are going to have the same effect for the mouse over and active link. I combine the codes.
Here is another example with 4 colors.

Compatibality, Conclusion and Download

This script has been tested in IE6, 7, Firefox 3.5.5, Safari and Google Chrome. This is a very useful
technique which you can re-use in page with only 1 image. It is easy to use and I hope that you
guys can understand my poor English explanation. Any question, just send me an email or drop me
a comment here.

Update ( 10th Decemeber 2009 )

Thanks Dimitar Yanev for the advice to not using empty tags, I decided to update the codes. I hope
you guys enjoy this little trick!