CSS y SVG tienen cada vez más cosas en común, y es que hay una clara tendencia a introducir nuevas propiedades en CSS que vienen directamente importadas de SVG. Entre ellas se encuentra clip-path, una operación que forma parte de la especificación de SVG desde 2000 y que ha sido trasladada a CSS, permitiéndonos realizar "recortes" sobre elementos HTML.
Con CSS podemos dar estilo a prácticamente cualquier elemento de nuestra web. Y digo prácticamente porque hay algunos elementos "rebeldes" que se nos resisten. Entre ellos se encuentran las checkboxes (casillas de verificación) y los botones de tipo radio.
Puede que en algunos diseños el estilo por defecto de una checkbox quede perfectamente integrado, pero en la mayoría de los casos no es así. Por ello se ha tendido a crear este tipo de controles con elementos div o span, perdiendo por el camino la semántica, la accesibilidad y teniendo que recurrir a javascript para darles la funcionalidad requerida.
En este tutorial vamos a ver una forma de conseguir dar estilo a una checkbox, manteniendo los aspectos básicos de este elemento y sin tener que recurrir a javascript, porque CSS3 es suficiente para suplir lo que debería ser un estándar, poder dar estilo a todos y cada uno de los elementos de HTML.
No hace tanto que diseñar un sitio web accesible era sinónimo de soso o aburrido. Había que eliminar cualquier adorno que no cumpliese con la estricta semántica dada por HTML.
Por suerte hoy en día esto ya no es así (aunque hay quién aún lo piensa). WAI-ARIA nos ayuda a dar significado a esas partes de nuestro código que se salen de la semántica de HTML, dando apoyo a las aplicaciones de accesibilidad para que las personas que las usan comprendan nuestra web o aplicación.
¿Pero qué es en realidad WAI-ARIA?, ¿se debe usar en todas las etiquetas de HTML?, y aún más importante ¿qué es lo que no se debe hacer con esta tecnología?. A estas y seguramente otras preguntas voy a tratar de responder, en lo que pretende ser una aproximación a la accesibilidad web. ¿Te apuntas?.
Como supongo ya te habrás dado cuenta, soy un loco apasionado del CSS (además de un poco alienígena) y de todas las posibilidades que este nos ofrece. Cambio una y mil veces mis diseños, y los pseudo-elementos son la forma más rápida, sencilla y útil de conseguir darle ese toque original y de calidad que todos buscamos.
Son herramientas que nos permiten conseguir más fácilmente la separación entre estructura y presentación, lo que a fin de cuentas da una web mejor estructurada, semántica y más apetecible de cara a los buscadores. Y esto no sería posible sin el uso de pseudo-elementos.
Después de recrear la clásica barra de progreso usando sólo CSS, hoy vamos a hacer lo propio con uno de los indicadores de carga más usados en aplicaciones, los spinners. Si bien durante mucho tiempo han sido imágenes de tipo GIF, con las nuevas propiedades de CSS, esto ha cambiado radicalmente y la tendencia es realizar este tipo de animaciones mediante código, que sin duda es mucho más liviano.
Por esta razón vamos a construir un spinner, que va a ser muy básico, pero que queda muy bien para cualquier proceso de carga. Va a constar de dos círculos incompletos que giran en sentidos opuestos y con el que espero que te hagas una idea de lo que podemos llegar a conseguir con las propiedades animation, keyframes y transform.
Tal y como prometí en el artículo dedicado a las pseudo-clases, hoy vamos a ampliar el apartado dedicado a las pseudo-clases estructurales, ya que las vimos muy por encima y en cuanto a las fórmulas creo que me quede muy, pero que muy escaso.
En el artículo de hoy vamos a verlas todas de nuevo, aunque mucho más detalladas, y sobre todo nos adentraremos en las fórmulas y todo lo que podemos conseguir con ellas, que por cierto no es poco. Así que no estaría de más que te aprovisionases antes en tu nevera, porque esto comienza ya.