Para comenzar con este artículo y la recomendación posterior debo decirles que tengan cuidado con su aplicación en sitios públicos ya que, como siempre aclaro, la utilización de CSS3 no está homogeneizada en todos los exploradores. Dicho esto, procedo a explicarles de qué se trata esta palabra parallax.
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
Siguiendo con la tendencia de incentivarlos a migrar a HTML5 queremos compartir con ustedes 8 plantillas web profesionales HTML5 que son completamente gratis para que utilicen en sus próximos diseños, después de todo HTML5 es una tendencia global en cuanto a diseño web y que poco a poco se esta convirtiendo en un estándar, es muy recomendable porque una de sus mayores ventajas es que incluso utilizando animaciones hechas con HTML5 y CSS3 sus sitios seria totalmente visibles y adaptables para los usuarios que naveguen en Internet con un iPad, iPhone y cualquier tableta o telefono móvil del mercado.
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
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
Pie Menu es un fantástico plugin desarrollado con el framework jQuery y con la potencia de CSS3 para la creación de un bonito menú circular animado.
Este menú circular funciona de tal modo que las opciones se encuentran escondidas, y solamente se muestran cuando decidimos extender el menú, para realizar esta acción el menú realiza una atractiva animación, la misma se puede configurar con apenas unos pocos parámetros que nos permiten seleccionar el ángulo de salida, el radio del circulo, etc.
Otro detalle es que el menú puede configurarse con la capacidad de poder ser arrastrado. Esta opción resulta practica para los usuarios en determinadas situaciones en donde el espacio de trabajo se modifica continuamente.
Ejemplo de uso:
Estructura HTML:
< div id='outer_container' class="outer_container" >
< a class="menu_button" href="#" title="Toggle">
< span>Menu Toggle
< ul class="menu_option">
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< /ul>
< / div>
JavaScript:
$('#outer_container').PieMenu({
'starting_angel':0(Starting Angle in degree),
'angel_difference' : 90(Displacement angle in degree),
'radius':100 (circle radius in px),
});
No olviden visitar el sitio oficial del plugin, si se encuentran interesados en utilizarlo les recomiendo ver su demostración online.
Web: Pie Menu
Fuente: http://www.kabytes.com/programacion/menu-circular-desplegable-que-funciona-con-jquery-y-css3
En varias oportunidades les he comentado sobre las bondades de CSS3 y con ellas, los problemas que pueden llegar a tener al momento de implementarlos para plataformas web. Es por ello que mi recomendación es aplicar estos efectos con mucho cuidado y sabiendo que en algunos exploradores no podrán ser visualizados correctamente.
Mi selección sería sobre plataformas offline, aplicaciones y gráficos que puedan presentarse a través de un explorador determinado, en redes cerradas o presentaciones interactivas, donde uno mismo tenga la opción de decidir qué explorador usar.
Descargar código de Annotation Overlay Effect | Ver Demo | Tympanus
Dejando las especificaciones un poco de lado, quiero mostrarles una forma de presentación de anotaciones sobre imágenes que resulta muy atractivo y puede llegar a solucionar problemas de espacio. Al hacer clic en una imagen, aparecerán comentarios sobre la misma, cubriendola sutilmente. De esta forma podemos desplegar información accesoria y anotaciones que deseamos aclarar sobre la muestra en cuestión.
Fuente: http://www.kabytes.com/desarrollo/anotaciones-superpuestas-en-css3
LionBars es un plugin jQuery para la creación de barras de scroll copiando el mismo estilo que las del sistema operativo Lion. El script es muy liviano y funciona en la mayoría de los navegadores modernos.
Específicamente los navegadores que soportan a la perfección el uso de este plugin son: IE8, Safari, Firefox, Chrome, Opera, tanto en Windows como en OSX.
Las barras de scroll modificadas se ven de la siguiente manera:
1. Incluir la ruta completa al script
<script type="text/javascript" src="jquery.lionbars.0.3.min.js"></script>
2. Incluir las hojas de estilo necesarias
@include 'lionbars.css';
3. Finalmente llamar al plugin para que haga su trabajo
$('#box').lionbars();
El plugin no tiene demasiada ciencia, no obstante es un lindo detalle para utilizar en nuestros sitios web y darle un toque de distinción a nuestro diseño 
Web: LionBars
© 2006 Miracle Design. Todos los derechos reservados