Cómo crear un diseño de borde recortado con CSS
Con un diseño de borde recortado Podemos mostrar a los usuarios lo que se puede encontrar. debajo del área de borde de un elemento HTML. Esta tarea es típicamente resuelta por apilando dos o más elementos de bloque (en la mayoría de los casos divs) de diferentes tamaños Encima del otro. Primero, esto parece una solución sin esfuerzo, pero se vuelve más frustrante cuando se desea reutilizar el diseño varias veces, moverse por los elementos, optimizar el diseño para dispositivos móviles o mantener el código.
En esta publicación, les mostraré una solución elegante solo para CSS que usa solo un elemento HTML Para lograr el mismo efecto. Esta técnica también es excelente para la accesibilidad, ya que carga la imagen de fondo en el CSS, separado del HTML.
Al final de este post, sabrás cómo mostrar una imagen de fondo en el área del borde con el fin de crear el diseño de borde recortado Se puede ver a continuación. También te mostraré cómo puedes hacer que el diseño responda. utilizando unidades de vista.
Codigo inicial
El único requisito en el frente de HTML es un elemento de bloque:
Necesitaremos reutilizar Las dimensiones (ancho y alto) y los valores de ancho de borde de la div, así que los estoy presentando como variables CSS. La variable --w denota el anchura del .cb elemento de bloque, --h indica su altura, --segundo va por el ancho del borde, y --b2 para el ancho del borde multiplicado por 2. Más adelante veremos el uso de la última variable.
Estoy dimensionando el La unidad Mejoremos el código anterior agregando un fondo y configurando el borde, la altura y el ancho mediante el uso de nuestras variables predefinidas CSS. Así es como se supone que se verá la demo ahora mismo: Necesitamos la imagen de fondo para cubrir toda el área de la Si desea darle un tamaño fijo a la imagen de fondo, solo asegúrese de que el tamaño que está dando le permita cubrir el área del borde de la imagen de fondo. los ancho de la imagen de fondo El Del mismo modo, el altura de la imagen de fondo El De esta manera, hemos dimensionado la imagen de fondo a un área que es igual al tamaño de los Nota: Si está agregando relleno a la Esto es lo que tenemos ahora: Ahora que hemos cubierto el área que incluye la frontera con la imagen de fondo, todo lo que queda es cubrir el área central dentro de la frontera (área exclusiva del borde) con un color sólido, para el cual buscamos un La sombra horizontal con valor. En la demostración de Codepen, puedes ver un borde blanco alrededor de la imagen. Hay un famoso truco de Usando recuadros 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. El actualizado los En mi demostración final de Codepen, coloqué el código para la imagen de fondo y el color de la sombra de la caja en una clase separada. Esto es Opcional, Pero puede ser extremadamente útil si quieres reutilizar el diseño del diseño del borde recortado en varios elementos, y agregue la estética (imagen de fondo + color) para cada elemento de forma independiente. He añadido una clase llamada Ya que Para establecer el valor de la Dado que las dimensiones están todas en la unidad Nota: No te olvides de añadir la etiqueta meta viewport a su página HTML si ha decidido optimizarlo para la vista móvil.vw unidad (puedes usar unidades fijas si quieres). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Explicacion rapida -
vw y vh unidadesvw representa el 1/100th de la anchura de la ventana. Por ejemplo, 50vw es 50 partes del ancho de una vista cortado verticalmente en 100 partes iguales, mientras 50vh es 50 partes de una altura de viewport cortado horizontalmente en 100 partes iguales. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); fondo: url (bg.jpg); borde: var (- b) sólido transparente; altura: var (- h); ancho: var (- w);
Tamaño de la imagen de fondo
fondo Valor lo estoy dando: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); fondo: url (bg.jpg) centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); borde: var (- b) sólido transparente; altura: var (- h); ancho: var (- w);
calc (var (- w) + var (- b2))] es la suma de ancho de la div Elvar (- w)] y el ancho de los bordes izquierdo y derecho Elvar (- b2)].calc (var (- h) + var (- b2))] es la suma de altura de la div Elvar (- h)] y el ancho de los bordes superior e inferior Elvar (- b2)].div (incluyendo el área fronteriza).centrar palabra clave alinea la imagen de fondo al centro de la div.div, Recuerda incluir el área de relleno al tamaño del fondo también, igual que el área del borde.
Cubre el área exclusiva de la frontera.
sombra de la caja recuadro. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); fondo: url (bg.jpg) centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); borde: var (- b) sólido transparente; cuadro de sombra: inserte var (- w) 0 0 rgba (0,120,237, .5); altura: var (- h); ancho: var (- w);
var (- w) cubre todo el ancho de la div. El uso de rgba la función de color permite algo de transparencia para agregar a la mezcla, sin embargo, también puede usar un color opaco si desea cubrir completamente el área central.
Añadir un borde extra con
sombra de la cajasombra de la caja valor es: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); fondo: url (bg.jpg) centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); borde: var (- b) sólido transparente; caja sombra: recuadro var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) blanco; altura: var (- h); ancho: var (- w);
calc (var (- b) / 2) función crea una sombra de la la mitad del ancho del borde.
Opcional: Disposición y estética separadas.
.poster1 al .poster1 --tbgc: rgba (0,120,237, .5); imagen de fondo: url ("http://bit.ly/2eQBij2"); fondo es una propiedad taquigráfica, Sus propiedades a mano pueden ser anuladas / configuradas individualmente. Por lo tanto, podemos establecer imagen de fondo en .poster1, y eliminar el valor de la URL de la fondo propiedad en .cb.sombra de la caja, nosotros podemos usar otra variable CSS. los --tbgc variable mantiene el valor del color Queremos dar a la caja de sombra (lightblue en la demo), así que entre las reglas de estilo para .cb nosotros reemplazar el valor de color de la sombra de la caja propiedad con var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); fondo: centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); borde: var (- b) sólido transparente; cuadro de sombra: inserte var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) blanco; altura: var (- h); ancho: var (- w);
Código para modo retrato
vw, va a parece demasiado pequeño cuando está viendo el diseño en modo retrato (ancho más pequeño en relación con la altura), en el que están predeterminados todos los dispositivos móviles. Para resolver este problema, cambiar vw con vh, y cambiar el tamaño del diseño Como mejor te parezca para los modos de retrato. @media (orientación: retrato) .cb --w: 35vh; --h: 40vh; --b: 4vh;
