El lenguaje de programación se ha convertido en un aspecto fundamental en el mundo en el que vivimos, donde lo digital prima por encima del resto.
De esta forma, las empresas no solo piden una buena capacidad de redacción, sino unos conocimientos sobre el código HTML y la capacidad de ir más allá para tener diseños atractivos tanto en landing page como en las distintas plataformas del tipo blog.
Con este panorama, los fondos degradados para web están adquiriendo cada vez una mayor importancia, de la misma forma que hacer degradados en CSS se ha convertido en una de las principales características que se piden en las entrevistas de trabajo.
Por ello, queremos usar este post para arrojar un poco de luz sobre este asunto y clarificar un poco la situación para aquellos a los que todavía les cueste un poco más dominar el lenguaje de programación.
¿Qué es el CSS?
Lo primero será definir qué es el CSS, que en inglés significa Cascading Style Sheets, y que en español se traduce como hoja de estilos en cascada.
Estamos hablando del lenguaje usado para describir la presentación de documentos en HTM o XML, y para ello el CSS describe cómo el elemento estructurado en la pantalla o en el papel debe ser renderizado.
Y es que CSS es uno de los lenguajes con una estandarización proporcionada por W3C, desarrollado en varios niveles hasta el CSS3 y dividido en módulos más pequeños para continuar con el proceso de desarrollo.
En una introducción al CSS, el módulo comienza con los conceptos básicos del funcionamiento del CSS, donde se incluyen selectores y propiedades con sus reglas y cómo especificar la longitud, el color y otros aspectos, haciendo una cascada de datos y conceptos básicos de caja y depuración.
En cuanto al estilo del texto, el módulo analiza los fundamentos específicos del estilo, los cuales quedan incluidos en los ajustes de fuentes, negrita, cursiva, espaciado de líneas y letras, sombras de texto y otras opciones de texto.
Aquí el módulo concluye al aplicar las fuentes personalizadas a la página y las listas de estilos y enlaces.
Por otro lado, el estilo de las cajas es uno de los pasos esenciales para el diseño de una página web, donde recapitulamos el modelo de caja y luego vemos los diseños que existen en la caja de control mediante imágenes, bordes y relleno, colores de fondo personificados y otras características más sofisticadas como sombras y filtros en cajas.
Y si miramos al diseño, estamos en el punto donde tenemos que ver cómo vamos a colocar las cajas en los lugares correctos en función de la ventana gráfica y entre sí.
Ahora ya podemos profundizar el diseño de CSS con diferentes configuraciones de pantalla, métodos de diseño tradicionales con flotación y posicionamiento y nuevas herramientas de diseño como flexbox.
Cómo hacer degradados en CSS
Una vez definido los aspectos básicos, tenemos que decir que la tercera versión de CSS ha llevado a una revolución en muchos aspectos, tales como nuevos selectores, propiedades y animaciones, pero también ha llevado a mejoras en el rendimiento y la velocidad de carga de muchas webs.
Y los desagrados son una novedad importante de esta nueva versión. Antes, las imágenes que usábamos provenían de fondos o bancos de imágenes, pero la imagen, al tener tanta información de color, pesaba bastante.
Y acumulando muchas de estas imágenes hacían que los servidores acumularan muchos kbs extras, no siendo algo positivo para la experiencia del usuario.
Y con la llegada de CSS3 podemos usar degradados con una sola línea en su declaración.
De esta manera, el proceso se ha agilizado por completo. Solo tenemos que decir los colores al navegador y éste genera la transición y el correspondiente degradado entre los colores seleccionados.
Ahora ya solo queda pasar a la fase de maquetación para adaptar el diseño a la idea que tengamos.
Degradados a partir de un background
Cuando trabajamos con CSS, es necesario usarlo para generar un degradado corto, y para ello necesitamos un mínimo de dos colores y una dirección.
Por ejemplo, si usamos de amarilla a naranja y de izquierda a derecha, tendríamos que trazar la línea con el lenguaje HTML en el que se incluye el background, la línea de los grados para definir el trazado de la línea y el porcentaje de profundidad de cada color, hasta completar un 100% entre ambas tonalidades.
Es algo en lo que no se tarda mucho tiempo. Así, uno de los dos colores comenzará a degradarse a partir del porcentaje marcado (por ejemplo, el 10 por ciento) de ancho hasta el siguiente color, que será totalmente de ese color cuando el ancho del contenedor llegue al 90 por ciento.
Aquí lo importante es que se aplique la regla sin prefijos.
Después, si queremos añadir más complejidad al asunto con más colores y cambio del grado de inclinación, tendremos que hacer modificaciones en cuanto a los códigos linear-gradient y radial-gradient. Aquí tendremos que comenzar en el centro y llegar hasta los extremos.
Y si queremos añadir más dificultad, también están disponibles los códigos repeating-linear-gradient y repeating-radial-gradient.
No debes olvidar que la limitación para los degradados es cosa de tu imaginación, por lo que si quieres una mayor inspiración puedes ver los distintos modelos que existen en la red y curiosear hasta dar con la tecla del código que quieres para tu degradado.
Generando degradados de CSS
Hemos visto que crear un degradado es algo relativamente sencillo, pero aconsejamos que antes de implementar tu diseño, revises el código para estar seguro que estamos haciendo las cosas bien.
Algunas herramientas que ayudan en este aspecto son el generador CSS de CSSmatic y el generador de ColorZilla.
Otro recurso que destacamos, especialmente si estás en fase de mockups y necesitas un código rápido, es el de uiGradients, una librería de degradados en CSS listo para copiar y usar.
En definitiva, si sigues estos consejos no tendrás problema en crear tus degradados en CSS y si tu curiosidad no tiene límites, usando los distintos códigos podrás obtener degradados mucho más complejos y, por supuesto, también más vistosos.
En este otro post te enseño cómo modificar los estilos y tipos de letras haciendo uso del CSS.
Espero haber resuelto tus dudas sobre el degradado en CSS, si tienes cualquier duda no te olvides de dejarme un comentario 😉
