Creación de aplicaciones HTML5
Efectos, transiciones y animaciones de CSS3
Como desarrollador web, cuenta con tres herramientas que puede usar para convertir en realidad su visión: HTML, CSS y JavaScript. Pero esto no siempre fue así. En el pasado, algunos efectos que aparentemente sencillos, como el texto sombreado o los degradados lo enviaban a editores de imágenes independientes, en vez de usar CSS y HTML. Y si bien se contaba con JavaScript, para lograr que una aplicación web fuera fluida y viva, generalmente requería de una gran cantidad de código. Estas técnicas no solo complicaban la creación inicial de la aplicación, sino que cualquier pequeño cambio también era costoso.
Afortunadamente, CSS3 y HTML5 eliminan la necesidad de los malabares con las imágenes y JavaScript del pasado. Ahora puede crear interacciones fluidas y experiencias hermosas con un marcado declarativo simple.
Ahora bien, si usted es como yo, es posible que esto le haya causado un poco de risa. El hecho de que sea CSS y HTML no quiere decir que sea sencillo. Pero como verá a continuación, al aprender algunas propiedades de CSS y al probarlas en algunas demostraciones entretenidas, ahorrará incontables horas de desarrollo, sin mencionar las horas que se pierden al negociar la necesidad de un efecto puntual con el cliente.
Sombras
Comencemos con algo fácil y veamos algunos efectos básicos de sombras. Para mí, los efectos siempre se tratan sobre alterar la percepción de un objeto. Por ejemplo, observe la sombra del texto y las sombras de los cuadro en la Ilustración 1.
.jpg)
Ilustración 1 Efectos de sombras
Este efecto proporciona la ilusión de una fuente de luz direccional que golpea alcanza un objeto, el cual proyecta una sombra en los objetos a su alrededor. Esto ayuda a dar la percepción de profundidad y algunas persona incluso pueden decir que parece que el objeto estuviera flotando.
Agregar una sombra no es difícil, así que agreguemos una sombra de texto al encabezado:
h1 {
text-shadow: black 2px 2px 12px 2px;
}
Estas son las diferentes propiedades de text-shadow:
- Color de la sombra (opcional). Puede especificar el color según su nombre, o puede usa designaciones de color HSL o RGBA.
- Desplazamiento horizontal (requerido). Esto indica la posición horizontal de la sombra. Los valores positivos mueven la sombra hacia la derecha del objeto y los valores negativos la mueven hacia la izquierda.
- Desplazamiento vertical (requerido). Esto establece la posición vertical de la sombra. Los valores positivos mueven la sombra hacia abajo y los valores negativos la mueven hacia arriba.
- Radio del desenfoque. Este valor define qué tan clara aparecerá la sombra del texto. 0px es la fuente es sí; al incrementar los valores aumenta el desenfoque del borde del objeto. No se permiten valores negativos.
- Distancia de extensión. Este valor configura la distancia desde la sombra; la manera en que la forma de la sombra se expande hacia afuera (un valor positivo) o se contrae hacia dentro (un valor negativo).
Las sombras de los cuadros funcionan igual que las sombras de texto y poseen los mismos parámetros:
box-shadow: red 10px 10px 0px 0px;
Las sombras son bastante comunes. Se usan en elementos como botones para proporcionar profundidad y para transmitir al usuario la idea de propósito del elemento. Ayudan a aclararle al usuario la idea de que un objeto determinado es, de alguna forma, diferente del resto de los objetos en la interfaz de usuario. En el pasado, posiblemente debía usar Photoshop y crear imágenes PNG para representar los botones; ahora puede hacerlo en el marcado. Por supuesto, apenas hemos empezado a tocar el tema. Puede crear muchos efectos llamativos al ajustar la opacidad, el radio de borde, degradados, tipografía, etc.
Transformaciones
La propiedad transform de CSS le permite transformar un elemento dado en términos de tamaño y espacio. Para ilustrarla, configuremos una imagen para que cuando el usuario mantenga el mouse sobre la imagen, esta doble su tamaño.
#myImg:hover {
transform: scale(2);
}
Por supuesto, como esto es CSS, realmente debe incluir todos los prefijos de proveedor correspondientes. Los omitiré de aquí en adelante, pero la transformación anterior debería lucir así:
#myImg:hover {
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o- transform: scale(2);
transform: scale(2);
}
También querrá aprovechar la detección de características. Esta es realmente una de las prácticas más importantes para implementar en los sitios web actuales. En vez de basar el comportamiento del sitio en los agentes de usuario, debe aprovechar una herramienta como Modernizr (modernizr.com) que le permite interrogar al explorador sobre sus capacidades. Si el explorador de un usuario no es compatible con una característica determinada que necesita, puede usar polyfill (una corrección de compatibilidad (shim) que implementa la característica para el explorador). Esto es posible incluso para CSS. Para obtener más información, consulte “Ningún explorador quedará fuera: una estrategia para la adopción de HTML5” en msdn.microsoft.com/magazine/hh394148. Volvamos a las transformaciones.
Además del escalado, también puede aplicar transformaciones en un plano en dos o tres dimensiones. Con 2D, lo que hace es mover un elemento en sus ejes X e Y. Tomemos un texto y giremoslo en 45 grados:
.transform2d {
transform: translate(0px, 0px)
rotate(45deg)
scale(1.45)
skew(0deg, 0deg);
}
En la Ilustración 2 vemos un cuadro girado 45 grados.
.png)
Ilustración 2 Transformación de un elemento en el espacio 2D
Si bien 2D es estupendo, lo que causa furor hoy es 3D. No vamos pedirle a los usuarios que se pongan gafas especiales, pero sí queremos que las personas piensen que los cuadros están a punto de salir de la pantalla. Estas son unas líneas para lograrlo:
.transform3d {
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(110px) rotateY(45deg);
}
Vemos los resultados en la Ilustración 3.
.png)
Ilustración 3 Una transformación 3D
Transiciones
Exploremos ahora las transiciones, que le permiten cambiar un elemento de un esto o estado a otro. Comenzaré con la pseudoclase hover. Históricamente hemos usado CSS para configurar los estados de un elemento, como su estado inicial y el estado después de un evento. Los elementos de botón y los vínculos delimitadores poseen dos estados, el estado inicial y el estado de desplazamiento. Cuando un usuario activa el estado de desplazamiento, se establecen estas propiedades. Aquí hay un ejemplo para mantener el mouse sobre un botón:
#boxTrans:hover {
background-color: #808080;
color: white;
border-color: #4cff00;
border-width: 3px;
}
Esto es bastante básico y no me cabe duda de que lo ha hecho antes. Los exploradores actuales son tan veloces que la transición de estado es casi instantánea. Esto es bueno desde el punto de vista del rendimiento, pero presenta un problema nuevo. En algunos casos, ese cambio de estado puede ser discordante o incluso invisible. Es perfectamente posible que el usuario nunca vea un cambio tan rápido y sutil.
Las transiciones de CSS3 le permiten administrar el tiempo que tarda en completarse la transición y controlar otros aspectos de la transición. Por ejemplo, en vez de un cambio automático del color de fondo de un botón, puede especificar lo que debe suceder durante el cambio.
Agregar una transición de CSS es fácil, simplemente debe agregar los comandos de transición al elemento base. Como ejemplo, creemos un cuadro simple con un texto en el interior. Cuando un usuario mantiene el mouse sobre el cuadro, el color de fondo, el texto y los bordes deben cambiar:
#boxTrans {
...
transition: all .5s linear;
...
}
#boxTrans:hover {
background-color: #808080;
color: red;
border-color: green;
}
Como puede observar, definí la transición en el elemento #boxTrans. Elegí transiciones para todas las propiedades de este elemento y quiero que todas las transiciones sean lineales (es decir, con velocidad constante) durante el curso de 0,5 s. También puedo elegir propiedades específicas para la transición al indicar solo esas propiedades; del siguiente modo:
transition: background-color .5s linear;
Animaciones
A diferencia de las transiciones, en las que le indicamos al explorador los estados iniciales y finales, en las animaciones podemos especificar una serie de propiedades CSS durante un período de tiempo. En realidad, las animaciones son simples extensiones de las transiciones. Para crear una animación, se usa un fotograma clave. Puede pensar en el fotograma clave como el estado de un elemento en un momento dado dentro de la duración configurada para la animación total. Creemos una animación sencilla: un cuadro pequeño que se desplaza hacia atrás y adelante. Primero, definiré el elemento:
<html>
...
<div class="box" id="boxAnimation"></div>
...
</html>
Configuremos el estilo a ese div boxAnimation para que parezca un cuadro:
<style>
...
.box {
border: 1px solid black;
background-color: red;
width: 25px;
height: 25px;
position: relative;
}
...
</style>
Con eso listo, definiré la animación base. Necesito establecer el fotograma clave de la animación y su duración. Si no se configura la propiedad duration, la animación nunca se ejecutará porque el valor predeterminado es 0. También configuraré la cantidad de iteraciones que deseo para la animación; 10 veces durante 5 segundos cada vez (si lo prefiere, puede configurar el contador de iteraciones de la animación como infinito, lo que le dirá a la animación que se ejecute durante todo el tiempo que la página permanezca abierta):
#boxAnimation {
animation: 'not-knight-rider';
animation-duration: 5s;
animation-iteration-count: 10;
}
Finalmente, necesito definir el fotograma clave mismo. Voy a comenzar con un fotograma clave sencillo que desplazará el cuadro por la pantalla. Para esto, configuro las propiedades from y to y dejo que el explorador se encargue del resto:
@keyframes not-knight-rider {
from {
left: -100px;
}
to {
left: 100px;
}
}
Si ejecuta esto, verá un cuadro rojo que flota en la pantalla y luego se repite. Tal como mencioné, usted tiene un control completo de la animación. Actualicemos el fotograma clave para controlar dónde se encuentra el cuadro en un momento dado y qué hace, tal como se muestra en la Ilustración 4.
Ilustración 4 Control de la animación
@keyframes not-knight-rider {
from {
left: -100px;
opacity: 0;
}
25% {
left: 100px;
opacity: 0.5;
}
50% {
left: -100px;
opacity: 0;
}
75% {
left: 100px;
opacity: 0.5;
}
to {
left: -100px; opacity: 0;
}
}
En la Ilustración 4, defino qué hará el fotograma clave en un momento dado en una iteración. Defino un punto de partida (to) y un punto final (from), como también puntos intermedios, representados como porcentajes de la duración definida. Sinceramente, no es muy difícil. Ahora, usar la creatividad para diseñar animaciones geniales, ¡es completamente diferente!
Nuevamente, para lograr una compatibilidad con todos los exploradores del mercado actual, debe usar los prefijos de proveedor apropiados. En el caso de los fotogramas clave, esto sería @-webkit-keyframes, y así sucesivamente.
Observe que puede ver algunos ejemplos en funcionamiento en línea de todo lo mencionado en este artículo en bit.ly/I0Pa4d y también debería revisar la increíble serie de demostraciones interactivas y prácticas de CSS3 en bit.ly/pF4sle, donde puede explorar varias especificaciones de CSS sin la necesidad de tener que escribir ni una sola línea de CSS.
Es posible que se haya percatado de que estas demostraciones son sobre Windows 8. La razón es que con la llegada de Windows 8, el equipo de Windows presentó un nuevo modelo de programación. Los desarrolladores web ahora pueden usar sus habilidades para crear una aplicación nativa para Windows 8 con HTML5, CSS3 y JavaScript. ¡Microsoft acaba de abrir un área de superficie completamente nueva para que venda sus aplicaciones en todo el mundo! Lo animo a que revise el Centro de desarrollo de Windows en dev.windows.com.
Estamos en un momento emocionante para ser un desarrollador de software, web o de lo que sea. Las tecnologías avanzan tan rápido que es fácil verse sobrepasado con todas las nuevas herramientas que contiene el cuadro de herramientas. Pero de todas maneras, es importante mirar hacia delante y comprender las herramientas y las técnicas que tiene a su disposición. Lo último que va a querer hacer es comenzar a crear un montón de imágenes bonitas cuando puede simplemente agregar un par de líneas de CSS para crear una sombra.
Clark Sell es un evangelizador web y de Windows 8 senior de Microsoft radicado en las afueras de Chicago. Escribe en su blog, csell.net, transmite podcasts en developersmackdown.com y mantiene una cuenta de Twitter, twitter.com/csell5.
Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: John Hrvatin y Brandon Satrom