Efectos de conversión de imágenes con CSS

Al mover el cursor del ratón sobre una imagen en una página Web, es posible que aparezca un efecto de vuelco de animación creado usando JavaScript o CSS. Los vuelcos se producen cuando una página Web en lugar de una imagen con otra en respuesta al movimiento del ratón de un usuario. Los sitios no necesitan vuelcos, pero estos efectos pueden agregar interés visual a las páginas Web. Si usted no sabe de JavaScript y que desea añadir vuelcos imagen de su sitio web, que puede hacer que el uso de CSS.

Los vuelcos CSS

CSS efectos rollover requieren más trabajo para establecer que los efectos de rollover de JavaScript, pero hay ventajas a usar CSS para crear sustituciones de imagen. Cuando se utiliza CSS, se reduce el tiempo necesario para que el servidor Web para transferir las imágenes utilizadas en el efecto que el navegador web de un usuario. También hace sus efectos de conversión visible a todos los visitantes del sitio, en lugar de sólo los que esté activado Javascript en su navegador.

Propiedades CSS

Los propietarios de sitios usan CSS para objetos de estilo en sus páginas web. CSS atributos tales como color de fondo, borde y ancho de definir la manera las imágenes se ven en una página Web. clases CSS definen estos atributos. La siguiente clase CSS contiene dos atributos, llamado border-width y border-style:

.cssClass {
border-width: 2px; Border-style: sólido;
}

Si una imagen referencia a esta clase, la imagen se mostrará un borde sólido que es dos píxeles de ancho. clases CSS también pueden añadir una imagen de fondo a un elemento de la página web.

Sprites de imagen

Los desarrolladores añadir efectos de conversión de CSS para sitios web mediante la colocación de los sprites en sus páginas. Un sprite es una imagen de gran tamaño formada por imágenes más pequeñas. Crear un sprite en un editor de imágenes mediante la colocación de dos imágenes adyacentes dentro de una imagen en blanco más grande. La imagen de la izquierda será la imagen que los visitantes del sitio ver cuando se carga la página Web. La imagen de la derecha será el que desea mostrar cuando un ratón se mueve sobre el sprite. Ambas imágenes deben ser del mismo tamaño.

Ancla Etiquetas Necesaria

las etiquetas HTML de anclaje, también llamados enlaces, hacen posible vuelcos imagen CSS. etiquetas de anclaje pueden utilizar las clases CSS seudo que definen la forma en que un enlace es cuando un ratón se mueve sobre el enlace. El siguiente ejemplo muestra una clase de pseudo llamado "flotar" unido a una clase CSS regulares nombrados myClass:

a.myClass: hover {background-position: -300px 0; }

Cualquier ancla que hace referencia a esta clase va a cambiar su imagen de fondo 300 píxeles hacia la derecha cuando se produce un vuelco ratón, creando el efecto de vuelco. La etiqueta de anclaje también se debe hacer referencia a la clase CSS principal que define la altura y la anchura de cada imagen en tu sprite.