25 trucos CSS cover

25 trucos CSS – exprime su capacidad al máximo

Llega un punto en cualquier tecnología en el que piensas que todo lo que se puede hacer, ya está inventado. Cuando una tecnología no es relucientemente nueva, el interés y la atención pasan a la siguiente nueva gran novedad. Cuando CSS apareció por primera vez, era revolucionario, y con el tiempo ha evolucionado para permitir a los diseñadores crear webs atractivas, flexibles y trabajadas al detalle. Pero últimamente se escuchan rumores de que el tiempo del CSS ha pasado. Quiero mostrar que hay todavía mucho movimiento en el mundo del CSS, bien sea con nuevas propiedades que no has explorado, o con aspectos de CSS que no has considerado previamente.

Aquí  te presento 25 trucos CSS:

 

1.- Ajusta las imágenes a la paleta de colores de tu web.

Imagina una web de conferencias, con su propia paleta de colores, y con muchos participantes, cada uno con su foto de perfil. El trabajo de aplicar filtros en Photoshop para escalar todo puede ser complejo, además de que te obliga a tener acceso a específicas acciones de Photoshop. Una solución es usar imágenes .png en tonos de grises y aplicar tonos usando CSS filters. Esto permite ajustar cualquier foto de perfil a la paleta de colores, y además puedo reutilizar las imágenes en múltiples temas. Sólo necesito una nueva regla CSS para cada una. Ejemplo por Christopher Scmitt. 25 trucos CSS

2.- Comparte el espacio equitativamente en la ultima fila de un grid.

Si no conoces el número de objetos que se van a mostrar en un grid, puedes usar Flexbox para repartir la última fila equitativamente.  De esta manera, un sólo objeto ocupará toda la línea, si hay dos cada uno ocupará la mitad, etc. Ejemplo por Stephen Hay.

3.- Crea animaciones de partículas con box-shadow.

Mezclando box-shadow con matemáticas y Sass, puedes crear curvas 2D gráficamente emulando el movimiento 3D y crear partículas animadas que todo el mundo va a confundir con canvas. Ejemplo 1 y Ejemplo 2 por Ana Tudor.

4.- Anima poliedros con transform.

Probablemente hayas visto polígonos hechos con CSS, pero la propiedad transform es una herramienta mucho más poderosa.  Encadenar y aplicar transformaciones en elementos anidados permite crear polígonos complejos con backgrounds o bordes con el interior transparente. Usando 3D transforms, podemos combinar formas 2D para hacer poliedros y hacerlo sólido, deshacerlos, hacerlos explotar y rehacerlos simulando WebGL. Ejemplo por Ana Tudor. Poliedros - 25 trucos CSS

5.- CALC() para posicionar.

La propiedad calc() es útil para domar márgenes, paddings o dimensiones, y puede salvarte cuando lo usas para posicionar o redimensionar backgrounds, dentro de degradados o transformaciones,  y combinarlo no sólo con las antiguas unidades, sino también con el nuevo viewport.

6.- Sanea box model con box-sizing.

Usa box-sizing para conservar tu cordura. Sin él, un elemento con width 250px y 25px de padding, resulta con un ancho de 300px, y hace que mezclar pixeles con porcentajes sea difícil. Con box-sizing:border-box los bordes y el padding se colocan en la anchura definida.

7.- Centrar verticalmente con CSS.

Desde siempre ha sido difícil centrar verticalmente algo con CSS, por ejemplo si tienes una imagen con texto adyacente y quieres centrarlo verticalmente. Ahora puedes usar Flexbox. Ejemplo por Trent Walton.

8.- Selecciona un grupo de objetos relacionados.

Minimiza el tamaño de líneas de CSS usando selectores de nombres de clases seleccionando grupos de objetos relacionados. Por ejemplo: [class*=”-block-grid-“] { } …selecciona: .small-block-grid-3 .large-block-grid-5

9.- Controla los guiones.

