es.hideout-lastation.com
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 .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.
30 increíble manipulación de fotos de fuego y llamas
Verdaderamente, la civilización humana no puede construirse sin el fuego. Desde el control del fuego por los primeros humanos, ha estado con nosotros por alrededor de 125, 000 años, presenciando el ascenso y la caída de las civilizaciones humanas. A diferencia del agua calmada con belleza interior, el fuego brillante ha atraído mucha atención, así inspiró a muchos grandes artistas humanos para crear arte sobre él, el arte del fuego.Hasta l
19 aplicaciones útiles para planificar tu propia boda
Planear algo tan masivo como el día más importante de su vida requiere mucho tiempo, esfuerzo, discusiones, negociaciones y compromisos. También proporciona información sobre el tipo de vida que compartirás con tu pareja después del gran día. Para evitar que las frustraciones y los argumentos opaquen todo el proceso de planificación, sé inteligente al respecto .Busque a
