El uso de sprites en CSS es una práctica muy común en los desarrolladores web, esto se hace para poder reducir el tiempo de carga de imágenes en el portal que estas desarrollando. Ahora vamos a ver como funcionan los sprites y que necesitas hacer para poder crear el tuyo.
En este caso vamos a comenzar con el diseño de un botón y vamos a hacer el código necesario para su buen funcionamiento.
Vamos a diseñar nuestro botón en photoshop y va a ser solamente una base de gradientes y lineas , para comenzar creamos un forma de esquinas redondeadas, las proporciones del botón depende del diseño que ustedes necesitan, en mi caso lo voy a hacer de 360 x 110 px y esta será la base que tomare para el código CSS.
Ahora le aplicaremos algunos estilos para dar volumen y forma a nuestro botón
Este es el resultado que debemos de obtener después de haber aplicado nuestros estilos.
Escribe lo que te gustaría que llevara el boton y agregale la fuente y estilos apropiados para tu diseño, en este caso yo usaré la letra Cambria y los siguientes estilos:
Este es el resultado que hemos obtenido.
Selecciona el botón y el texto, arrastralo mientras presionas las teclas ALT y SHIFT para duplicarlo. Alinea el botón duplicado justo debajo del botón original, respetando la sombra que le asignamos. Modifica los estilos del botón superior para darle un fondo de diferente color. Por ultimo utilizaremos la herramienta TRIM para ajustar el lienzo al tamaño de nuestra imagen
Oculta el fondo y guarda la imagen presionando ALT, CTRL, SHIFT y la tecla S, recuerda que debemos de guardar la imagen como PNG para que nos respete las transparencias del fondo.
Abre tu aplicación favorita para el desarrollo de código y creamos un simple HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ejemplo Sprite CSS |
Para crear el boton agregaremos un pequeños parrafo y dentro de el un anchor que es el que nos va a dar el enlace para nuestro botón, la clase para este anchor va a ser “btn”
1 | <p><a href="#" class="btn">Sprite CSS |
Ahora empezaremos con la magia del CSS.
1 2 3 4 5 6 7 8 9 10 11 | #btncss p a.btn {background-image: url(btn_css.png);/*Asignamos el fondo*/background-position: top; /*Definimos la posición del fondo*/text-indent: -9999px;/*Desaparecemos el txt "Sprite CSS"*/display: block;/*Lo mostramos en bloque, para poder definir width y height*/width: 364px; height: 114px; /*Definimos medidas del boton*/}#btncss p a.btn:hover {background-position: bottom; /*Definimos la posición del fondo*/} |
Como lo comentamos al principio del tutorial, las medidas de nuestro botón se definieron de 360 x 110px y le agregamos 4px por el efecto de sombra que le hemos aplicado.
La descripción de cada linea esta en el código anterior, recuerda que siempre que trabajes con anchor o el tag “a” debes de definir en que manera lo quieres desplegar, en este caso lo haremos en bloque para poder asignar una altura y anchura determinada.
0 comentarios:
Publicar un comentario