24 Jul

Cambiar el estilo visual de los checkbox con CSS3

El checkbox es uno de esos elementos a los que uno no suele prestarle demasiada atención. Esto se debe a que su función es tan simple que no nos detenemos a analizar como mejorar su aspecto estético. Gracias a CSS3 podemos realizar cambios visuales de manera simple y rápida.

CSS3 Checkbox Styles es un excelente ejemplo de como mejorar y modificar el aspecto visual de un checkbox de forma simple y utilizando solamente hojas de estilo para lograrlo. El resultado, simplemente excelente:


Este fantástico recurso es compatible con la mayoría de los navegadores modernos, salvo Internet Explorer 8. Una lastima.

El funcionamiento de este recurso es muy interesante. Lo que el autor hizo fue ocultar los checkbox originales por lo limitado que resulta la modificación del aspecto visual, en su lugar muestra estos elementos mucho más atractivos y divertidos, los mismos al cambiar su estado hacen lo mismo con el checkbox original que se encuentra oculto. Muy simple pero no por eso menos efectivo

Web: CSS3 Checkbox Styles

Share this
11 Feb

Slider de imágenes con etiquetas estilo acordeón con jQuery

LiteAccordion es un pequeño y atractivo plugin para jQuery para la creación de sliders animados. Combina la disposición estilo acordeón, utilizando para ello unas hermosas etiquetas marcando la transición entre las distintas dispositivas. A su vez utiliza el clásico esquema HTML basado en listas anidadas para la estructura básica del visor.

LittleAcordeon hace perfecto honor a su nombre, siendo un slider que pesa apenas 4 KB en su versión normal, y sorprende con el peso de su versión simplificada que tiene un tamaño inferior a los 1.6 KB, increíble.

Si bien la idea inicial del creador era utilizar este slider solo para imágenes, es importante aclarar que puede ser utilizado con otros archivos, por ejemplo textos, vídeos, o bien cualquier elemento que coloquemos dentro de las divs utilizadas en su estructura esqueleto.

slider estilo acorderon con etiquetas jQuery

Inicialmente el plugin muestra un slider de 960px de ancho, esto puede ser fácilmente modificado mediante parámetros de configuración a la hora de inicializar el plugin, ademas de obviamente unas pocas lineas en las hojas de estilo.

Ejemplo de uso:

$('#slider').liteAccordion({
        onTriggerSlide : function() {
            this.find('figcaption').fadeOut(); }, onSlideAnimComplete : function() { this.find('figcaption').fadeIn(); }, autoPlay : true, pauseOnHover : true, theme : 'stitch', rounded : true, enumerateSlides : true }).find('figcaption:first').show();

Actualmente el slider esta probado en las ultimas versiones de los navegadores más populares, eso incluye Firefox, Chrome, Safari y Opera, tanto en Windows 7 y OSX. El navegador que no es soportado, y como muchos están sospechando, es el Internet Explorer 6.

Utilizar este plugin es gratuito tanto en sitios personales, como comerciales, el autor aclara que no desea, ni tiene planeado, vender este plugin, aunque no desprecia ningún tipo de donaciones o contribuciones con el proyecto :D

No olviden visitar la demostración online, de paso pueden leer un poco más acerca de las opciones disponibles a la hora de configurar este fantástico plugin.

Web: liteAccordion

Share this

© 2006 Miracle Design. Todos los derechos reservados