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.

Accesorios para iPhone 4: más de 30 fundas y fundas únicas

Accesorios para iPhone 4: más de 30 fundas y fundas únicas

La mayoría de las personas ya no compran estuches y bolsitas simplemente para proteger sus iPhones; queremos algo que nos haga sentir bien. Por mucho que tener un iPhone o un teléfono Blackberry o HTC da una declaración sobre el tipo de persona que eres, es posible que desees destacar de la creciente multitud de iPhone y reclamar una identidad para ti . U

(Consejos de tecnología y diseño)

Qué 20 diseñadores llevan dentro de sus bolsos [PICS]

Qué 20 diseñadores llevan dentro de sus bolsos [PICS]

Los diseñadores y artistas son gente muy de moda, como ya sabrá. Les gusta ser creativos desde la ropa que usan hasta cómo organizan sus escritorios. Si siempre te has preguntado qué llevan los diseñadores en sus bolsos también, definitivamente debes prestar atención a esto.Mijlo, un colectivo holandés que tiene un proyecto de mochila que puedes respaldar en Kickstarter, ha contactado a un grupo de creativos de todo el mundo, preguntándoles lo esencial que tienen en sus bolsos. En su s

(Consejos de tecnología y diseño)