Hay un montón de snippets CSS que los desarrolladores web utilizan para lograr ciertos resultados, y luego hay ciertos truquillos de CSS que se pueden aplicar para cosas como la alineación de contenido verticalmente. Al ser CSS una entidad en constante evolución, una y otra vez tropezamos con trucos de CSS frescos que son divertidos y que deberíamos conocer. En el artículo de hoy, te mostramos 10 de esos trucos CSS que te sorprenderán por lo fabulosos que son.
Escribir verticalmente
Hay un atributo de CSS llamado writing-mode que acepta uno de estos tres valores: horizontal-tb, vertical-lr y vertical-lr. horizontal-tb es el valor por defecto y hace que el texto se muestre como lo leemos habitualmente, es decir, de izquierda a derecha. Los valores vertical- *, sin embargo, son para mostrar el texto en un bloque vertical, haciendo que el texto se reproduzca de arriba a abajo en los navegadores. En vertical-rl, se añaden nuevas líneas a la izquierda si seguimos escribiendo y viceversa para vertical-lr.
Esto es muy útil para la visualización de idiomas como el japonés que, normalmente, se suele escribir de arriba a abajo y también para cuando se desea mostrar texto de manera vertical para ahorrar espacio horizontal, como en los encabezados de una tabla, tal y como te mostramos en el Codepen de a continuación.
Nota: Si deseas controlar la dirección de las letras individualmente, puedes utilizar text-orientation.
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
Reusar color
El valor currentcolor coge el valor del atributo color y puede ser usado en otros atributos que aceptan valores de color como por ejemplo background.
div{
background: linear-gradient(90deg, currentColor 50%, black 50%);
...
color: #FFD700;
/* currentColor es #FFD700 */
}
Mezclar fondos
Un elemento puede tener más de un fondo (un background color y múltiples background images). El background-blend-mode los mezcla todos ellos para generar un modo nuevo, que se denomina blend mode. Hay un total de 16 blend modes por el momento.
background-blend-mode: difference;
Mezclar elementos
mix-blend-mode mezcla los contenidos y los fondos para solapar elementos. Chrome no parece soportar todos estos modos, pero navegadores como Firefox si.
mix-blend-mode: color;
He cogido dos elementos, un img para mostrar la imagen de una rosa y un span con un gráfico de fondo. Los mezclo, tal y como puedes ver en la demo de abajo, y se les aplica un mix-blend-mode.
Decorar split boxes
Normalmente, cuando una caja se divide (como cuando se rompe un elemento en línea), los bordes de las partes divididas están desprovistos de cualquier estilo de la caja. Para evitar eso, puedes utilizar box-decoration-break:clone.
Nota: A pesar de que el moderno IE soporta box-decoration-break, el borde de la parte dividida la representación no es suave y el fondo parece hecho rodajas. Pero sí que rinde bien box-shadow, por eso usé sombras en la caja caja tanto para en el borde como en el fondo. También hay una ausencia de padding horizontal en los bordes de IE que puedes utilizar para rellenar con espacios.
Collapsar elementos de una tabla
visibility: collapse es un atributo creado para el control de elementos de las tablas, como filas y columnas. Si se utiliza en cualquier otro elemento se comportará como visibility:hidden. Chrome lo trata como hidden también para elementos de tabla. Al asignar la visibility:collapse en un elemento de la tabla, se oculta y su espacio es rellenado por el contenido cercano. A diferencia del display:none, que modifica la disposición de la tabla después de quitar el espacio, el diseño sigue siendo el mismo con visibility:collapse. Puedes ver cómo funciona en más detalle aquí:
Crear columnas
Puedes crear el diseño de una columna para tus contenidos utilizando el atributo columns. Te permite especificar el número de columnas (column-count) y cuánto tienen de ancho (column-width) para ser mostradas en un tus propios proyectos. Si el contenido no es de texto, como por ejemplo una imagen, tienes que tener en cuenta su anchura para que no se descuadre en la columna. Para el siguiente ejemplo, sólo he usado column-count para especificar el número de columnas que quiero mostrar.
-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
Hacer elementos adaptables
Un elemento puede hacerse adaptable (verticalmente, horizontalmente o ambas) con el atributo resize de CSS3. La adaptabilidad en un textarea puede ser desabilitada usando lo mismo.
resize: vertical; resize: horizontal; resize: both; resize: none;
See the Pen CSS Resize by Preethi (@rpsthecoder) on CodePen.
Crear patrones
Puedes tener varios gradientes en CSS3 (tanto lineales como radiales) para un solo elemento y pueden ser apilados unos sobre otros para crear patrones. Esto nos permite crear fondos agradables para elementos sin usar imágenes externas. Hacer que funcione es un poco más complicado, pero hacerse se puede hacer.
Estos han sido los 9 trucos de CSS que seguramente has pasado por alto. Esperamos que te hayan gustado y sepas aplicarlo al diseño de tus futuros proyectos. ¿Cuál de estos trucos te ha gustado más?