• CSS3  slider
  • Wordpress
  • Bootstrap  slider
  • jQuery  slideshow
CSS slider

Fade Animation & Impress Layout Non Jquery Carousel

Con el uso de un atractivo color rosa y blanco, el slideshow es dramático, elegante y es ideal para las escritoras de blog, diseñadores de moda y para cualquier persona que desee ese rosa atractivo.

Este deslizador de imágenes es completamente sensible, tiene un borde rosa que lo ayuda a resaltar del resto del sitio web. Se vería particularmente dramático en un fondo negro, pero sobresale en casi cualquier color.

Hay un nítido titulado en la esquina inferior izquierda. El titulado desaparece, cayendo a su lugar desde arriba al mismo tiempo. Es un efecto de transición un poco fuerte, pero que refuerza el diseño atrevido y elegante.

El titulado utiliza una letra blanca sobre un rectángulo transparente con esquinas curvas y un margen blanco. Debido a que la letra es blanca, es necesario que se utilicen imágenes oscuras o coloridas - las letras no se verán bien con imágenes blancas o de colores claros.

El texto utiliza la letra ‘ubuntu’, la cual es legible en pantallas y en una gran variedad de tamaños. Como resultado, el titulado es extremadamente legible aun en fondos de bajo contraste.

Al pasar sobre la imagen actual hace que caigan tres íconos en la misma. Estos son: dos para pasar a la siguiente imagen o a la anterior, localizados en ambos lados, y uno para pausar o continuar la animación, localizado al centro. Estos iconos utilizan un diseño similar al del titulado, por lo cual son íconos blancos sobre un círculo blanco transparente con un margen blanco. Al pasar sobre un ícono hace que aparezca un sólido y atractivo color rosa desde la parte superior, cubriendo el margen. Nuevamente, éste es un efecto de transición agradable y un gran detalle en el diseño.

Al fondo del presentador de imágenes hay una serie de círculos transparentes con margen blanco. Estos proveen al usuario con una manera adicional de navegar a través del slideshow. Cada círculo representa una imagen en el mismo y al hacer clic en cualquiera, permite que el usuario vea la imagen correspondiente. El círculo conectado a la imagen actual se torna de un color sólido rosa (similar al de los demás íconos) y le deja saber al usuario que puede interactuar con esos círculos.

Al pasar sobre un círculo hace que se deslice una imagen preliminar a la vista. Cada imagen preliminar tiene un margen rosado y pequeñas flechas apuntando al círculo apropiado, lo cual le permite al usuario saber qué imagen está conectada a cada círculo.

Dado a que el presentador de imágenes es solo CSS lo hace perfecto para teléfonos inteligentes, tabletas y otros dispositivos móviles. No hay necesidad de preocuparse por tiempo de carga ya que no hay íconos de imágenes que bajar. Tampoco hay necesidad de preocuparse por navegadores que no contienen Javascript o JQuery. En fin, éste es un presentador flexible y con un diseño moderno.