Si han intentado realizar menúes que respondan de determinada manera a los movimientos del ratón, probablemente han hecho uso del a:hover para cambiar el color. Pero hoy en día se pueden animar estas respuestas a través del uso de Selectivizr, un JavaScript que permite que estas pequeñas animaciones aplicadas a los botones puedan visualizarse correctamente en todos los exploradores, incluído en IE6.
Como siempre les digo, mientras más opciones mejor, y si bien últimamente estuve enviando plantillas en .psd que requerían conocimientos de maquetación, también hay veces que encuentro plantillas que ya se encuentran en HTML y solo requieren algunos cambios mínimos que por lo general son solo gráficos.
MailCheck es un plugin jQuery de lo más simple pero no por eso menos útil. Sirve para validar direcciones de correo electrónico, pero no solamente su sintaxis, sino también verifica la validez del dominio que la acompaña. Es así que por ejemplo podemos validar si el usuario en lugar de escribir @hotmail.com escribe hotnail.com, sugiriendo del posible error.
Las animaciones que podemos realizar solo utilizando CSS3 y sin la necesidad de emplear JavaScript, son extremadamente poderosas. Probablemente en los próximos años la forma de animar los sitios web cambie radicalmente, haciendo más eficientes los sitios web.
Las propiedades para animar de CSS3 se pueden utilizar hoy en día, navegadores como Chrome, Safari, y Opera en casi todas sus versiones cuentan con soporte completo, lo mismo ocurre con Firefox e Internet explorer en sus versiones más nuevas. Así que si el publico de un sitio web se caracteriza por tener versiones nuevas de sus navegadores no habría ningún inconveniente en hacer uso de las propiedades para realizar animaciones de CSS3.
En TutorialZine, un blog excelente con muy buenos tutoriales y recursos para diseñadores, nos brindan en descarga directa un excelente menú animado que solo utiliza CSS3, ademas de obviamente el tutorial en donde se explica com ose implementaron las distintas propiedades.
El menú se ve de la siguiente manera:
No se olviden de visitar la demostración online.
El menú es muy simple pero cumple perfectamente su cometido. Mi sugerencia es comenzar a perderle el miedo a CSS3 y sobretodo a la compatibilidad cruzada con los distintos navegadores. La adopción de los navegadores más modernos se acelero considerablemente en estos últimos meses, algo que se ve reflejado en las estadísticas de cualquier sitio web.
Desde la red de desarrolladores de Mozilla llega a nosotros esta fantástica propuesta que consiste en un efecto de plegado de papel para ocultar elementos.
Este efecto sería una alternativa completamente nueva para realizar el trabajo de ocultar-mostrar elementos, complementando los clásicos efectos fade y sliding que se utilizan comúnmente para esta clase de tareas tremendamente conocidos por los programadores que suelen trabajar con el framework jQuery.
PaperFold esta desarrollado utilizando tecnologías como CSS3, JavaScript y HTML5.
Actualmente el proyecto es tan solo una propuesta de un desarrollador, pero viendo su buena aceptación no dudo que sea pulido y mejorado para ser utilizado de forma masiva.
Web: PaperFold
Como se habrán dado cuenta las aplicaciones de CSS3 parecen no tener límites. A medida que va pasando el tiempo, vamos descubriendo más y más opciones que quizás pueden no parecer útiles en un primer momento pero que pueden resultar la base de aplicaciones y conceptos posteriores que brinden aún más posibilidades al desarrollo de utilidades web y aplicaciones.
En este caso, quiero mostrarles una recomendación que encontré gracias a WebResourcesDepot, que ofrece varias opciones de animación de scrolls con diferentes efectos.
Ver Demo de CSS Scroll Effects | Lab.Hakim
Quizás en un primer momento les resulten extrañas, pero lo bueno de estos ejemplos es el poder ver el funcionamiento y entender las posibilidades que puede llegar a brindar su aplicación.
Hay una gran variedad de efectos para visualizar y utilizar en los casos que no requieran compatibilidad entre exploradores, ya que como saben, CSS3 no está normalizado. Sin embargo, es una buena oportunidad para pensar nuevas formas de desplegar información y obtener cierto atractivo desde el contenido a partir de las animaciones básicas o modificadas.
ArcText.js es un plugin jQuery basado en Lettering.js, que nos permite crear textos que sigan una curva, algo que es muy fácil de hacer con programas como Photoshop, no era tan fácil de lograr con jQuery y CSS3, al menos hasta ahora.
CSS3 permite rotar texto de forma muy sencilla, no obstante lo que no hace es seguir una curva. Para lograrlo el plugin realizar una rotación unitaria de cada letra para luego dar el efecto curvado a toda la frase.
Visiten la demostración del plugin online.
Ejemplo de uso de ArcText
$example1.arctext({radius: 300})
Con el plugin jQuery ArcText.js ya no quedan excusas para no aplicar el efecto de texto curvo a nuestros diseños, sin sobrecargar ni afectar los tiempos de descarga, ni agregando imágenes innecesarias.
Web: ArcText.js
En la búsqueda de opciones originales para presentar galerías fotográficas, se pueden encontrar diferentes métodos técnicos o se puede optar por opciones vistosas que solo cumplan con una función decorativa.
Al utilizar este tipo de elementos, debemos tener en cuenta que poseen una estética propia y generan un entorno en consecuencia, es por ello que si necesitan realizar algún proyecto extremadamente sobrio, puede que no sea la mejor opción.
Descargar Taped Image Corners | PixelsDaily
En cambio, si lo que desean es simplemente destacar una galería de forma fácil y rápida, este efecto de cintas puede resultarles muy útil. Como podrán ver cuando descarguen el recurso, el funcionamiento es muy simple y no posee mayores complicaciones para su utilización. Hay siete opciones con diferentes posiciones de cinta adhesiva en sus esquinas, todo elaborado en html y css.
Koottam Social es un plugin jQuery para reemplazar los iconos de las distintas redes sociales, de esta manera vamos a poder homologar totalmente el estilo y formato de los distintos widgets, algo que en la actualidad es un gran problema a la hora de diseñar.
Koottam utiliza el API de los distintos servicios para mostrar las cantidades, de esta manera nos garantizamos una correcta correspondencia entre lo que se muestra y la actividad relacionada con la red social. Ademas el plugin permite personalizar el aspecto de los botones, sin ir más lejos al momento de descargarlo el mismo cuenta con 7 temas distintos para seleccionar, ampliando considerablemente el abanico que nos proveen las redes sociales que en general cuentan con no más de 2 o 3 alternativas.
Los botones se ven de la siguiente manera:
No olviden visitar la demostración online
Ejemplo de uso:
HTML:
< a class="fb" href="http://facebook.com/jobysblog">Facebook< /a>
Inicialización del plugin:
< script type="text/javascript">//
El plugin funciona perfectamente en los navegadores más modernos, el mismo se encuentra testeado en IE, Firefox, Chrome, Safari y Opera.
Koottam se encuentra liberado bajo licencia MIT, por lo que no vamos a tener problemas para incluirlo en nuestro sitios web.
Web: Koottam Social jQuery Plugin ~ Visto en: WebAppers
Real Shadow es un pequeño plugin desarrollado con jQuery y que hace un uso intensivo de la propiedad CSS box-shadow. Este fantástico script nos permite animar sombras de forma dinámica, teniendo como posibilidad utilizar el puntero del mouse y su ubicación para definir la orientación de las sombras.
Al momento de configurar el plugin podemos definir si deseamos que las sombras se muevan con respecto a la posición del puntero del ratón, o bien fijando unas coordenadas que son las que muestran la ubicación del foco de luz, por lo que las sombras se verán directamente en la posición opuesta, obviamente dependiendo de la forma del objeto.
En la imagen que muestro a continuación el puntero del mouse se encuentra en el centro, de ahí que las sombras se reflejan en distintas direcciones.
$(selector).realshadow(); // options are optional
$(selector).realshadow({
followMouse: false, // true by default
pageX: x, // x coordinate of the light source
pageY: y // y coordinate of the light source
c: { // shadow color
r: 1, // red channel for shadow
g: 1, // green channel for shadow
b: 1, // blue channel for shadow
}
});
El plugin funciona en la mayoría de los navegadores modernos, la única limitación es simplemente que acepten el uso de box-shadow, algo que hacen casi todos los navegadores publicados en estos últimos años.
Web: Real Shadow
© 2006 Miracle Design. Todos los derechos reservados
