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.

¿Por qué "solo escribir" es el mejor consejo de escritura que recibirás?

Cuando comencé como escritor profesional, leí todos los recursos que pude obtener sobre el tema. Mientras leía, leía y leía un poco más, noté que un consejo seguía apareciendo: "Si quieres convertirte en escritor, solo escribe".Al principio, pensé, bueno, eso no es muy útil. Obviamente, escribir es lo que hacen los escritores. Además,

(Consejos de tecnología y diseño)

10 Baterías portátiles para su MacBook

Una de las cosas que la MacBook tiene a su favor es su batería bastante sólida, excepto si tiene que estar en movimiento mucho. No es aconsejable dejar su MacBook conectada a una fuente de alimentación durante largos períodos de tiempo, ya que acortará la vida útil de la batería. Pero si siempre viaja con su MacBook, no será fácil encontrar una fuente de alimentación para enchufar, cuando se está quedando sin jugo. Ahí es do

(Consejos de tecnología y diseño)