Una de las partes de un proyecto front-end reciente tuvo un interesante efecto de corte. Hay diferentes formas de crear un diseño de borde recortado con CSS, y cada una tiene sus pros y sus contras. Pensamos en buscar formas de resolver este problema y contarte sobre ellas.
Con CSS (hojas de estilo en cascada), puedes hacer páginas web que se vean geniales, pero ¿cómo funciona? Este artículo explica qué es CSS con un ejemplo de sintaxis simple y también cubre algunos términos clave sobre el lenguaje. Para entender el artículo, necesitas saber un poco sobre CSS y SVG. Si no, está bien. Haré todo lo posible para explicar todo en detalle.
Cómo crear un diseño de borde recortado con CSS
Código inicial
Tendremos que reutilice las dimensiones (ancho y alto) y los valores de ancho de borde del div, por lo que los presento como variables CSS. La variable –w denota el ancho del elemento de bloque.cb, –h indica su altura, –b va para el ancho del borde y –b2 para el ancho del borde multiplicado por 2. Más adelante veremos el uso de la última variable.
Explicación rápida: unidades vw y vh
La unidad vw representa la centésima parte del ancho de la ventana gráfica. Por ejemplo, 50vw son 50 partes del ancho de una ventana gráfica divididas verticalmente en 100 partes iguales, mientras que 50vh son 50 partes de la altura de una ventana gráfica divididas horizontalmente en 100 partes iguales.
Tamaño de la imagen de fondo
Necesitamos que la imagen de fondo cubra toda el área incluyendo el área del borde, por lo que la imagen de fondo debe tener el tamaño correspondiente. Si desea darle a la imagen de fondo un tamaño fijo, solo asegúrese de que el tamaño que le está dando le permita cubrir el área del borde también. En cuanto al código usado en la publicación hasta ahora, aquí está el valor de fondo que le doy:
Cubrir el área exclusiva del borde
Ahora que cubrimos el borde-área inclusiva con la imagen de fondo, todo lo que queda es cubrir el área central dentro del borde (área exclusiva del borde) con un color sólido, para lo cual buscamos un recuadro de sombra.
Agregar un borde extra con box-shadow
En la demostración de Codepen, podías ver un borde blanco alrededor de la imagen. Hay un truco famoso de usar sombras de cuadro para crear múltiples bordes. podemos usar la misma técnica para agregar uno o más bordes de colores sólidos a nuestro diseño.
FAQ
¿Cómo creo un borde personalizado en CSS?
Use estilo de borde y elija un estilo de la lista de palabras CSS para establecer el estilo. Utilice el color del borde y los códigos de color hexadecimal, RGB o RGBA para establecer el color. Utilice la propiedad de borde para establecer el ancho, el estilo y el color a la vez. Use arriba, derecha, izquierda y abajo.
¿Cómo creo mi propio diseño de borde?
Vaya a Diseño > Bordes de página. Seleccione cómo desea que se vea el borde. Para ajustar la distancia entre el borde y el borde de la página, seleccione Opciones. Realice sus cambios y seleccione Aceptar. Seleccione Aceptar.