Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Sprites de imagen


Sprites de imagen

Un objeto Sprite imagen es una colección de imágenes puestas en una sola imagen.

Una página web con muchas imágenes puede tomar mucho tiempo para cargar y genera múltiples peticiones al servidor.

El uso de sprites imagen se reducirá el número de solicitudes de servidor y ahorrar ancho de banda.


Sprites de imagen - Ejemplo simple

En lugar de utilizar tres imágenes separadas, utilizamos esta imagen única ("img_navsprites.gif") :

imágenes de navegación

Con CSS, podemos mostrar sólo la parte de la imagen que necesitamos.

En el siguiente ejemplo, el CSS especifica qué parte de la "img_navsprites.gif" imagen para mostrar:

Ejemplo

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
Inténtalo tú mismo "

Ejemplo explicó:

  • <img id="home" src="img_trans.gif"> - define Sólo una pequeña imagen transparente porque el atributo src no puede estar vacío. La imagen que se muestra será la imagen de fondo se especifica en CSS
  • width: 46px; height: 44px; width: 46px; height: 44px; - Define la parte de la imagen que queremos usar
  • background: url(img_navsprites.gif) 0 0; - Define la imagen de fondo y su posición (a la izquierda 0px, superior 0px)

Esta es la forma más fácil de usar móviles de imágenes, ahora queremos expandirlo con enlaces y se ciernen efectos.


Sprites de imagen - Crear una lista de navegación

Queremos utilizar la imagen de sprite ("img_navsprites.gif") para crear una lista de navegación.

Vamos a utilizar una lista HTML, ya que puede ser un enlace y también es compatible con una imagen de fondo:

Ejemplo

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}
Inténtalo tú mismo "

Ejemplo explicó:

  • #navlist {position:relative;} - posición se establece en relación a permitir el posicionamiento absoluto en su interior
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margen y el relleno se establece en 0, se elimina la lista de estilo, y todos los elementos de la lista son absolutos posicionado
  • #navlist li, #navlist a {height:44px;display:block;} - la altura de todas las imágenes son 44px

Ahora empieza a la posición y el estilo para cada parte específica:

  • #home {left:0px;width:46px;} - Posicionado todo el camino a la izquierda, y la anchura de la imagen es de 46 píxeles
  • #home {background:url(img_navsprites.gif) 0 0;} - Define la imagen de fondo y su posición (a la izquierda 0px, superior 0px)
  • #prev {left:63px;width:43px;} - 63px hacia la derecha (+ #home 46 píxeles de anchura algo más de espacio entre los elementos) Posicionado, y el ancho es de 43px.
  • #prev {background:url('img_navsprites.gif') -47px 0;} - Define el 47px imagen de fondo a la derecha (#home anchura de 46 píxeles + 1px línea de división)
  • #next {left:129px;width:43px;} - Posicionado 129px hacia la derecha (inicio de #prev es 63px 43px + ancho + #prev espacio extra), y el ancho es de 43px.
  • #next {background:url('img_navsprites.gif') -91px 0;} - Define el 91px imagen de fondo a la derecha (#home anchura de 46 píxeles + 1px línea divisoria + ancho + #prev 43px 1px línea de división)

Sprites de imagen - Efecto de la libración

Ahora queremos añadir un efecto de vuelo estacionario a nuestra lista de navegación.

Nota Consejo: El :hover selector se puede utilizar en todos los elementos, no sólo en los enlaces.

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes de navegación y tres imágenes a utilizar para efectos de activación:

imágenes de navegación

Debido a que este es uno no seis archivos separados sola imagen, y,no habrá retardo en la cargacuando un usuario se desplaza sobre la imagen.

Solo agregamos tres líneas de código para agregar el efecto emergente:

Ejemplo

#home a:hover {
    background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
    background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
    background: url('img_navsprites_hover.gif') -91px -45px;
}
Inténtalo tú mismo "

Ejemplo explicó:

  • #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Para las tres imágenes de la libración especificamos la misma posición de fondo, sólo el 45 píxeles más abajo