Cómo crear una cinta de CSS
Hablamos sobre Cintas CSS en diseño web cuando una tira de caja (llamado cinta) envuelve otra caja. Es una técnica de diseño bastante usada para decorar texto, especialmente los encabezados. En el sitio web de W3C puede ver cómo pueden ayudar las cintas CSS usadas correctamente contenido de la estructura de una manera sutil.
Entonces, en este post vamos a ver cómo crear una simple cinta de CSS que puedes usar para mejorar los encabezados en tu sitio web. Gracias a Transformaciones CSS, Podemos crear este diseño con una base de código mucho más simple que antes.
Puedes echar un vistazo a la demostración final a continuación..
HTML y estilos básicos
Primero, creamos un etiqueta que marcamos con el .tarjeta selector que representa una caja rectangular de la cinta envolver alrededor.
También establecemos el dimensiones basicas y el color de fondo con CSS.
.tarjeta fondo-color: beige; altura: 300px; margen: 40px; ancho: 500px;
La parte media de la cinta
Usaremos un Variable CSS (nos permite almacenar y reutilizar un valor CSS) llamado --pag a almacenar el valor de relleno. El valor de la relleno la propiedad usa el var (- p) sintaxis para los rellenos izquierdo y derecho de la cinta de modo que pueda ser fácilmente ensanchado. los --pag la variable más adelante será reutilizado varias veces; Eso hace que nuestro código sea flexible..
.cinta --p: 15px; color de fondo: rgb (170,170,170); altura: 60px; relleno: 0 var (- p); ancho: 100%;
En la siguiente captura de pantalla, puede ver cómo se ve su demostración en este punto:
Centrando la cinta
También necesitamos centrar la cinta. Nosotros empujarlo hacia la izquierda por el tamaño de relleno (marcado por el --pag variable) usando posicionamiento relativo.
.cinta --p: 15px; color de fondo: rgb (170,170,170); altura: 60px; relleno: 0 var (- p); posición: relativa; derecha: var (- p); ancho: 100%;
La demo actualizada:
Los lados de la cinta.
Ahora creamos el Lados izquierdo y derecho de la cinta. que aparentemente debe doblarse alrededor del borde de la tarjeta. Para ello, utilizamos tanto el :antes de y :después pseudo-elementos de .cinta.
Ambos pseudo-elementos heredan el color de fondo de .cinta, y usamos el filtro: brillo (.5) Regla para oscurecer un poco su color. Ellos son también absolutamente posicionado dentro de su padre (relativamente posicionado).
Su ancho tiene que ser el igual que el tamaño de relleno, y los colocamos A los extremos izquierdo y derecho de la cinta. utilizando la izquierda: 0 y derecha: 0 reglas de estilo.
.ribbon: before, .ribbon: after background-color: heredar; contenido: "; pantalla: bloque; filtro: brillo (.5); altura: 100%; posición: absoluta; ancho: var (- p); .ribbon: antes izquierda: 0; .ribbon: después derecha: 0;
Ahora la cinta con los lados que acabamos de agregar se ve como a continuación:
Sesgar los lados
Para hacer los lados de la cinta. mirar doblado, Necesitamos que sesgar los lados a 45 °. los transformar: skewy () Regla CSS sesga los elementos verticalmente.
.cinta: antes izquierda: 0; transformar: skewy (45deg); .ribbon: después de derecha: 0; transformar: skewy (-45deg);
Como podéis ver los bordes de los laterales. no alinear después de la transformación, por lo que necesitamos tirarlos hacia abajo.
Alinear los lados
A determinar la longitud adecuada Por lo que tenemos que mover los lados hacia abajo, nos dirigimos a la trigonometría.. Lo que necesitamos encontrar es X, como y es el ancho de los lados (es igual al tamaño de relleno de .cinta), y el ángulo θ es de 45 ° (el ángulo del sesgo).
La resultante X entonces necesita ser reducido a la mitad, ya que hay un lado izquierdo y otro derecho también.
Si está utilizando cualquier preprocesador CSS, compruebe si tiene un bronceado función, de lo contrario consulte una tabla tangente o una calculadora para averiguar el valor tangente del ángulo. Tenemos suerte como bronceado 45 ° es 1, lo que significa que el valor de X igual a y en nuestro caso.
.ribbon: before, .ribbon: after background-color: heredar; contenido: "; pantalla: bloque; filtro: brillo (.5); altura: 100%; posición: absoluta; parte superior: calc (var (- p) / 2); ancho: var (- p);
Ya que X Tenía que ser reducido a la mitad, usamos el calc () Función CSS para realizar la división de la --pag variable.
Finalmente necesitamos alinear los lados a lo largo del eje z también, así que vamos a añadir el índice z: -1 gobernar a los lados con el fin de Colóquelos detrás de la parte media de la cinta.
.ribbon: before, .ribbon: after background-color: heredar; contenido: "; pantalla: bloque; filtro: brillo (.5); altura: 100%; posición: absoluta; parte superior: calc (var (- p) / 2); ancho: var (- p); z- índice: -1;
Ahora que alineamos los lados, nuestra cinta CSS está lista..
A continuación, puedes ver la demostración en vivo de nuevo. Ten en cuenta que también utiliza algunos estilos adicionales..
