En diseño, un sticky footer es un pie de página que se queda "pegado", independientemente de la cantidad de contenido, a la parte inferior de la ventana del navegador. Con esto evitamos que nuestro diseño se rompa al aparecer el pie de página en mitad del documento, cuando el propio documento tiene poco contenido. No debemos confundirlo con un pie de página que se queda fijo y es visible a lo largo de todo el documento, eso es arena de otro costal.
Hay varias formas de hacerlo, y cada una de ellas con sus pros y sus contras. De momento voy a pasar por alto el uso de Grid Layout, por la escasa compatibilidad que aún existe en los diferentes navegadores, aunque es probablemente una de las mejores y más limpias formas de conseguirlo. Así que no perdamos el tiempo y ¡al lío!.
El box model, o modelo de cajas, es uno de los pilares básicos para comprender el funcionamiento de CSS. Suele traer de cabeza a los que se inician con las hojas de estilo en cascada, y en ocasiones también a los no tan iniciados. Su entendimiento es la base para conseguir un layout sólido, sin miedo alguno a que en algún punto este se rompa.
Con el tiempo el box model se ha ido quedando un poco desactualizado, y lo que antes era sólo una cuestión de entendimiento y unos pocos cálculos, con los layouts actuales se ha ido convirtiendo en una auténtica pesadilla. De ahí, que en CSS3 se incluyera la propiedad box-sizing, que nos permite cambiar la forma en que se calculan las dimensiones de las cajas y nos hace la vida mucho más sencilla.
De vez en cuando me doy de bruces con un caso que aunque a priori parece muy sencillo, termina complicándose hasta el punto de no saber por donde atajarlo. Para este caso concreto, por más que he buscado, rebuscado y leído, no he encontrado una solución a la que dar crédito, salvo la que vamos a ver en el artículo de hoy.
Bien parece un caso simple, y de hecho lo es, si se trabaja con las herramientas adecuadas y no confundes el funcionamiento de algunas de la propiedades o valores que vamos a usar. Sin embargo es un caso específico, en que jugamos con márgenes automáticos, por tanto desconocemos completamente las medidas. Así que mejor vamos al lío.
Es muy sencillo ocultar un elemento con CSS, sólo debemos escoger la propiedad adecuada y aplicarla. ¿Pero realmente sabemos que es lo que está ocurriendo?, porque no es lo mismo hacer opacity: 0 que display: none, de hecho difieren bastante. Según que técnica usemos tendrá unos u otros efectos, pero no sólo sobre él mismo, sino que también puede afectar al resto de elementos posteriores a él.
En este artículo vamos a ver 7 formas de ocultar un elemento con CSS y también veremos que es lo que realmente hace la propiedad que usemos para tal efecto. ¿Se compromete o no la accesibilidad?, ¿qué pasa con la navegación por teclado?, y porqué no, ¿hay algún efecto negativo en cuanto a SEO?. Todas estas preguntas deberemos hacérnoslas para elegir la forma idónea para ocultar un elemento.
El centrado en CSS es uno de los temas más recurrentes, y es que ¿quién no ha tenido algún percance con un elemento que quería centrar?, ¿quién no se ha dado de cabezazos contra la mesa?, o ¿quién no ha llegado a lanzar el teclado por la ventana?.
Si en alguna ocasión te ha ocurrido algo de esto, no desesperes, tan sólo preocúpate de recoger el teclado (lo vas a necesitar), del resto nos vamos a ocupar hoy en este artículo. Porque el centrado en CSS no es tan fácil, pero tampoco tan difícil.
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.
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.
Después de ver lo sencillo que es crear animaciones en CSS con @keyframes y animation, como vimos en el artículo Animando con CSS3: keyframes y animation, hoy vamos a hacer una barra de progreso, una animación un poco más compleja, que como verás, al final no lo es tanto.
Las barras de progreso son de esos elementos que no suelen faltar en casi ninguna aplicación, y evidentemente las aplicaciones web no son menos. Tradicionalmente se han implementado mediante algún lenguaje de programación, generalmente Javascript, pero las funcionalidades de CSS3 son muchas, y con las nuevas implementaciones de HTML5 que nos permiten hasta crear videojuegos, una barra de progreso ligera y funcional es mucho mejor que las clásicas soluciones. Ya sabes, cuanto menos Javascript mejor.
En el anterior artículo sobre Selectores de CSS vimos muy por encima las pseudo-clases y los pseudo-elementos. Ambos selectores son grandes armas para dar estilo a nuestros documentos y conseguir buenos resultados con muy poco, por eso ahora es momento de verlos a fondo, aunque hoy únicamente vamos a ver las pseudo-clases.
No pretendo que los veamos todas, pero si al menos las más importantes y más usadas, o al menos las que a mi gusto son las más útiles. Vamos a por ello, y que no se diga que no eres capaz de seguir a un alienígena.
Las animaciones son un gran arma cuando intentamos captar la atención del usuario en aquellas zonas de la web que estimamos de vital importancia. Porque a fin de cuentas somos simples, muy simples, y nos encantan las cosas brillantes y todo aquello que se mueva.
En animación web siempre hemos tenido que recurrir a otros lenguajes para este tipo de usos, sobre todo Javascript, pero CSS3 ha cambiado todo esto. A parte de las animaciones simples que podemos realizar con transition, CSS3 nos da una herramienta mucho más potente, @keyframes, que nos permite realizar animaciones más complejas, con ciclos y la posibilidad de iniciarla y pararla. Por esto Javascript se ha ido relegando a un segundo plano. Así que no pierdas el tiempo, ha llegado el momento de crear animaciones con CSS3.
La idea de las hojas de estilo en cascada (CSS), es la de separar la estructura de un documento de su presentación. Esto puede hacerse de forma separada, mediante un documento a parte, o dentro del propio documento HTML. Para ello necesitamos de un mecanismo específico entre los estilos y los elementos del documento HTML. Este mecanismo no es ni mas ni menos que una regla CSS.
Las reglas CSS se componen de un selector y de una declaración, formada por una serie de propiedades con sus valores. De modo sencillo podríamos decir que la declaración indica "qué hay que hacer", mientras que el selector nos permite seleccionar los elementos del DOM (Document Object Model), a los que queremos darles estilo. Por tanto los selectores son imprescindibles para aplicar de forma correcta los estilos CSS a una página, y con un conocimiento profundo podemos ahorrarnos el uso de lenguajes de programación adicionales (como Javascript) que cargan en exceso nuestro documento.
Es cierto que con HTML5 se ha ido avanzando y solucionado algunos de los problemas que se han presentando en el diseño web. El paso hacia la validación de formularios es un claro ejemplo de ese avance, sin embargo el supuesto avance en cuanto a los llamados enlaces de bloque (block-level links) no lo es tanto.
Hasta la implantación de HTML5 no era posible enlazar elementos de bloque, siendo un enlace un elemento en línea, únicamente era posible enlazar otro elemento en línea. Con HTML5 esto cambia, y ahora es posible enlazar por ejemplo, un div, algo muy práctico para conseguir que una región de una web sea enteramente clickable. El problema es que no todo lo que reluce es oro y hay pequeñas lagunas e inconvenientes que aconsejan no realizar este tipo de prácticas.
En la maquetación con CSS siempre ha habido dos problemas principales. Uno de ellos es como no el centrado, una cuestión que a priori parece de lo más sencilla, puede volverse una pesadilla si no tenemos claro como funciona el modelo de caja con el que trabajamos. El otro es conseguir que varios elementos tengan la misma altura, siendo su contenido completamente desigual.
En esto post no voy a tratar todas las formas de conseguir tal efecto, ya que muchas de ellas a día de hoy no son nada recomendables. Por supuesto en su día fueron un gran paso para conseguir un buen layout, como por ejemplo el conocido método de Dan Cederholm Faux Columns, que consiste en usar un contenedor general, que contendrá a las columnas, con una imagen de fondo que se repite verticalmente y que simula las columnas que deseamos (hay una versión más moderna de Doug Neiner que usa gradientes en vez de una imagen de fondo), el problema es que Faux Columns está pensado para diseños rígidos y no para diseños fluidos.
Imágenes en diseño responsive: El problema de max-width
En principio este venía a ser un artículo para solucionar el aparente problema con max-width cuando tratamos con imágenes en Firefox. Tras leer un montonazo de artículos y posts la conclusión es que no existe tal problema, al menos no al 100%. Suele funcionar bien, salvo cuanto tratamos con una tabla o definimos un div con display:table, este es el problema real, sin embargo hay montones de artículos pululando por la red que aseguran que max-width no funciona correctamente en Firefox. No es cierto, salvo al menos en los dos casos anteriores.
Así que como uno no es manco, voy a retomar el artículo desde otro punto. Vamos a ver como dar fluidez a las imágenes para un diseño responsive, y además abordaré el tema de max-width y sus problemas en Firefox dando una solución, que al menos a mi me funciona.
Ahora que ya han pasado las fiestas y hemos dejado atrás las comilonas, las cenas familiares y con amigos, y las resacas de champán, cava y otras bebidas espiritosas, es momento de dar el siguiente paso tras crear el típico botón estilo hamburguesa y ponernos manos a la obra para darle uso, y que mejor forma que hacerlo con un menú off canvas (menú oculto).
Para ello vamos a hacerlo al estilo Hexagonal Alien (a pelo), usando únicamente CSS, apoyándonos en el uso de una checkbox al igual que hicimos en el post anterior cuando creamos el icono estilo hamburguesa. El menú va ha ser muy sencillito, además voy a explicarlo paso a paso, así que menos cháchara y al lío.
En plenas fechas navideñas y después de días y días de comilonas, turrones y mazapanes, brindis y más brindis, creo que es un buen momento para parar, centrar la cabeza (y también el estómago), hacer balance y aprovechar para publicar el último post del año, para inevitablemente volver a la rueda de brindis y más brindis.
Como queda bien poco para Fin de Año, hoy voy a abordar uno de esos posts de los que realmente me gustan, un post que sirva para algo más que llenar páginas, un post útil (o al menos eso voy a intentar). Vamos a crear un botón estilo hamburgesa, el típico botón para un menú oculto, que además será animado, y para ello sólo vamos a usar CSS. ¡Ahí es na!
No hace mucho que vimos las posibilidades que CSS nos brinda para dibujar, en el artículo cómo dibujar triángulos con CSS, dimos prueba de ello. Dibujar con CSS nos abre un amplio abanico de posibilidades a la hora de diseñar una web y además de forma muy liviana, pues nunca está demás optimizar todos nuestros proyectos.
Hoy vamos a dibujar hexágonos. El porqué es muy sencillo, están de moda. Sí, han sido una de las tendencias en cuanto a diseño en todo este 2015, y además son relativamente sencillos de dibujar. Así que desempolva tus viejos libros de trigonometría (que los vas a necesitar), y al lío.
