10 (Más) trucos de CSS que probablemente pasó por alto
Hay muchos fragmentos de CSS que los desarrolladores web pueden usar para lograr ciertos resultados, y luego hay trucos de CSS que puede usar para cosas como alinear el contenido verticalmente. Con CSS siendo una entidad en constante evolución, una y otra vez nos topamos con divertidos trucos de CSS que son divertidos de conocer.
En la publicación de hoy, te presento 10 atributos y trucos más de CSS que quizás no conozcas .
1. Escribir verticalmente
Hay un atributo de CSS llamado writing-mode
que acepta uno de estos tres valores; horizontal-tb
, vertical-rl
y vertical-lr
.
horizontal-tb
es el valor predeterminado y causa el típico flujo de texto horizontal de izquierda a derecha en un elemento.
Sin embargo, los valores vertical-*
son para el flujo de bloques verticales, lo que provoca que los navegadores escriban 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 mostrar idiomas como el chino y el japonés que normalmente se escriben de arriba a abajo y también para cuando desea mostrar el texto verticalmente para ahorrar espacio horizontal, como en los encabezados de la tabla.
Nota: Si desea controlar las direcciones de las letras individuales, puede usar la orientación del texto para girarlas hacia arriba o hacia los lados, según lo desee.
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; modo de escritura: vertical-rl;
2. Reutilizar el valor del color
La palabra clave currentColor
lleva el valor del atributo de color
y se puede usar en otros atributos que aceptan valores de color como background
.
div {background: linear-gradient (90deg, currentColor 50%, black 50%); ... color: # FFD700; / * currentColor es # FFD700 * /}
3. Mezcla de fondos
Un elemento puede tener más de un fondo (un color de fondo y múltiples imágenes de fondo). El background-blend-mode
mezcla de background-blend-mode
todos juntos según el modo de fusión dado. Hay un total de 16 modos de fusión en este momento.
background-blend-mode: diferencia;
4. Mezcle elementos
mix-blend-mode combina los contenidos y fondos de elementos superpuestos. Chrome no parece ser compatible con todos los modos, aunque Firefox sí.
mix-blend-mode: color;
Tomé dos elementos, un img
mostraba la imagen de una rosa y un span
con un fondo gráfico, los apilé y apliqué algunos modos de combinación de mezcla.
5. Ignorar eventos del puntero
Puede hacer que un elemento no tenga en cuenta ningún evento de puntero utilizando un solo atributo llamado pointer-events
. Al dar a pointer-events
el valor de none
en un elemento, esto evita que sea un objetivo para los eventos de puntero. Soporte IE11 + incluido.
En la siguiente demostración, hay una casilla de verificación debajo de dos imágenes apiladas una encima de la otra. Ambas imágenes llevan pointer-events: none
, lo que nos permite hacer clic en la casilla de verificación enterrada debajo de ellos. Según el estado verificado de la casilla de verificación, la imagen deseada se muestra mientras que la otra oculta.
6. Decorar cajas divididas
Normalmente, cuando una caja se divide (como cuando un elemento en línea es testigo de saltos de línea), los bordes de las partes de división carecen de estilos de caja y se ven cortados. Para evitar eso, puede usar box-decoration-break:clone
.
Ahora, para continuar con un ejemplo y un recordatorio temprano de "Navidad en el horizonte", ¡aquí hay una lista de renos de Santa todos escritos en un solo span
! ¡Ho! ¡Ho! ¡Ho!
Nota : A pesar de que el IE moderno es compatible con el box-decoration-break
, en el borde del borde de la porción dividida, el renderizado no es uniforme y el fondo se ve cortado. Pero sí da una buena box-shadow
, por eso utilicé sombras de caja tanto para el borde como para el fondo. También hay una ausencia de relleno horizontal en los bordes en IE que puede querer llenar con espacios.
7. Contraer elementos de la tabla
visibility: collapse
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 visibility: hidden
. Sin embargo, Chrome lo trata como hidden
incluso para los elementos de la tabla.
Cuando se asigna visibility: collapse
en un elemento de la tabla, se oculta y su espacio se llena con el contenido cercano, por ejemplo, cómo se comportaría al usar la display:none
lugar.
Pero a diferencia de display:none
que modifica el diseño de la tabla después de eliminar el espacio, el diseño sigue siendo el mismo en visibility:collapse
. Puedes ver cómo funciona en más detalle aquí.
8. Crea Columnas
Puede crear un diseño de columna para sus contenidos utilizando el atributo de columns
. Le permite especificar cuántas columnas ( column-count
columnas) y cómo debe representarse cada ancho de column-width
(ancho de column-width
) en un elemento.
Si el contenido no es texto, como por ejemplo una imagen, entonces tendrá que tener en cuenta su ancho respectivo a la columna. Para el siguiente ejemplo, solo utilicé column-count
de columnas para especificar cuántas columnas quiero.
-webkit-column-count: 2; -moz-column-count: 2; conteo de columnas: 2;
9. Hacer elementos redimensionables
Un elemento se puede cambiar de tamaño (vertical, horizontal o ambos) con el resize
atributo CSS3. La capacidad de cambio de tamaño en un área de textarea
se puede desactivar utilizando el mismo.
cambiar el tamaño: vertical; cambiar el tamaño: horizontal; cambiar el tamaño: ambos; cambiar el tamaño: ninguno;
10. Crea patrones
Puede haber múltiples gradientes de CSS3 (tanto lineales como radiales) para un solo elemento y se pueden apilar unos sobre otros para crear patrones. Esto nos permite crear buenos fondos para los elementos sin usar imágenes externas . Hacerlo funcionar podría requerir un poco de práctica.
Un vistazo a: Creación de consultas personalizadas de WordPress
Hoy, vamos a echar un vistazo a WordPress Query . A pesar de que WordPress ha documentado su función de consulta, es muy intimidante y probablemente impráctico sumergirse en cada una de las secciones. Este es el atajo que necesitas.En este post vamos a discutir algunos consejos prácticos sobre la aplicación de WordPress Query que es posible que necesite utilizar con frecuencia en su tema.WP_
Wemogee: aplicación de chat basada exclusivamente en Emojis
Otra aplicación de chat se ha puesto a disposición para su descarga, pero a diferencia de la mayoría de las aplicaciones de chat habituales, esta en particular pone a los emojis en primer plano.Desarrollado por la rama italiana de Samsung, Wemogee es una aplicación de chat creada para ayudar a las personas con afasia a comunicarse . ¿Q