Aprender nuevos trucos de CSS es una de las mejores formas de revolucionar el diseño de su sitio web. Si ha estado trabajando en la industria web por un tiempo, es posible que sienta que siempre está codificando o diseñando los mismos diseños. Las tendencias van y vienen, pero la mayoría de los sitios tienen el mismo aspecto: utilizan la cuadrícula de 12 columnas, diseños en cuadros de dos y tres columnas y formas similares. No sólo se está volviendo un poco aburrido de ver, sino que la experiencia del usuario no es tan buena.
Una forma de cambiarlo es inspirarse en campos o áreas que van más allá del diseño digital. ¿Por qué no utilizar diseños impresos o editoriales para su sitio web? Puedes romper viejos hábitos con nuevas propiedades CSS que abren un nuevo mundo de posibilidades. Puede utilizar un creador de sitios web decente para inspirarse.
Si desea obtener más consejos sobre diseño web, consulte nuestra guía sobre el diseño perfecto de un sitio web o repase Atomic Design. Además, aquí tienes los consejos sobre la experiencia del usuario que necesitas saber.
Se está produciendo una revolución CSS: herramientas como Flexbox o CSS Grid ofrecen formas sencillas de crear diseños interesantes. Con CSS, puedes crear estilos visuales que van mucho más allá de aquellos con los que estás familiarizado.
En este artículo, compartiremos algunos consejos de CSS que lo ayudarán a romper moldes en los diseños de su sitio web, con solo un par de líneas de código.
01. Explora los modos de combinación de CSS
Las imágenes bitono y los efectos de coloración son algunas de las últimas tendencias en diseño web. Son muy populares en la web gracias a Spotify, que los implementa de manera coherente. Ahora finalmente puedes dejar de crear múltiples versiones de diferentes colores de tus recursos y aplicar los efectos directamente en el navegador.
Usar modos de fusión CSS no solo es una excelente manera de unificar la apariencia del contenido en todos los sitios web, sino que también le permite configurar diferentes versiones de color de una imagen, cambiando solo un valor en CSS: el color. Hay 15 valores posibles del modo de fusión, incluidos pantalla, superposición, aclarar y oscurecer.
Ortiz León Arquitectos utiliza modos de fusión para generar un fondo de imagen bitono
Hay un par de métodos de implementación, según el tipo de elemento al que le gustaría aplicar el efecto. Por ejemplo, puede usar la imagen de fondo y el color de fondo configurados en el modo de fusión de fondo del contenedor: oscurecer;o crear una superposición con pseudoelementos (es decir, :antes y :después) en el envoltorio de la imagen para conseguir un efecto de coloración.
Para lograr un efecto duotono satisfactorio, se recomienda utilizar una imagen en blanco y negro de alto contraste. Puede hacer esto aplicando filtros CSS para establecer una escala de grises y un nivel de contraste alto.
El sitio web de Bolden tiene este gran ejemplo de modo de mezcla, que se ha logrado completamente en CSS.
Otra propiedad interesante es modo de mezcla, que le permite combinar el contenido del elemento con el contenido o fondo de su padre directo. Esto funciona especialmente bien en letras superpuestas. Quizás se pregunte por qué en este caso no ajustamos simplemente la opacidad; la respuesta es simple: podemos perder fácilmente la intensidad del color usando solo la transparencia.
Se acerca la era de las imágenes que se pueden editar directamente en su navegador web, pero no podemos olvidarnos de la compatibilidad del navegador: la compatibilidad con los modos de fusión es limitada en este momento. Y para mantener esas imágenes seguras, asegúrese de explorar las opciones de almacenamiento en la nube.
02. Agrega una máscara
El enmascaramiento le indica a su navegador qué elementos de activos deben estar visibles y es muy útil para crear formas y diseños creativos. El enmascaramiento se puede realizar de tres maneras: usando una imagen rasterizada (por ejemplo, formato PNG con partes transparentes), gradientes CSS o elementos SVG.
Tenga en cuenta que, a diferencia de una imagen rasterizada típica, SVG se puede escalar o transformar sin una pérdida significativa de calidad.
img { imagen-máscara: url('mask.png') gradiente lineal(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); imagen-mascara: url(#masking); /*haciendo referencia al elemento generado y definido en código SVG*/ }
Es importante mencionar que Firefox solo admite la última versión, por lo que necesitamos usar un elemento de máscara SVG en línea. ¿Qué pasa si utilizamos una imagen rasterizada con niveles de transparencia? Las partes transparentes de la imagen no se verán; en otras palabras, los fragmentos opacos se mostrarán, ocultando otras piezas.
El enmascaramiento es particularmente poderoso porque le permite aplicar las mismas propiedades a las imágenes de fondo, definiendo su posición, tamaño y repetición.
Aquí, el fondo rojo es la parte visible y el texto surgirá detrás de las montañas (haga clic en la imagen para ver la máscara final)
Un gran caso de uso para el enmascaramiento CSS es en artículos que combinan texto e imágenes. Los contenedores e imágenes irregulares son muy populares en la impresión, pero su implementación en la web es tediosa y lleva mucho tiempo. Pero gracias al enmascaramiento, ¡ya no!
También puedes divertirte usando niveles de transparencia para recortar parte de imágenes animadas (por ejemplo, archivos GIF). Sin embargo, cuando utilice estas propiedades, no se olvide de la compatibilidad con varios navegadores y agregue prefijos de proveedores.
03. No tengas miedo de recortar
Otra gran característica es el recorte de CSS. El límite de una forma se llama ruta de clip (no debe confundirse con la propiedad de clip obsoleta), y el recorte define qué área de la imagen debe ser visible. Recortar es similar a recortar una hoja de papel: todo lo que esté fuera del camino quedará oculto, mientras que todo lo que esté dentro del camino será visible.
ruta de clip: círculo (radio en x, y); ruta del clip: URL (#recorte); /*haciendo referencia al elemento SVG*/
Por ejemplo, si una función de círculo establece una máscara de recorte sobre la parte superior de una imagen, solo verá la parte de la imagen dentro de este círculo.
Lo bueno es que podemos usar funciones de formas y SVG como rutas de clip, lo que nos brinda muchas oportunidades; por ejemplo, podemos animarlos para transformarlos en formas. Consulte este artículo de Chris Coyier sobre la creación de JPG transparente utilizando la ruta del clip SVG.
Con la ruta del clip puedes eliminar el fondo de tu imagen (haz clic para ver el ejemplo completo)
Si se pregunta cuál es la diferencia entre recorte y enmascaramiento, recuerde que las máscaras son imágenes y los clips son solo rutas vectoriales. Vale la pena mencionar que el enmascaramiento consumirá más memoria, ya que estás trabajando con una imagen completa, por lo que todo debe hacerse píxel por píxel.
Por eso se recomienda utilizar máscaras cuando desee un efecto de transparencia parcial; Si desea bordes nítidos, es mejor utilizar los trazados de recorte.
04. Piensa fuera de la caja
Forma exterior y forma interior ¡al rescate! ¿Quién dijo que los contenedores de texto siempre deben ser rectangulares? Salgamos de la caja, literalmente, y descubramos nuevas formas que hagan que nuestros diseños de página sean más ricos y menos cuadrados. Las propiedades de forma exterior y forma interior le permiten ajustar su contenido alrededor de rutas personalizadas en CSS.
¿Entonces, cómo funciona? Simplemente aplique el siguiente código a la imagen flotante o contenedor dado:
forma exterior: círculo (50%); /* el contenido fluirá alrededor del círculo*/
Es importante tener en cuenta que la propiedad flotante y las dimensiones del elemento (alto y ancho) deben definirse; de lo contrario, esto no funcionará. Para la forma que puedes elegir círculo(), polígono(), recuadro() o elipse().
Otro valor posible es el URL() función. En este caso, esto permite que la propiedad de forma exterior defina la forma de un elemento según la imagen. Puede optar por utilizar el URL() función en lugar de la polígono() cuando tienes un gráfico particularmente sofisticado con muchas curvas y puntos, y quieres que el contenido lo envuelva suavemente.
Utilice DevTools para comprobar cómo se comporta la forma que ha diseñado para su texto (haga clic en la imagen para ver este ejemplo)
Si desea crear más espacio entre su elemento y el contenido, utilice el margen de forma propiedad, que actuará como un margen. Las funciones de forma se pueden animar, pero sólo para polígonos definidos: el URL() Desafortunadamente, la función no se puede animar.
Soporte del navegador para forma exterior está limitado por el momento, pero cruza los dedos para que se implemente rápidamente en otros navegadores.
05. Prueba SVG para animación
Para ser honesto, no puedo imaginar la web actual sin SVG (gráficos vectoriales escalables). Su nombre habla por sí solo: es escalable, por lo que responde a todas las inquietudes relacionadas con el diseño web responsivo. El gráfico SVG será nítido sin importar la resolución de pantalla del dispositivo en el que se vea.
Aparte de la escalabilidad, hay otra característica que debería animarte a jugar con SVG: la capacidad de manipular SVG con CSS. Si nunca ha intentado incursionar en animaciones CSS y código SVG, debe intentarlo ahora; es increíble lo rápido que puede lograr efectos sorprendentes.
Esta presentación de diapositivas animada es de la presentación de Aga en CSSconf Nordic y fue creada completamente en HTML y SVG (haga clic para verla en acción)
Puede pensar que en algunos casos es más fácil utilizar imágenes rasterizadas, sin embargo, SVG tiene una gran ventaja sobre las imágenes normales. Las palabras incluidas en SVG se mantienen en el etiqueta y, por lo tanto, sigue siendo texto, lo que lo hace buscable, seleccionable y accesible. También significa que puedes editarlo directamente en el código. Sin embargo, debemos recordar incrustar la fuente para asegurarnos de que la fuente se represente.
Animar SVG con CSS es como animar cualquier otro elemento en HTML: se puede hacer con transiciones, transformaciones y animaciones de fotogramas clave. Una vez que estés familiarizado con el código SVG, el resto es sencillo y muy intuitivo, porque básicamente lo haces como lo harías en HTML.
Lo mejor de SVG es que puedes tomar cualquier parte que quieras y darle vida con animaciones CSS. Esto significa que podemos crear algunos efectos dinámicos muy interesantes, no necesariamente usando JavaScript. SVG tiene su propia API DOM, por lo que, de hecho, todo el código SVG se puede inspeccionar fácilmente usando DevTools, que recomiendo encarecidamente usar mientras explora este tema.
06. Haz algo de ruido
¡Vuelven los años 80 y 90! El glitch (la estética del caos, el ruido y las interferencias) se está convirtiendo en una tendencia de diseño popular este año. La celebración de fallos, fallos y errores también se puede ver en la web. Si desea jugar con la perspectiva y ser más caótico visualmente, puede hacerlo fácilmente transformando y sesgando los elementos de su sitio.
Este efecto es muy fácil de codificar y agrega un fuerte acento visual a un sitio web (haga clic para verlo en vivo)
El ejemplo perfecto de cómo hacerlo solo en CSS se puede encontrar en CodePen de Captain Anonymous, que presenta texto animado y sesgado. Una línea de código hace la magia:
transformar: sesgar (60 grados, -30 grados) escala Y (.66667);
07. Sea creativo con el collage
Los diseños inspirados en collages están disfrutando de su momento en las artes visuales (mientras investigaba para este artículo, el trabajo de Rosanna Webster y Barrakuz inmediatamente me robó el corazón) e incluso en la web están recibiendo cada vez más atención. Si tiene dudas, consulte la página de inicio de MailChimp (a continuación). ¿Te diste cuenta del collage?
Los collages de la página de inicio de Mailchimp se han creado utilizando divertidas propiedades CSS
El enfoque tradicional es simplemente adjuntar imágenes rasterizadas que se han preparado en un editor de gráficos, pero con las técnicas que he analizado en este artículo, es posible crear efectos similares mediante el uso de propiedades CSS. Incluso puedes preparar collages que realmente se ajusten a los requisitos de la web y que sean escalables, animados e interactivos.
He preparado algunos ejemplos usando todas estas interesantes propiedades CSS, para que puedas ver cómo se pueden combinar para lograr un estilo similar a un collage en la web. Echa un vistazo a mis ejemplos.
08. No olvides la compatibilidad con el navegador.
Si se siente reprimido cuando desea utilizar propiedades CSS que…
