es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo crear una cinta CSS

Hablamos de cintas CSS en el diseño web cuando una tira de caja (llamada cinta) envuelve otra caja . Es una técnica de diseño bastante utilizada para decorar texto, especialmente los títulos. En el sitio web del W3C puede comprobar cómo las cintas CSS usadas correctamente pueden ayudar a estructurar el contenido de una manera sutil.

Por lo tanto, en esta publicación vamos a ver cómo crear una cinta de CSS simple que puede usar para mejorar los títulos de su sitio web. Gracias a las transformaciones de CSS, podemos crear este diseño con una base de código mucho más simple que antes.

Puede echar un vistazo a la demostración final a continuación.

HTML y estilos básicos

Primero, creamos un

Elemento HTML al cual luego agregaremos el diseño de la cinta . Lo colocamos dentro de un
etiqueta que marcamos con el selector .card que representa una caja rectangular que la cinta envolverá .

También establecemos las dimensiones básicas y el color de fondo con CSS.

 .card {background-color: beige; altura: 300px; margen: 40px; ancho: 500px; } 

La parte media de la cinta

Usaremos una variable de CSS (nos permite almacenar y reutilizar un valor de CSS) llamado --p para almacenar el valor de relleno . El valor de la propiedad de padding utiliza la sintaxis var(--p) para los márgenes izquierdo y derecho de la cinta de modo que se pueda ensanchar fácilmente . La variable --p más tarde se reutilizará varias veces ; eso hace que nuestro código sea flexible.

 .ribbon {--p: 15px; color de fondo: rgb (170, 170, 170); altura: 60px; relleno: 0 var (- p); ancho: 100%; } 

En la siguiente captura de pantalla, puedes ver cómo se supone que debe ser tu demostración en este momento:

Centrar la cinta

También necesitamos centrar la cinta . Lo empujamos hacia la izquierda por el tamaño del relleno (marcado por la variable --p ) usando el posicionamiento relativo.

 .ribbon {--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 los lados izquierdo y derecho de la cinta que debería doblarse aparentemente alrededor del borde de la tarjeta. Para hacerlo, usamos los pseudo-elementos :before y :after de .ribbon .

Ambos pseudo-elementos heredan el color de fondo de .ribbon, y usamos la regla filter: brightness(.5) para oscurecer un poco su color. También están absolutamente posicionados dentro de su padre (relativamente posicionado).

Su ancho debe ser el mismo que el tamaño del relleno, y los colocamos a los extremos izquierdo y derecho de la cinta utilizando las reglas de estilo left: 0 y right: 0 .

 .ribbon: before, .ribbon: after {background-color: inherit; contenido:''; bloqueo de pantalla; filtro: brillo (.5); altura: 100%; posición: absoluta; ancho: var (- p); } .ribbon: before {left: 0; } .ribbon: after {right: 0; } 

Ahora la cinta con los lados que acabamos de agregar se ve de la siguiente manera:

Sesgar los lados

Para hacer que los lados de la cinta se vean doblados, necesitamos inclinar los lados en 45 ° . La regla de transform: skewy() CSS sesga los elementos verticalmente .

 .ribbon: before {left: 0; transformar: skewy (45deg); } .ribbon: after {right: 0; transformar: skewy (-45deg); } 

Como puede ver, los bordes de los lados no se alinean después de la transformación, por lo que debemos tirar de ellos hacia abajo .

Alinea los lados

Para determinar la longitud adecuada por la cual necesitamos mover los lados hacia abajo, pasamos a la trigonometría. Lo que necesitamos encontrar es x, ya que y es el ancho de los lados (igual al tamaño de relleno de .ribbon ), y el ángulo θ es 45 ° (el ángulo de inclinación).

La x resultante debe dividirse a la mitad, ya que también hay un lado izquierdo y uno derecho.

Si está usando cualquier preprocesador de CSS, compruebe si tiene una función de tan, de lo contrario, consulte un diagrama de tangente o una calculadora para averiguar el valor tangente del ángulo . Tenemos suerte ya que tan 45° es 1, lo que significa que el valor de x es igual a y en nuestro caso.

 .ribbon: before, .ribbon: after {background-color: inherit; contenido:''; bloqueo de pantalla; filtro: brillo (.5); altura: 100%; posición: absoluta; arriba: calc (var (- p) / 2); ancho: var (- p); } 

Como x tuvo que ser reducido a la mitad, utilizamos la función CSS de calc() para realizar la división de la variable - --p .

Finalmente, también necesitamos alinear los lados a lo largo del eje z, así que agreguemos la regla z-index: -1 a los lados para colocarlos detrás de la parte media de la cinta .

 .ribbon: before, .ribbon: after {background-color: inherit; contenido:''; bloqueo de pantalla; filtro: brillo (.5); altura: 100%; posición: absoluta; arriba: calc (var (- p) / 2); ancho: var (- p); índice z: -1; } 

Ahora que hemos alineado los lados, nuestra cinta CSS está lista.

A continuación, puede ver la demostración en vivo de nuevo, tenga en cuenta que también utiliza algunos estilos adicionales.

10 consejos de Windows 10 para impulsar la productividad

10 consejos de Windows 10 para impulsar la productividad

Windows 10 es un sistema operativo rápido y eficiente diseñado para mejorar la productividad del usuario . El sistema operativo de escritorio más utilizado ofrece una multitud de características que ayudan a los usuarios a hacer malabarismos entre las aplicaciones sin problemas y realizar múltiples tareas con el mínimo esfuerzo.Sin e

(Consejos de tecnología y diseño)

Cómo configurar WordPress usando OpenShift

Cómo configurar WordPress usando OpenShift

OpenShift es una plataforma como servicio del líder de código abierto, Redhat. Funciona con el código OpenShift de código abierto que se ejecuta en los sistemas RHEL. OpenShift se puede utilizar para alojar y ejecutar una variedad de software, y es compatible con varias tecnologías y bases de datos de código abierto. Tien

(Consejos de tecnología y diseño)