10 increíbles trucos de CSS para transformar tus diseños web

Cualquier persona con experiencia en diseño web, ya sea que haya utilizado creadores de sitios web de bricolaje o haya creado un sitio desde cero, es probable que haya oído hablar de CSS antes. Esta herramienta increíblemente poderosa se puede utilizar para transformar sus diseños web, brindándole el poder de tomar el control de su sitio web y lograr su visión creativa. Pero, ¿cómo puede usar las hojas de estilo en cascada para desbloquear el potencial de su próximo sitio web?

Esta guía solo detallará una variedad de propiedades CSS que se han utilizado para crear el encabezado que puede ver en la imagen de arriba. Puedes encontrar este proyecto aquí en CódigoPen, dándote la oportunidad de probarlo por ti mismo.

Manipulación de imágenes CSS

El primer paso que debemos dar para construir nuestra sección de encabezado es agregar imágenes a la página. Puede usar una variedad de métodos para lograr este objetivo, por lo que hemos cubierto los más populares, junto con un par de trucos para ayudarlo a manipular sus imágenes.

1. Imagen de fondo CSS

Queremos tener una imagen de fondo de pantalla completa para nuestro encabezado, y la propiedad CSS de la imagen de fondo es ideal. Primero, necesitamos crear un contenedor para nuestra imagen (y el resto de los elementos dentro del encabezado).

Comenzamos agregando una etiqueta div con "encabezado" como su clase, luego configuramos su altura a 100vh y es ancho a 100vw; esto nos da un cuadro que es exactamente del mismo tamaño que la ventana gráfica. También agregamos una regla CSS para el cuerpo de la página, con su desbordamiento establecido en oculto y es márgenes establecidos en 0px.

Con el contenedor en su lugar, podemos agregar una imagen de fondo, y hay tres reglas CSS diferentes que necesitamos para lograr este objetivo. El primero, background-image, necesita una URL para actuar como la fuente de la imagen de fondo, y hemos usado el práctico catálogo de Unsplash para esto. También tenemos que configurar el tamaño de fondo para cubrir y el posición de fondo hacia abajo, pero es posible que desee experimentar con estos para obtener los mejores resultados.

2. Modo de fusión de fondo CSS

Los modos de combinación de CSS permiten combinar imágenes y texto, de forma muy parecida a la función de combinación de software como Adobe Photoshop. Para hacer que los modos de fusión funcionen con nuestra imagen de fondo, configuramos el color de fondo a blanco semitransparente antes de agregar el modo de fusión que queríamos usar.

Siguiendo esto, background-blend-mode se configuró en luz suave, permitiéndonos suavizar la imagen.

3. Clip-Path de CSS

Para nuestro próximo truco, usaremos una regla llamada clip-path. Al usar etiquetas HTML img, puede establecer una ruta que ocultará partes de las imágenes con las que está trabajando. Puede elegir usar formas generales para esto, pero también puede usar una aplicación de generación de SVG para crear un diseño más complejo.

Agregamos una etiqueta div con "flex_image_box" para que actúe como un contenedor para tres imágenes, usando la propiedad display CSS para convertirlo en un flexbox (hablaremos de esto más adelante). Se agregaron tres etiquetas img dentro de la etiqueta div, con ID establecidos como "img1", "img2" e "img3". Configuración de la ancho de cada imagen a 600px, somos capaces de deje la propiedad de altura en blanco sin cambiar la relación de aspecto de las imágenes; ¡ahora es el momento de agregar nuestro clip-path!

Para crear nuestros tres triángulos, usamos la misma ruta de recorte de polígono para img1 e img3, con una versión invertida para img2. También tuvimos que jugar con el posicionamiento de nuestro contenedor de caja flexible para asegurarnos de que las imágenes se colocaran en la posición correcta en la pantalla. Nuestras reglas de clip-path se pueden ver a continuación.

4. Opacidad CSS

La opacidad establece el nivel de transparencia de cualquier elemento HTML. Configuramos el opacidad de nuestras imágenes al 90%, haciéndolos ligeramente opacos para que se mezclen bien con el fondo.

Texto e imágenes adaptables a CSS

Ya hemos explorado el arte de crear impresionantes sitios web receptivos usando HTML, CSS y JavaScript en el pasado, pero podemos basarnos en los principios que ya comprende para brindarle una visión más profunda de las habilidades que necesita para dominar los diseños de su sitio web.

1. Unidades relativas/responsivas de CSS

Las unidades CSS como px, pt y cm son unidades absolutas, y esto significa que un navegador web las mostrará en el mismo tamaño sin importar el ancho y el alto de la ventana que ocupen. Las unidades relativas son diferentes y producen alturas y longitudes relativas a otras medidas, como la ventana del navegador o un elemento principal. Las unidades relativas a continuación se usan comúnmente y son esenciales para el diseño web receptivo.

