BlogStyle

Vamos por este primer tutorial espero de muchos en el que vamos a ver como crear un enlace sin texto ni imagenes y para que nos puede servir.

De ejemplo vamos a usar esta parte del template:

Como vez son 3 enlaces que al pasar el puntero sobre ellos se alza formando un bonito efecto; Vamos a ver como crearlo.

En realidad lo que pasa es que le ponemos un background al enlace y al pasar el puntero por encima se cambia por otro que parece que se ha alzado. Para crearlo y dejarlo más claro necesitamos esta imagen:

E insertamos un enlace en un html con un texto dentro del enlace entre <span>:

<a class="css" href="#"><span>Validación CSS</span></a>

Ahora pasamos al CSS donde sucede la magia:

body {
 
background-color: #000000;
 
}
 
a {
 
display: block;
 
width: 100px;
 
height: 65px;
 
background-repeat: no-repeat;
 
background-position: left top;
 
}
 
a:hover {
 
background-position: left bottom;
 
}
 
a span {
 
display: none;
 
}
 
a.css {
 
background-image: url(css.jpg);
 
}

Lo que hicimos es primero a la etiqueta body asignarle un fondo negro para que combine con la imagen, segundo a la etiqueta ‘a’ en las propiedades del background una posición left top y un no-repeat; también lo convertimos en un bloque y le dimos un alto y ancho de acuerdo con la imagen de fondo del enlace, luego en el ‘a:hover’ hicimos que el background se desplaze hasta abajo para que haga el efecto y al ’span’ hijo de ‘a’ un display:none para que no aparezca en pantalla, por último a la clase .css le asignamos cual será su background-image.

Aqui les dejo el ejemplo.

Espero les haya gustado este primer tutorial y que hayan aprendido algo.

Tags: (X)HTML, CSS, Tutoriales

Trackback