Trucos CSS para revolucionar sus diseños web

Trucos CSS
(Crédito de la imagen: Getty Images)

Aprender nuevos trucos de CSS es una de las mejores formas de cambiar el diseño de su sitio web. Si ha estado trabajando en la industria web durante un tiempo, puede sentir 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 caja de dos y tres columnas y formas similares. No solo se vuelve 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 editoriales o impresos para su sitio web? Puede romper los viejos hábitos con nuevas propiedades CSS que abren un nuevo mundo de posibilidades. Puede utilizar un decente Creador de sitios web para inspirarte.

Si desea obtener más consejos sobre diseño web, consulte nuestra guía para el perfecto diseño del sitio web o repasar Diseño atómico . Además, aquí están los experiencia de usuario consejos que necesita saber.



Está en marcha una revolución CSS: herramientas como Flexbox o Cuadrícula CSS ofrecen formas sencillas de crear diseños interesantes. Con CSS, puede crear estilos visuales que van mucho más allá de los que ya conoce.

En este artículo, compartiremos algunos consejos de CSS que lo ayudarán a romper el molde en el diseño de su sitio web, con solo un par de líneas de código.

01. Explore los modos de fusión de CSS

Las imágenes de duotono y los efectos de color son algunas de las tendencias de diseño web más populares. Son muy populares en la web gracias a Spotify, que los implementa de forma coherente. Ahora finalmente puede dejar de crear múltiples versiones de colores diferentes de sus activos y aplicar los efectos directamente en el navegador.

El uso de modos de combinación de CSS no solo es una excelente manera de unificar el aspecto del contenido en los sitios web, sino que también le permite establecer diferentes versiones de color de una imagen, cambiando solo un valor en CSS: el color. Hay 15 posibles valores de modo de fusión, que incluyen pantalla, superposición, aclarar y oscurecer.

Trucos CSS: CSS del sitio web de Ortiz Leon Architects

Ortiz Leon Architects utiliza modos de fusión para generar un fondo de imagen de duotono

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 background-image y background-color establecidos en el contenedor background-blend-mode: oscurecer; , o crear una superposición con pseudo-elementos (p. ej. :antes de y :después ) en la envoltura de la imagen para conseguir un efecto de coloración.

Para lograr un efecto duotono satisfactorio, se recomienda que utilice una imagen en blanco y negro de alto contraste. Puede hacer esto aplicando filtros CSS para establecer una escala de grises y un alto nivel de contraste.

Trucos CSS: Bolden

El sitio web de Bolden tiene este gran ejemplo de modo de combinación, que se ha logrado completamente en CSS

Otra propiedad interesante es modo de mezcla de mezcla , que le permite combinar el contenido del elemento con el contenido o el fondo de su padre directo. Esto funciona especialmente bien en letras superpuestas. Puede preguntarse por qué en este caso no solo ajustamos 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 compatibilidad del navegador - El soporte es limitado para los modos de fusión en este momento. Y para mantener esas imágenes seguras, asegúrese de explorar su almacenamiento en la nube opciones.

02. Agrega una máscara

El enmascaramiento le dice 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 formas: utilizando una imagen rasterizada (por ejemplo, formato PNG con partes transparentes), degradados CSS o elementos SVG.

Tenga en cuenta que, a diferencia de una imagen ráster típica, SVG se puede escalar o transformar sin una pérdida significativa de calidad.

|_+_|

Es importante mencionar que Firefox solo admite el último, por lo que necesitamos usar un elemento de máscara SVG en línea. ¿Qué pasa si usamos una imagen rasterizada con niveles de transparencia? Las partes transparentes de la imagen no se verán; en otras palabras, se mostrarán los fragmentos opacos, 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.

Trucos CSS: agrega una máscara

Aquí, el fondo rojo es la parte visible y el texto emergerá 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 requiere mucho tiempo. Pero gracias al enmascaramiento, ¡ya no!

