Al observar el flujo de preguntas CSS en el Tostador, hace tiempo que noté que muchas de ellas se repiten muchas, muchas veces. ¡Sí, hay preguntas absolutamente estúpidas que RTFM está ansioso por responder! Pero hay más interesantes. Están asociados con un diseño no bastante estándar. No es que los ojos se asomaran a su frente, sino que también iban notablemente más allá del marco de un bootstrap convencional y tutoriales tradicionales para principiantes. Es bastante difícil buscar en Google preguntas similares: por lo general, todo el punto está en la imagen, pero es aburrido responder cada vez. En este artículo trataremos de ver algunos trucos que cubren una gama bastante amplia de tales problemas. La información está dirigida principalmente a codificadores novatos, pero puede ser más experimentada que inspiradora.
1. De ida y vuelta
Comencemos con uno simple. Si transforma un elemento contenedor y luego aplica la transformación opuesta a su contenido, puede obtener muchas cosas interesantes. Esto se usa a menudo para crear secciones oblicuas. Considere el siguiente marcado:
<div class='custom-section'> <div class='block -left'> <img class='background' src='...' /> <a class='link' href=''>Summer</a> </div> <div class='block -right'> <img class='background' src='...' /> <a class='link' href=''>Winter</a> </div> </div>
Bastante simple, nada más. De ella obtenemos este resultado:
¿Cómo sucedió esto? Aquí aplicamos transform: skew(-15deg) para el bloque y transform: skew(15deg) para el contenido: imágenes y enlaces. Eso es todo Aplicamos la transformación y la cancelamos para la posteridad. Se parece a esto:
.custom-section { > .block.-left { transform: skew(-15deg) translate(-15%); } > .block.-left > .background { transform: skew(15deg) translateX(15%); } }
Cuando se utiliza transform: skew puede ser necesario compensar la longitud del contenido o moverlo un poco, lo que hicimos con transform: translate .
En tales componentes, a menudo se usan imágenes en forma de una etiqueta img . No será superfluo recordar object-fit: cover .
Por supuesto, se pueden realizar acciones similares con otras transformaciones. Por ejemplo, rotate nos da la oportunidad de marcar o organizar fotos en círculo:
El principio de funcionamiento es el mismo. Aplicamos la transformación y la cancelamos para niños:
.image-wrapper { &:nth-of-type(2) { transform: rotate(45deg); .image { transform: rotate(-45deg); } } &:nth-of-type(3) { transform: rotate(90deg); .image { transform: rotate(-90deg); } } ... }
2. Bordientes
En CSS, tenemos una capacidad bastante limitada para dibujar elementos de borde. Pero en la cabeza del diseñador, todo es completamente diferente. Esto lleva al hecho de que un diseñador de diseño novato a menudo se levanta en un estupor y ofrece darle al diseñador un teclado en la cabeza . En la tostadora, a menudo preguntan cómo dejar solo esquinas del borde estándar, hacer un borde doble / triple, etc. Todos estos problemas pueden resolverse utilizando gradientes.
La idea básica es simple a imposible: tomar gradientes lineales y usarlos para dibujar el borde que queramos. En nuestra sociedad, la influencia de los estereotipos es muy fuerte y a muchas personas les parece que simplemente no se nos ocurre que las herramientas (en particular las propiedades CSS) se pueden usar no del todo para su propósito previsto.
En realidad, un ejemplo vivo ilustrará mejor estas palabras:
Aquí vemos dos enfoques para usar gradientes: en border-image y background-image . La primera opción puede ser conveniente en combinación con la propiedad border-image-slice , y la segunda ha sido popular durante mucho tiempo para dibujar cualquier cosa.
.example { &:nth-of-type(1) { border-size: 3px; border-style: solid; border-image: linear-gradient(to bottom, #86CB92 0%, transparent 40%, transparent 60%, #86CB92 100%); border-image-slice: 1; } &:nth-of-type(3) { background: linear-gradient(to right, #86CB92 0%, transparent 100%), linear-gradient(to right, transparent 0%, #86CB92 100%), linear-gradient(to bottom, #86CB92 0%, transparent 100%), linear-gradient(to bottom, transparent 0%, #86CB92 100%), linear-gradient(to right, #86CB92 0%, #86CB92 100%), linear-gradient(to right, #86CB92 0%, #86CB92 100%); background-size: 70% 3px, 70% 3px, 3px 70%, 3px 70%, 20% 20%, 20% 20%; background-position: 50% 0, 50% 100%, 0 50%, 100% 50%, 5% 5%, 95% 95%; background-repeat: no-repeat; } }
Safari tiene problemas con la transparencia como siempre. Utilice siempre la entrada expandida con border-width border-style , como en el primer ejemplo, en lugar del border: 3px solid transparent corto border: 3px solid transparent .
3. Duplicación parcial de estilos.
Y como estamos hablando de huéspedes, digamos algunas palabras sobre duplicación. También un truco útil. Si un elemento tiene un borde, podemos tomar uno de sus pseudo-elementos ( ::before o ::after ), ponerlo en la parte superior, establecer el mismo tamaño en 100% / 100% y duplicar el borde del elemento principal en su totalidad o en parte.
.overflow-example { border: solid 5px #fff; position: relative; &::after { display: block; content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-bottom: solid 5px #fff; } }
Esto permitirá "rastrear" el contenido a través del borde del elemento:
A menudo se encuentra un efecto similar en las páginas publicitarias, por lo que definitivamente vale la pena ponerlo en servicio.
Recuerde agregar pointer-events: none todos los elementos que se superponen al contenido.
4. Contenido sacado de contexto
Escalar un elemento más allá de los límites del padre nos lleva a otro artilugio: sacar el elemento de contexto. Todos los diseñadores de diseño conocen la propiedad del z-index , pero pocas personas lo recuerdan cuando se trata de emparedados multicapa de los efectos. Como resultado, esto lleva a un marcado innecesariamente complicado.
Considera un ejemplo. Necesita hacer el efecto de una linterna (algo como iluminar el fondo y los bordes de los elementos dentro de un cierto radio del cursor). ¿Cómo abordar este problema?
Supongamos que ya tenemos un marcado:
<div class='custom-grid'> <div class='item'> <div class='text'>Lorem ipsum dolor sit amet</div> </div> <div class='item'> <div class='text'>Lorem ipsum dolor sit amet</div> </div> ...
¿Podemos de alguna manera agregar lo más destacado aquí? Si Y la solución es muy simple:
- Ponemos encima de todo un gran degradado radial con un agujero transparente en el centro
- Usando
z-index el contenido del contexto actual y se coloca automáticamente en la parte superior del gradiente
El gradiente radial en sí no es inusual:
.shadow { position: absolute; left: 50%; top: 50%; height: 200vh; width: 200vw; transform: translateX(-50%) translateY(-50%); background: radial-gradient(circle at center, transparent 0%, transparent 5%, #302015 70%, #302015 100%); }
En tales efectos, unidos al mouse, a menudo usan tamaños de 200vh / 200vw para que sus bordes no se arrastren en el área visible para el usuario.
El resultado fue un sandwich. Las fronteras permanecieron debajo, en el medio había un gradiente, desde arriba todo estaba cubierto de contenido. Incluso en el marcado existente, este efecto se agregará con solo un elemento y un par de líneas de CSS. Por supuesto que hay excepciones, pero aún así. Solo resta revivir el efecto atándolo al mouse:
const grid = document.getElementById('js-grid'); const shadow = grid.querySelector('.shadow'); document.addEventListener('mousemove', (e) => { const rect = grid.getBoundingClientRect(); window.requestAnimationFrame(() => { shadow.style.left = `${e.clientX - rect.left}px`; shadow.style.top = `${e.clientY - rect.top}px`; }); });
Una técnica similar también se puede aplicar con ventanas o menús modales, bloqueando todo lo demás con una hermosa sombra.
5. Sandwich de SVG y HTML
Sandwiches Hmm ... hay uno más. Muy útil Él resuelve el siguiente problema: si tenemos algún tipo de diagrama, mapa, gráfico u otra cosa en forma de una imagen SVG insertada en el marcado, entonces con el cambio de tamaño adaptativo comienza a disminuir o aumentar los textos en él. Esto no solo puede conducir a su "desenfoque" y distorsión de las proporciones, sino que también elimina este esquema o gráfico del estilo general de la página.
Para solucionar esto, puede colocar un div regular encima de SVG en el que colocar todas estas etiquetas con posicionamiento absoluto.
.mixed-graph { > .svg { .... } > .dots { position: absolute; z-index: 1; } }
Es conveniente hacer viewbox='0 0 100 100' inmediatamente en la imagen para que las coordenadas del posicionamiento absoluto en la capa HTML coincidan con ellas en la capa SVG.
Por lo tanto, podemos hacer un gráfico condicional en el que todas las inscripciones serán las mismas que en el resto de la página. En combinación con la tipografía adaptativa, esto puede producir resultados muy agradables.
En lugar de una conclusión
Los tipos de principiantes, estudian y utilizan todas las oportunidades que le brindan sus herramientas. El mundo esta cambiando. Muchos complementos pesados de jQuery ahora son fáciles de reemplazar con un par de líneas de CSS, y las características de diseño de página no coinciden con lo que eran a principios de la década de 2000. Es hora de cambiar la percepción del mundo del desarrollo web, aceptar el hecho de que el "diseño" se está convirtiendo en un área de actividad cada vez más amplia y comenzar a crear sitios modernos sin tener en cuenta los estereotipos y limitaciones del pasado.