Buenas practicas para maquetar con sprites
Esta es una practica que no he visto que sea muy extendida pero que es de las mas eficientes para un maquetador por la buena organización que presenta.
La idea es simple. creas un selector para el sprite, un selector por imagen del sprite y por ultimo vas asignándole el par class=”un-elemento-x sprite icono-del-sprite”
Pongo un ejemplo de como armaríamos la base CSS:
|
1 2 3 4 |
/*Primero defino el sprite*/ .sprite { background: url(sprite.png) #transparent no-repeat; } |
|
1 2 3 4 5 6 7 8 9 |
/*Ahora los class de las imagenes contenidas en el sprite*/ .sprite.destacado { background-position: 0 -462px; } .sprite.aceptado { background-position: 0 0; } .sprite.cancelado { background-position: 0 -66px; } .sprite.editado { background-position: 0 -132px; } .sprite.eliminado { background-position: 0 -198px; } .sprite.rss { background-position: 0 -264px; } .sprite.me-gusta { background-position: 0 -330px; } .sprite.bloqueado { background-position: 0 -396px; } |
Para terminar un ejemplo practico:
- Elementos destacados 50
- Elementos cancelados 10
- Elementos eliminados 200
Chau.
MAL!!! para que funcione los css deberian ir juntos, no separados por un espacio, me refiero por ejm a esto:
esto está mal
.sprite .cancelado
esto esta bien
.sprite.cancelado
saludos
Ho por dios que descuido! gracias man lo corrijo ya.
Saludos…
Permítanme mostrar un procedimiento muy sencillo de cómo crear un menú con íconos utilizando una imagen única y CSS… ¡En sólo tres pasos! http://tinyurl.com/6nwrhhs
Gracias y ¡Abur!