Este 2016 se cumplen 20 años desde el primer lanzamiento de CSS. Actualmente nos encontramos en la tercera versión de CSS (CSS3) y el lenguaje ha avanzado mucho desde sus inicios. Ahora no sólo se pueden realizar modificaciones de texto, sino también desarrollar otro tipo de elementos que se piensa sólo se pueden crear en JavaScript. Incluso se pueden crear animaciones fluidas en CSS.
En este artículo exploramos un poco sobre las capacidades del lenguaje CSS de las que podrías sacar provecho en tu próximo proyecto web.
Contadores
See the Pen Pagination CSS Counter by Will Boyd (@lonekorean) on CodePen.0
Los contadores usualmente suelen pasar desapercibidos, pero tienen un gran rango de posibilidades. En una página web pueden ser de utilidad en una galería, de esa manera el usuario sabe cuántos elementos tiene dicha galería de imágenes. También pueden usarse para indicar el número de páginas que tiene una categoría o para contabilizar los elementos seleccionados por el usuario. De esta manera, los contadores abren un mundo de posibilidades y pueden reemplazar a JavaScript en algunas ocasiones, tal como se muestra en el ejemplo de CodePen.
Texto vertical
See the Pen writing-mode CSS attribute by Preethi (@rpsthecoder) on CodePen.0
En CSS existe un atributo llamado writing-mode en el que se pueden especificar los siguientes valores: horizontal-tb, vertical-rl y vertical-lr. Como habrás podido imaginar “horizontal” se refiere a los bloques de texto que ya conocemos y los que se activan por defecto. Por otro lador, “vertical-” se puede usar para crear bloques de texto verticales. Si bien, los textos verticales no son comunes, podrían ser necesarios en casos específicos, ya sea para enriquecer el diseño o por cuestiones prácticas como su uso en tablas, tal como se muestra en el ejemplo de CodePen, pues de esa forma ahorra espacio. Sea cual sea el motivo, es bueno saber que CSS te ofrece esa posibilidad.
Smart Quotes
Como ya debes saber, por medio de CSS puedes mejorar la tipografía de tu sitio web. Pero tal vez sólo estás al tanto de las modificaciones básicas como cambiar el color, el tamaño de la tipografía y su alineación. La verdad es que en CSS se pueden realizar modificaciones más sofisticadas como colocar comillas para citas. A este tipo de citas se les suele llamar “Smart Quotes”.
CSS Shapes
See the Pen Shape text floating in css by Michał (@resgrafika) on CodePen.0
Si tienes imágenes que están encerradas en un marco circular o de cualquier otra forma (que no sea rectangular o cuadrangular) puedes hacer que tus bloques de texto se adapten a los bordes de dicha forma, tal como podemos apreciar en el diseño impreso de revistas y periódicos.
FlexBox Layout
El uso de grillas se ha vuelto bastante común al momento de crear un layout, particularmente si tienes un portafolio en línea. Aplicar una cuadrícula te permite organizar un mayor volumen de contenido en una sola página, razón por la que muchos diseñadores y desarrolladores prefieren trabajar con una cuadrícula.
See the Pen Flexbox Grid with Pure CSS Hover Effects by Anselm Urban (@a-urban) on CodePen.0
Si bien es cierto que se puede crear un sistema de grillas en JavaScript o haciendo uso de algún plugin jQuery que cumpla este propósito, también se puede hacer mediante Flexbox, propiedad de CSS3 para poder crear layouts de tipo responsive, es decir; layouts que puedan ser visualizadas sin ningún problema en dispositivos móviles.
En el ejemplo encontrado en CodePen se hace uso de esta propiedad y adicionalmente se le añaden efectos cuando el cursor se posa sobre alguna imagen.
Menú de navegación circular
Crear un buen menú de navegación no es una tarea sencilla. En la actualidad se debe pensar también en los usuarios de dispositivos móviles, de modo que el menú debe ser efectivo tanto en ordenadores como en teléfonos inteligentes. La solución más común a este dilema es usar el hamburger menu en pantallas más pequeñas en donde se hace uso de un icono para representar el menú minimizado. Si bien esta es la solución más común, no es la única y en ciertos casos puedes hacer uso de un menú circular como el que se aprecia en algunas aplicaciones en la actualidad.
See the Pen Simple Circular Menu by Sara Soueidan (@SaraSoueidan) on CodePen.0
En el ejemplo de CodePen que hace uso sólo de CSS e incluso tiene animaciones que se visualizan sin problemas en dispositivos móviles.
Probablemente no sea una solución ideal si tu menú de navegación posee varios niveles pues, como puedes ver, este menú sólo contiene pocos elementos. Sin embargo, podría ser una gran alternativa a la navegación en pestañas así como una solución perfecta para aplicaciones móviles.
Gooey Menu
See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.0
Ya que estamos hablando de menús alternativos, dejamos otro ejemplo que nos ha parecido bastante único. Hace uso del icono del menú hamburguesa, pero lo hace ligeramente más notorio al encerrarlo en un círculo. El efecto generado al desplegar el menú es bastante fluido.
Para este ejemplo, el desarrollador ha hecho uso de CSS3 e imágenes en formato SVG. De esta manera, asegura que los iconos se vean bien sin importar el tamaño de pantalla.
Ventanas modales
Aparte de crear menús en CSS, también puedes crear otros elementos como ventanas modales. Al ser creadas en CSS no requieren código JavaScript y son compatibles en los navegadores más populares. Además, se adaptan al tamaño de la pantalla, es decir, se visualizan a la perfección en dispositivos móviles.
Patrones de diseño
See the Pen CSS pattern with CSS blend mode by marinda (@stylecoder) on CodePen.0
En CSS, es posible crear diversas gradientes (tanto lineares como radiales) para un solo elemento. Esto abre la posibilidad de poder crear fondos usando sólo CSS, sin tener que usar una imagen externa. Asimismo, también se puede hacer uso de modos de fusión para poder crear patrones de diseño.
En el ejemplo de CodePen se ha creado un patrón sencillo usando sólo CSS. Sin embargo, para poder llegar a este resultado tal vez se requiera práctica. Pero la posibilidad está abierta: puedes crear patrones y fondos en CSS.
Parallax Scrolling
See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen.0
El efecto parallax ha sido una de las más grandes tendencias el año pasado y es probable que lo hayas visto aplicado no sólo en sitios web, sino también en aplicaciones móviles. Si se usa adecuadamente, el efecto parallax tiene el poder de capturar la atención del usuario y ofrecer mayor interactividad.
La forma más común de lograr el efecto parallax es mediante JavaScript, sin embargo también se puede lograr en CSS. Como se aprecia en el ejemplo, la animación es bastante fluida.
Animaciones en 3D
See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.0
En los ejemplos anteriores hemos podido apreciar la gran capacidad y las posibilidades que presenta CSS3. Sin embargo, este último ejemplo es probablemente uno de los más impresionantes: un sistema solar en 3D logrado sólo con CSS.
Si bien este ejemplo muestra las grandes posibilidades que posee CSS, en la actualidad existen sistemas mejores para lograr este resultado tales como Canvas y WebGL.
En conclusión…
Como has podido ver en los ejemplos anteriores, CSS posee algunas características sorprendentes y tiene un gran capacidad para poder lograr resultados realmente impresionantes.
Ahora que sabes el gran poder que tiene CSS puedes intentar usarlo en lugar de JavaScript. A cambio, puedes obtener diversas ventajas, por ejemplo CSS no se puede desactivar como JavaScript de manera que mejora la experiencia de usuario y hace que la navegación del visitante por el sitio sea más fluida.
