10 (más) trucos CSS que probablemente pasaste por alto
Hay muchos fragmentos de código CSS que los desarrolladores web pueden usar para lograr ciertos resultados, y luego hay trucos CSS que puede usar para cosas como alinear el contenido verticalmente. Dado que CSS es una entidad en constante evolución, una y otra vez nos topamos con geniales trucos CSS que son divertidos de conocer..
En el post de hoy, os presento a 10 más atributos y trucos CSS que quizás no conozcas.
1. Escribe verticalmente
Hay un atributo CSS llamado modo de escritura que acepta uno de estos tres valores; horizontal-tb, vertical-rl y vertical-lr.
horizontal-tb es el valor predeterminado y provoca el flujo de texto horizontal típico de izquierda a derecha en un elemento.
los vertical-* sin embargo, los valores son para el flujo de bloque vertical, lo que hace que los navegadores escriban el texto de arriba a abajo. En vertical-rl, Se agregan nuevas líneas a la izquierda de las anteriores y viceversa para vertical-lr.
Esto es útil para mostrando idiomas como el chino y el japonés que normalmente se escriben de arriba a abajo y también para cuando desea mostrar texto verticalmente para ahorrar espacio horizontal, como en los encabezados de tablas.
Nota: Si desea controlar direcciones de letras individuales, puede usar la orientación del texto girándolas hacia arriba o hacia los lados, según lo desee.
-webkit-modo-escritura: vertical-rl; -ms-modo-escritura: tb-rl; modo de escritura: vertical-rl;
2. Reutilizar el valor del color
La palabra clave color actual lleva el valor de color atributo y se puede utilizar en otros atributos que aceptan valores de color como fondo.
div background: linear-gradient (90deg, currentColor 50%, black 50%);… color: # FFD700; / * currentColor es # FFD700 * /
3. Fondos de mezcla
Un elemento puede tener más de un fondo (un color de fondo y varias imágenes de fondo). los modo de mezcla de fondo los mezcla todos juntos según el modo de fusión dado. Hay un total de 16 modos de mezcla en este momento..
modo de mezcla de fondo: diferencia;
4. Mezclar elementos
el modo mezcla-mezcla combina los contenidos y los fondos de elementos superpuestos. Chrome no parece admitir todos los modos a pesar de que Firefox sí lo hace.
mezcla-modo-mezcla: color;
Tomé dos elementos, un img mostrando la imagen de una rosa y una lapso Con un fondo gráfico, apílelos y aplique algunos modos de mezcla y mezcla..
5. Ignorar eventos puntero
Puede hacer que un elemento sea ajeno a cualquier evento de puntero utilizando un único atributo llamado eventos punteros. Al dar eventos punteros El valor de ninguna en un elemento, esto evita que sea un destino para apuntar eventos. IE11 + soporte incluido.
En la siguiente demostración, hay una casilla de verificación debajo de dos imágenes apiladas una encima de la otra. Ambas imagenes llevan punteros-eventos: ninguno, Permitiéndonos hacer clic en la casilla de verificación enterrada debajo de ellos. En función del estado marcado de la casilla de verificación, la imagen deseada se muestra mientras la otra oculta.
6. Decorar cajas divididas
Por lo general, cuando un cuadro se divide (como cuando un elemento en línea es testigo de saltos de línea), los bordes de las partes divididas carecen de estilos de cuadro y se ven cortados. Para evitar eso, puedes usar caja-decoración-break: clon.
Ahora para continuar con un ejemplo y un recordatorio temprano de "Navidad en el horizonte", aquí hay una lista de los renos de Papá Noel todos escritos en un solo lapso! ¡Ho! ¡Ho! Ho!
Nota: A pesar de que el IE moderno soporta caja-decoración-break, en el borde del borde de la parte dividida, la representación no es suave y el fondo se ve cortado. Pero se rinde sombra de la caja muy bien, por eso utilicé sombras de cuadro tanto para el borde como para el fondo. También hay una ausencia de relleno horizontal en los bordes en IE que es posible que desee rellenar con espacios.
7. Contraer elementos de la tabla
visibilidad: colapso es un atributo creado solo para los elementos de la tabla, como filas y columnas. Si se usa en cualquier otra cosa, se comportará como visibilidad: oculta. Chrome aunque lo trata como oculto incluso para elementos de mesa.
Cuando usted asigna visibilidad: colapso en un elemento de la tabla, está oculto y su espacio está ocupado por el contenido cercano, como por ejemplo cómo se comportaría al usar pantalla: ninguna en lugar.
Pero a diferencia pantalla: ninguna que modifica el diseño de la tabla después de eliminar el espacio, el diseño sigue siendo el mismo en visibilidad: colapso. Puedes ver cómo funciona con más detalle aquí..
8. Crear columnas
Puede crear un diseño de columna para sus contenidos utilizando la columnas atributo. Te permite especificar cuántas columnas (recuento de columnas) y cómo cada ancho de columna (ancho de columna) deben ser renderizados en un elemento.
Si el contenido no es texto, como por ejemplo una imagen, deberá tener en cuenta el ancho correspondiente a la columna. Para el siguiente ejemplo, solo utilicé recuento de columnas para especificar cuántas columnas quiero.
-webkit-column-count: 2; -mez-columna-cuenta: 2; recuento de columnas: 2;
9. Hacer que los elementos sean resizables
Un elemento puede ser redimensionable (verticalmente, horizontalmente o ambos) con el atributo CSS3 redimensionar . La capacidad de cambio en un textarea Se puede desactivar usando el mismo..
redimensionar: vertical; redimensionar: horizontal; redimensionar: ambos; redimensionar: ninguno;
10. Crea Patrones
Puede haber múltiples gradientes CSS3 (tanto lineal como radial) para un solo elemento y se pueden apilar entre sí para crear patrones. Esto nos permite Crea bonitos fondos para elementos sin usar imágenes externas. Sin embargo, hacer que funcione podría requerir un poco de práctica..
