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.
La realidad virtual de 360 ° cambia todo lo que sabes sobre los videos
En los años 90, la realidad virtual (RV) solo se conocía entre los jugadores de élite, pero con el tiempo se hizo cada vez más accesible para el mundo fuera de los juegos. Hoy puedes ver a usuarios de YouTubers, Facebook, medios de noticias y supermercados usando una forma más fácil de utilizar VR para atraer a más público: el video panorámico de 360 ° .Estas escenas
Accesos directos seleccionables están llegando a Google
Buscar información con Google está a punto de simplificarse ya que la compañía introducirá accesos directos tocables tanto en la aplicación de Google como en la versión web móvil del motor de búsqueda.Una vez que se haya actualizado la aplicación Google, los usuarios de la aplicación Google podrán ver una serie de atajos justo debajo del cuadro de búsqueda . Al tocar la