Los guiones no se valora en imprenta, y algunos desarrolladores usan la propiedad hypens online, pero pocos son  conscientes de los beneficios que proporciona controlar esta propiedad. Una regla general es no usar más de 2 seguidos, puedes controlarlo usando hyphenate-limit-lines. También, hyphenate-limit-chars permite especificar el tamaño mínimo de una palabra a la que se le va a añadir un guión, además del mínimo de caracteres antes y después de un salto de línea con guión.

10.- Usa degradados de forma inusual.

Los degradados de fondo pueden quedar muy bien combinados con bordes o en listados. En el blog de Ruth John usa ambos. Con un preprocesador puede llamar una mezcla de ambos reusando código, para no repetirlo manualmente.  No abuses porque los degradados puede ser un proceso pesado. SCSS mezclado para el listado:

 

11.- Aprovéchate de los modos de escritura.

Los modos de escritura te permiten definir la dirección en la que un texto fluye. Algún texto en el este de Asia se escribe verticalmente, líneas de derecha a izquierda, usa writing-mode:vertica-rl (tb-rl en IE). El texto vertical no se usa en ningún sistema de escritura europeo, pero puede ser útil para el encabezado de una tabla donde tienes espacio horizontal limitado.

12.- Usa patrones de String en links.

En el blog de Ruth John, usa selectores de atributos CSS con patrones para estilizar los iconos sociales. Aparecen a lo largo del blog, unas veces con texto y otras sin él, pero siempre con un icono. Para estilizar el link correcto con su correspondiente icono, usa un string que coincida en el atributo href del elemento ancla. Usa *= de esta manera el href del elemento ancla sólo tiene que contener el string específico.

 

13.- Haz que FOUT trabaje para ti.

Las webs se construyen con la premisa de que deben mostrar contenido, incluso cuando el navegador no puede renderizar el contenido. Las fuentes web que cargan lentamente pueden ser frustrantes, provocan el fenómeno FOUT (Flash of Unstyled Text)  mientras se descargan. Google y Typekit proponen una solución a este fenómeno: el web-font loader. Inyectando clases en la página, basándose en el estado de carga de la fuente, puedes estilizar el fenómeno. Aquí te dejo una demo y un ejemplo.

14.- Explora SVG para los backgrounds.

Los únicos navegadores sin soporte SVG son IE8 y anteriores, y Android 2 Webkit, por lo que es viable usar SVG para backgrounds en CSS. SVG se puede estilizar en CSS, y hay un interesante abanico de propiedades (filtros) con los que podemos jugar al aplicarlos a HTML.

15.- Capta la atención de los usuarios con Transiciones 3D.

Usar transformaciones 3D y hacer uso de z-dimension en UX puede ser muy llamativo, para esconder/mostrar o contraer/expandir contenido. Es además bastante fácil volver a una transición 2D, o quitar la transición por completo. Es un área donde una mejora progresiva puede dar buenos resultados.

16.- Crea menús circulares con CSS y algo de matemáticas.

Los menús circulares son populares en aplicaciones de móvil, y puedes usar CSS transforms y transitions para crear un menú circular simple. Este menú se puede modificar y personalizar para que se expandan hacia arriba o hacia abajo. No hay una forma directa de expandir diagonalmente, pero puedes usar el valor del radio del círculo donde quieres posicionar los elementos, y aplicar una simple regla matemática para calcular los valores horizontal y vertical que tienes que pasar a las funciones translateX() y translateY().  De esta manera, tendrás una transición diagonal para mover los elementos del menú a la posición correcta del círculo. El evento click que abre/cierra el menú, puede añadirse en JavaScript, o puedes ir un poco más lejos y crear un menú completamente en CSS usando checkbox hack. Demo y tutorial completo con JavaScript vía Sara Soueidan y ejemplo con Checkbox hack.

17.- Animar link con hover.

