En esta sección nos centramos en estudiar a CSS3, la nueva versión de CSS. En especial, nos enfocaremos en los siguientes conceptos:

• Selectores avanzados
• Propiedades que modifican forma
• Transformaciones
• Transiciones
• Animaciones

En la evolución de la WEB, la innovación toma un rol importante, especialmente en lo que respecta a la tecnología CSS. Los diseñadores se tornaron más creativos y exigentes en los diseños, lo cual desafiaba a los programadores al momento de implementar dichos diseños ya que las capacidades de CSS de aquel momento no eran suficientes para satisfacer las necesidades más caprichosas de los diseñadores. Por ejemplo, implementar una caja con las esquinas redondeadas.

Para superar las limitaciones del actual CSS, los programadores empiezan a desarrollar  librerías completas de Javascript (JS) que, junto a la aplicación de CSS, intentaban solucionar los caprichos del diseñador. Es así que, el uso de Javascript se hizo cada vez más frecuente para crear efectos en la presentación visual de la página web. Para el programador de la época, tener una colección de funciones JS desarrolladas por programadores en años anteriores se convertía en un tesoro y una herramienta fundamental para abordar su trabajo. En ese sentido, el perfil del programador web de la época incluía no solo conocer de CSS sino también aplicar las funciones JS que traía en su baúl del tesoro.

Como parte de la innovación del momento, HTML, CSS y JS se unen bajo el paraguas de HTML5 y la fórmula HTML5 = HTML + CSS + JS se convierte en el estandar de facto para el desarrollo de la interfaz de usuario web. En este contexto, CSS evoluciona a la versión CSS3, incluyendo funciones de JS, para simplificar la vida de diseñadores y programadores. El programador evita preocuparse de su baúl de funcions JS ya que muchas de estas funciones están integradas en las propiedades CSS3.

Con esta inclusión de características, CSS aborda un nuevo enfoque. Hasta antes del aparecimiento de HTML5, CSS siempre estuvo enfocado en la APARIENCIA, es decir, estilizar la página web (color de fuente, tipografía). Ahora, a más de solo cubrir la estilización, la versión CSS3 se enfoca en FORMA y MOVIMIENTO. Forma se refiere a la capacidad de modificar el modo en el que se presentan las características visuales de los elementos. Por ejemplo, “border-radius” es una de las propiedades de CSS3 que permite modificar la forma recta de las esquinas de una caja a una forma redondeada. Movimiento se refiere a la capacidad de aplicar, a los elementos HTML, efectos dinámicos como, por ejemplo, hacer de que roten, se transladen de un punto a otro, se escalen, o sean afectados por una secuencia de animación.

En esta unidad abordaremos los aspectos de forma y movimiento que ofrece la nueva versión de CSS3, además de los nuevos selectores que trae consigo.