• ellos: Esta unidad se suele utilizar con texto. Es relativo al tamaño de fuente del elemento actual, lo que hace que 4em sea cuatro veces más grande que el tamaño de fuente establecido.
• movimiento rápido del ojo: Al igual que em, rem es relativo al tamaño de fuente de un elemento; el elemento raíz en una jerarquía se utiliza para definir el tamaño de salida.
• vw/vh: determinando el ancho y el alto en función del tamaño de la ventana gráfica, 2vw equivale al 2 % del ancho del navegador, mientras que 2vh equivale al 2 % de la altura del navegador.
• %: La unidad % calcula las dimensiones en función del tamaño del padre de un elemento.
• vmín/vmáx: estas unidades producen dimensiones relativas al 1 % de las dimensiones más pequeñas o más grandes de la ventana gráfica, proporcionando elementos con los medios para responder directamente al tamaño de una ventana del navegador.

2. Tamaño de fuente CSS

Esta propiedad se puede establecer utilizando valores predeterminados que están predefinidos por la hoja de estilo principal del sitio web o el navegador web del usuario. Estos valores incluyen medio, xx-pequeño, x-pequeño, pequeño, grande, x-grande y xx-grande, con medio configurado como predeterminado para cualquier texto que carezca de una etiqueta CSS de tamaño de fuente. Alternativamente, se pueden emplear valores relativos cuando se usa la propiedad CSS de tamaño de fuente, y este es el método que hemos utilizado para garantizar que el texto en nuestra sección de encabezado tenga el tamaño adecuado para cualquier mirador

Agregamos dos etiquetas de encabezado a nuestro HTML, lo que nos permite agregar texto al proyecto. Uno es un encabezado principal grande, mientras que el otro es un subencabezado, y ambos usan unidades relativas.

Relacionados: Cómo cambiar el tamaño de fuente HTML en CSS

3. Ancho y alto de CSS

Todos los elementos HTML vienen con dimensiones de alto y ancho, ya sean div, img, a o cualquier otro tipo de etiqueta. Estas dimensiones se pueden establecer automáticamente en valores predeterminados, pero también pueden ser dictadas por diseñadores web utilizando las reglas correctas; hemos usado ambos métodos para este encabezado.

Se han utilizado unidades sensibles para la imagen de fondo, con la altura establecida en 100vh y el ancho establecido en 100vw, pero también hemos utilizado unidades absolutas para nuestras tres imágenes. Vale la pena explorar y experimentar con las unidades de ancho y alto de CSS, con opciones como "heredar" que proporcionan el significa adoptar las dimensiones de un elemento padre, y hay muchos otros trucos como este que puedes usar.

4. Modo mixto CSS

El modo de combinación de CSS es muy similar al modo de combinación de fondo, solo que se puede aplicar a cualquier elemento, en lugar de ser exclusivo para fondos. Hemos utilizado esta propiedad en nuestro encabezado H1 para agregar textura y hacer que el proyecto sea más interesante. Empezamos configurando nuestro color de texto a negro, seguido de establecer el mezcla-mezcla-modo para superponer.

Vale la pena explorar las diferentes opciones de combinación que tiene cuando se trata de texto, ya que los fondos con perfiles de color únicos responderán de manera diferente a la configuración que utilice.

5. Transformación de texto CSS

CSS text-transform es una propiedad inteligente que permite a los diseñadores cambiar las mayúsculas y minúsculas del texto en sus sitios web sin afectar la forma en que lo leen los motores de búsqueda. Por ejemplo, tenemos establecer la transformación de texto en mayúsculas en nuestro encabezado H1, haciendo que cada letra sea mayúscula sin importar cómo la ingresemos en nuestro HTML.

Propiedades de desbordamiento de CSS

A menudo, HTML puede parecer un marco rígido que establece límites estrictos para el contenido de sus sitios web, pero esto no ocurre cuando se emplean propiedades de desbordamiento.

Desbordamiento de CSS y desbordamiento de texto

Overflow y text-overflow son propiedades CSS muy similares. El desbordamiento se puede aplicar a cualquier elemento, lo que le brinda control sobre el contenido que puede escapar de sus límites. El desbordamiento de texto es similar, aunque solo se aplica al texto y le brinda la posibilidad de agregar parámetros adicionales a sus reglas. Solo hemos usado el desbordamiento para este proyecto (lo usamos para restringir el tamaño del cuerpo de nuestra página), pero puede leer sobre el desbordamiento de texto en la W3Escuelas sitio web.

Usando CSS para sus diseños web

CSS es una herramienta increíblemente poderosa que permite a los diseñadores y desarrolladores web crear sitios web impresionantes utilizando código. Lo alentamos a que eche un vistazo al CodePen que proporcionamos al principio del artículo, ya que esto le dará una idea aún más profunda de cómo funcionan todas estas herramientas. Además, puedes jugar con el encabezado que hemos creado para agregar tus propios toques finales.

8 consejos y trucos esenciales de CSS que todo desarrollador debe saber

¿Está utilizando estos métodos CSS clave para un flujo de trabajo rápido y un hermoso diseño web?

Leer siguiente

Sobre el Autor