El estado hover no debería de usarse para proveer información importante o añadir alguna acción, pero puedes mejorar la interfaz para los usuarios de escritorio. En 24ways.org, revelan el título del artículo anterior o siguiente cuando haces hover sobre el link. Esto se consigue creando un pseudo-elemento ::after que contiene el contenido generado por el valor del atributo data-, y aplicando una transición CSS  a modo slider al hover. Demo vía Paul Lloyd. hover css

objeto 3d flotante css18.- Crea efectos 3D flotantes con sombras.

Para crear un objeto flotante añade una sombra redonda por debajo que hace un efecto 3D. La sombra tiene las siguientes características: border-radius alpha transparency y box-shadow. Funciona bien en productos, imágenes, incluso en diseños extravagantes. Demo vía Catherine Farman.

19.- Haz simples animaciones con Keyframe.

De nuevo en 24ways.org, puedes ver esquinas animadas que se abren con hover. Esto funciona combinando la regla @keyframe con la propiedad animation, alterando la posición de la imagen de fondo para lograr la animación. El truco es declarar el número de frames que tienes en tu animación con el valor steps(). Demo vía Paul Lloyd.

20.- Actualiza los elementos de la página con : ‘target’.

CSS no es un lenguaje de programación como tal, aun así puedes hacer cosas inteligentes sin meter mano a JavaScript. Por ejemplo, la pseudo clase :target se aplica a elementos objetivo de link s cliqueados. Puedes usar esto para definir el estado de una página, localizar el contenedor parent de elementos perdidos, y transformar tus links para controlar la visualización de todos los children con un único clic. Demo vía Simon Madine.

21.- Incentiva al usuario con sutiles animaciones.

Las pseudo-elementos CSS ::before y ::after junto con CSS transitions, pueden habilitar una bonita animación que proporciona un sutil feedback a usuarios de escritorio (con ratón). Por ejemplo, construye una flecha CSS con un pseudo-elemento, aplica una transición al pseudo-elemento (transition:all ease-in-out.15s;), y añade un simple cambio de layout a la pseudo clase :hover (como una alteración del margin-top). Demo vía Neil Renicker.

22.- Preparate para ‘will-animate’.

Si has usado -webkit-transform:translateZ(0) para hacer tus web más rápidas mediante un “hack” que en la mayoría de los navegadores crea una nueva capa de composición, esto va a remplazarse por will-animate en breve. Pronto seremos capaces decir al navegador  que es lo que quieres cambiar de un elemento (su posición, tamaño, contenido, o posición de scroll) y el navegados aplicará la optimización necesaria. Aquí te dejo más información.

23.- Humaniza los campos input.

Añadir rápidas animaciones a los elementos con los que el usuario interactúa hace que la interfaz sea menos robótica y más humana. Con los campos input, intenta poner una transition call, de esta manera siempre que enfoques o desenfoques un campo, tendrás una suave transición.

 

24.- Pausa y play en animaciones CSS.

Puedes poner ‘pausa’ y ‘play’ a una animación CSS cambiando su propiedad animation-play-state. Dejandolo en ‘pausa’ la animación se para, hasta que cambies animation-play-state a running, por ejemplo al hacer hover.

 

25.- No uses variables CSS.

Finalmente tenemos variables CSS, por ejemplo escribir un color con su valor hex una vez y usar referencias a él en toda la stylesheet. Pero la especificación oficial es menos interesante de lo que parece, y no la soportan la mayoría de los navegadores. En una era donde Sass es ampliamente popular y va más allá de las variables, con una poderosa lógica de programación como funciones y declaraciones if/else, la especificación oficial se queda corta. Más información sobre las variables.

 

Espero que estos 25 trucos CSS te ayuden a renovar tu punto de vista sobre las posibilidades que CSS representa en el desarrollo y diseño web. No olvides probar estas técnicas en los navegadores (muchas no son compatibles con todos) antes de utilizarlas en tu web.

 

Si te ha gustado, ¡compártelo!
Share on Google+0Tweet about this on TwitterShare on Facebook0Share on LinkedIn0Email this to someone