También puede divertirse usando niveles de transparencia para recortar parte de las imágenes animadas (p. Ej. 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 del clip (no confundir con la propiedad de clip obsoleta), y el recorte define qué área de la imagen debe estar visible. Recortar es similar a cortar un trozo de papel: todo lo que esté fuera del camino estará oculto, mientras que todo lo que esté dentro del camino será visible.

|_+_|

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 forma y SVG como rutas de recorte, lo que nos brinda muchas oportunidades; por ejemplo, podríamos animarlas en formas morphing. Mira esto artículo de Chris Coyier sobre la creación de JPG transparente usando la ruta del clip SVG.

Sitios web CSS

Con la ruta del clip puede eliminar el fondo de su imagen (haga 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 trazados vectoriales. Vale la pena mencionar que el enmascaramiento consumirá más memoria, ya que está trabajando con una imagen completa, por lo que todo debe hacerse píxel a píxel.

Por eso se recomienda que utilice máscaras cuando desee un efecto de transparencia parcial; si desea bordes nítidos, es mejor usar las rutas de los clips.

04. Piense fuera de la caja

Forma exterior y forma dentro ¡al rescate! ¿Quién dijo que los contenedores de texto siempre deben ser rectangulares? Salgamos de la caja, literalmente, y descubramos nuevos formularios que hacen que nuestros diseños de página sean más ricos y menos cuadrados. Las propiedades shape-outside y shape-inside le permiten envolver su contenido alrededor de rutas personalizadas en CSS.

¿Entonces, cómo funciona? Simplemente aplique el siguiente código a la imagen o contenedor flotante dado:

|_+_|

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á. Por la forma con la que puedes ir circulo() , polígono() , recuadro() o elipse() .

Otro valor posible es el url () función. En este caso, esto permite que la propiedad shape-outside defina una forma de elemento basada en la imagen. Puede optar por utilizar el url () función en lugar de la polígono() cuando tiene un gráfico particularmente sofisticado con muchas curvas y puntos, y desea que el contenido lo envuelva sin problemas.

Trucos CSS: DevTools

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 la margen de forma propiedad, que actuará como un margen. Las funciones de forma se pueden animar, pero solo para polígonos definidos: el url () Desafortunadamente, la función no se puede animar.

Soporte de navegador para forma-exterior es limitado por el momento, pero mantén los dedos cruzados para su rápida implementación en otros navegadores.

05. Pruebe SVG para la animación

Para ser honesto, no puedo imaginar la Web actual sin SVG (gráficas vectoriales escalables). Su nombre habla por sí mismo: escala, por lo que responde a todas las preocupaciones sobre diseño web adaptable . El gráfico SVG será nítido sin importar la resolución de pantalla del dispositivo en el que se esté viendo.

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 asombrosos.

Trucos CSS: CSSconf Nordic

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 usar imágenes rasterizadas, sin embargo, SVG tiene una gran ventaja sobre las imágenes comunes. Las palabras incluidas en SVG se mantienen en la etiqueta y, por lo tanto, sigue siendo texto, lo que hace que se pueda buscar, seleccionar y acceder. También significa que puede editarlo directamente en el código. Sin embargo, debemos recordar incrustar la fuente para asegurarnos de que se renderice.

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é familiarizado con el código SVG, el resto es sencillo y muy intuitivo, porque básicamente lo hace como lo haría en HTML.

Lo mejor de SVG es que puedes tomar cualquier parte que quieras y hacer que cobre vida con animaciones CSS. Esto significa que podemos crear algunos efectos dinámicos muy interesantes, no necesariamente usando JavaScript. SVG tiene su propia DOM API, por lo que, de hecho, todo el código SVG se puede inspeccionar fácilmente utilizando DevTools, que recomiendo encarecidamente utilizar al explorar este tema.

06. Haz algo de ruido

¡Vuelven los años 80 y 90! 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 fallas, fallas 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.

Trucos CSS: Tennent Brown

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 en CSS solo se puede encontrar en CodePen del Capitán Anónimo , que presenta texto animado y sesgado. Una línea de código hace la magia:

|_+_|

07. Sea creativo con el collage

Los diseños inspirados en el collage están disfrutando de su momento en las artes visuales; mientras investigaba 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). ¿Notaste el collage?

Trucos CSS: MailChimp

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 ráster que se han preparado en un editor de gráficos, pero con las técnicas que he discutido en este artículo, es posible crear efectos similares usando propiedades CSS. Incluso puedes prepararte collages que realmente se ajustan a los requisitos de la Web y son escalables, animados e interactivos.

He preparado algunos ejemplos utilizando todas estas propiedades CSS geniales, para que pueda ver cómo se pueden combinar para lograr un estilo similar a un collage en la web. Mira mis ejemplos .

08. No olvide la compatibilidad con el navegador

Si se siente retenido cuando desea utilizar propiedades CSS que sospecha que no son compatibles con todos los navegadores, @supports La regla está ahí para ayudarte. @supports le permite comprobar la compatibilidad del navegador con los pares propiedad: valor de CSS.

El código que se incluye en el @supports block se procesará solo si se cumplen estas condiciones; de lo contrario, el navegador no ha leído el código. En caso de que el navegador no entienda @supports , tampoco genera una parte determinada del código.

|_+_|

La combinación de funciones como modos de fusión, enmascaramiento, recorte, formas CSS y el poder de SVG nos brinda un gran conjunto de herramientas para impulsar nuestra creatividad y romper con la norma. Con estas herramientas tenemos la oportunidad de crear una versión web de las cosas que vemos actualmente impresas.

Aunque algunas propiedades aún pueden experimentar problemas con la compatibilidad de los navegadores (si tiene muchos problemas, considere una opción más sólida alojamiento web servicio), no dude en jugar con ellos. Aunque el soporte del navegador puede ser limitado ahora, es probable que no sea así en el futuro. Es solo cuestión de tiempo.

Este artículo se publicó originalmente en la revista net.

Artículos relacionados: