Contenido
- 01. Haga coincidir las imágenes con los esquemas de color del sitio
- 02. Comparta el espacio de manera uniforme en la última fila de una cuadrícula
- 03. Crea animaciones de partículas con box-shadow
- 04. Animar poliedros con transformaciones
- 05. Master ’calc ()’ para posicionamiento
- 06. Haz que el modelo de caja sea cuerdo con "tamaño de caja"
- 07. Centrar verticalmente con CSS
- 08. Apunta a un banco de objetos relacionados
- 09. Control de separación por sílabas
- 10. Aprovecha los modos de escritura
- 11. Usa degradados de formas inusuales
- 12. Utilice la combinación de cadenas en los enlaces
- 13.Haz que FOUT trabaje para ti
- 14. Explore SVG para obtener fondos
- 15. Enfoque a los usuarios con transiciones 3D
- 16. Crea menús circulares con CSS y matemáticas.
- 17. Animar enlaces al desplazar el cursor
- 18.Realice animaciones de fotogramas clave simples
- 19. Crea efectos 3D flotantes con sombras
- 20. Actualice los elementos de la página con ": target"
- 21. Proporciona comentarios con animaciones sutiles.
- 22. Prepárate para "will-animate"
- 23. Humanizar los campos de entrada
- 24. Pausar y reproducir animaciones CSS
- 25. No use variables CSS
En algún momento, con cualquier tecnología, existe la sensación de que se ha hecho prácticamente todo lo que se puede hacer. Cuando algo ya no es tan nuevo y brillante, el interés se desvanece y la atención se centra en la próxima gran cosa. Este ha sido el caso a menudo en la industria web, que es propensa a emocionarse terriblemente por cierto aspecto de la tecnología antes, tarde o temprano, de relegarla a lo mundano.
Cuando apareció CSS por primera vez, fue revolucionario y, con el tiempo, ha evolucionado para permitir a los diseñadores crear diseños de páginas web flexibles, bien elaborados y hermosos. Últimamente, sin embargo, ha habido sugerencias de varios sectores de que CSS está cansado y quizás su tiempo en el sol se ha ido.
Quiero mostrar que todavía hay mucha emoción y vida en el mundo de CSS, ya sea en propiedades de vanguardia que quizás aún no haya explorado, o mediante el uso de un aspecto de CSS de una manera que no había considerado anteriormente.
A continuación, se incluyen algunos consejos de algunos de los principales expertos en CSS de la industria.
(Nota: Algunas técnicas de esta función son de vanguardia y es posible que no sean totalmente compatibles con todos los navegadores. Pruebe a fondo y asegúrese de que existan alternativas antes de realizar cualquier trabajo).
01. Haga coincidir las imágenes con los esquemas de color del sitio
Christopher Schmitt, organizador de la conferencia
Las conferencias tienen sus propios esquemas de color y, con muchos oradores, el flujo de trabajo para administrar retratos puede ser complejo. La aplicación manual de filtros no se escala y depende de que tenga acceso, por ejemplo, a una acción específica de Photoshop. Ahora uso PNG en escala de grises de alta resolución y agrego tonos usando filtros CSS. Esto me permite hacer coincidir cualquier retrato con el esquema de un evento y también reutilizar imágenes en varios temas. Solo necesito una nueva regla CSS para cada uno. Vea una demostración.
02. Comparta el espacio de manera uniforme en la última fila de una cuadrícula
Stephen Hay, diseñador y autor
Si tiene una cantidad desconocida de elementos para mostrar en una cuadrícula, puede usar Flexbox para dividir la última fila de manera uniforme. Entonces, si solo hay un elemento, ocupará toda la fila; si hay dos elementos, la fila se dividirá por la mitad y así sucesivamente. Vea una demostración.
03. Crea animaciones de partículas con box-shadow
Ana Tudor, codificadora y fanática de las matemáticas
Mezclando sombra de la caja con algunas matemáticas y Sass, puedes graficar curvas en 2D, emular el movimiento en 3D y crear animaciones de partículas locas que todos confundirán con las de lienzo. Vea una demostración y otra.
04. Animar poliedros con transformaciones
Ana Tudor, codificadora y fanática de las matemáticas
Probablemente haya visto polígonos CSS puros creados con bordes, pero tenemos una herramienta mucho más poderosa en el transformar propiedad. Encadenar y aplicar transformaciones en elementos anidados nos permite crear polígonos complejos con fondos o bordes de imágenes e interiores transparentes. Usando transformaciones 3D, podemos combinar estas formas 2D en poliedros y hacer que los sólidos se fusionen, desplieguen, exploten o recombinen de una manera fácilmente confundible con WebGL. Vea una demostración.
05. Master ’calc ()’ para posicionamiento
Ana Tudor, codificadora y fanática de las matemáticas
me gustó calc () desde el momento en que lo descubrí. Es útil para domar márgenes, relleno o dimensiones, y puede ser un salvavidas cuando se usa para colocar o cambiar el tamaño de fondos, degradados interiores o transformaciones, y se combina no solo con las mismas unidades antiguas, sino también con las nuevas y geniales ventanas gráficas.
06. Haz que el modelo de caja sea cuerdo con "tamaño de caja"
Sawyer Hollenshead, desarrollador y diseñador de Oak Studios
Usar tamaño de caja para salvar tu cordura. Sin él, un elemento con un ancho definido de 250 px y 25 px de relleno se combina con un ancho de 300 px, lo que dificulta la mezcla de píxeles y porcentajes. Con tamaño de caja:cuadro de borde los bordes y el relleno se colocan en cambio dentro del ancho definido.
07. Centrar verticalmente con CSS
Trent Walton, fundador de Paravel
Históricamente, ha sido difícil centrar algo verticalmente con CSS, por ejemplo, si tiene una imagen con texto adyacente que desea alinear verticalmente. En lugar de pisotear y maldecir, use Flexbox para lidiar con los problemas de alineación. Vea una demostración.
08. Apunta a un banco de objetos relacionados
Jonathan Smiley, socio de Zurb y líder de diseño
Reduzca el grosor de la línea CSS mediante el uso de selectores de atributos aproximados en los nombres de las clases, para apuntar a un gran banco de objetos relacionados, en lugar de adjuntar atributos comunes a cada clase. Por ejemplo ... [class * = "- block-grid-"] {} ... apuntaría a los gustos de: .small-block-grid-3 .large-block-grid-5
09. Control de separación por sílabas
Savid Storey, defensor de la web abierta
La partición de palabras se da por sentada en la impresión, y algunos desarrolladores utilizan la guiones propiedad en línea, pero pocos conocen otras propiedades que brinden un control más preciso. Si no tiene cuidado, obtendrá escaleras de separación de sílabas en las que se utilizan guiones en varias líneas. Una regla general es no más de dos seguidos, que puedes controlar usando guiones-limites-lineas. También, caracteres-límite-guión le permite especificar la longitud mínima de una palabra que se dividirá con guiones, junto con el número mínimo de caracteres antes y después del salto de guión.
10. Aprovecha los modos de escritura
David Storey, defensor de la web abierta
Los modos de escritura le permiten definir la dirección en la que fluye el texto. Parte del texto de Asia oriental se escribe verticalmente, las líneas crecen de derecha a izquierda, especificadas con modo de escritura: vertical-rl (tb-rl en IE). El texto vertical no se usa realmente en los sistemas de escritura europeos, pero puede ser útil para los títulos de las tablas cuando tienes un espacio horizontal limitado.
11. Usa degradados de formas inusuales
Ruth John, diseñadora
Los degradados de fondo pueden verse muy bien cuando se usan con bordes y viñetas. Yo uso tanto en mi blog como con un preprocesador puedo llamar a un mixin con el código reutilizado, para no repetirlo manualmente. No te vuelvas súper loco porque los degradados pueden ser demasiado pesados para el procesador. Mezcla de SCSS para viñetas de lista:
@mixin gradedBullet ($ color) {background-image: linear-gradient (izquierda, aclarar ($ color, 15%) 10px, $ color 11px, $ color 20px, oscurecer ($ color, 15%) 21px, oscurecer ($ color) , 15%) 30px, 31px transparente); }
12. Utilice la combinación de cadenas en los enlaces
Ruth John, diseñadora
En mi blog, he usado selectores de atributos CSS con coincidencia de cadenas para diseñar iconos sociales. Estos aparecen a lo largo de mi blog, a veces con texto y otras sin, pero siempre con un icono. Para diseñar el enlace correcto con el icono social correcto, utilizo una coincidencia de cadena en el href atributo del elemento de anclaje. yo suelo *= entonces el href en el elemento de anclaje solo tiene que contener la cadena que especifico.
/ * para todos los enlaces sociales * / .social a: before {display: inline-block; padding-right: 30px; font-family: ’FontAwesome’;} / * Cada enlace específico * / .social a [href * = "twitter"]: before {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: antes de {contenido: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: antes de {content: " f09e"; color: # b47742;}
13.Haz que FOUT trabaje para ti
Jason Pamental, director de H + W Design
La web se basa en la premisa de que debe ofrecer contenido, incluso si el navegador no puede mostrar el brillo. Las fuentes web de carga lenta pueden ser frustrantes, FOUT (Flash Of Unstyled Text) discordante a medida que la navegación y el texto se reajustan mientras se descargan las fuentes. Google y Typekit proporcionan una respuesta: el cargador de fuentes web. Al inyectar clases en una página, según el estado de carga de las fuentes, puede diseñar alternativas con esas clases para mantener el reflujo al mínimo y también erradicar el síndrome del "contenido invisible" de WebKit. Vea una demostración.
14. Explore SVG para obtener fondos
Emil Björklund, desarrollador web inUse
Los únicos navegadores que ahora no admiten SVG son IE8 y versiones anteriores y Android 2 WebKit, por lo que es factible usar SVG para fondos en CSS, especialmente junto con una solución de respaldo PNG, como Grunticon. SVG se puede diseñar con CSS, y hay un interesante sangrado de propiedades CSS (¡filtros!) De SVG con el que podemos jugar cuando se aplica a HTML.
15. Enfoque a los usuarios con transiciones 3D
Emil Björklund, desarrollador web inUse
Usando transformaciones 3D y haciendo uso de la dimensión z en las interfaces de usuario puede ser realmente útil, especialmente para ocultar / mostrar o contraer / expandir contenido. También es bastante fácil tener una alternativa a una transición 2D, o ninguna transición, en esas situaciones. Es un área en la que una pequeña mejora progresiva puede ser de gran ayuda.
16. Crea menús circulares con CSS y matemáticas.
Sara Soueidan, desarrolladora frontend
Los menús circulares son populares en las aplicaciones móviles, y puede usar transformaciones y transiciones CSS para crear un menú circular simple. Este menú se puede modificar y personalizar para crear un menú de apertura hacia arriba o hacia abajo también. No existe una forma directa en CSS para traducir un elemento en diagonal, pero puede usar el valor del radio del círculo en el que desea colocar los elementos y aplicar una regla matemática simple para calcular los valores de traducción horizontal y vertical para pasar al translateX () y traducirY () funciones. De esa manera, terminas con un diagonal traducción para mover los elementos del menú a las posiciones correctas en el círculo. El evento de clic que cierra / abre el menú se puede manejar usando JavaScript, o puede ir un paso más allá y tener un menú solo de CSS usando un truco de casilla de verificación de CSS. En mi demostración, uso JavaScript y la API classList de HTML5, que no es compatible con todos los navegadores, por lo que deberá ver la demostración en un navegador moderno para que funcione, o descomentar el código jQuery en lugar de usar la API classList código.
Vea una demostración y un tutorial completo. Ejemplo de truco CSS Checkbox.
17. Animar enlaces al desplazar el cursor
Paul Lloyd, diseñador de interacción de The Guardian
No se debe confiar en los estados de desplazamiento para hacer que una acción funcione o para proporcionar información importante, pero aún puede mejorar las interfaces para los usuarios que utilizan el mouse. En 24ways.org, revelamos los títulos de los artículos cuando pasa el cursor sobre los enlaces en la navegación anterior / siguiente. Esto se logró mediante la creación de un ::después pseudoelemento que contiene contenido generado procedente del valor de un datos- atributo, con una transición CSS aplicada para que se deslice a la vista al pasar el mouse. Vea una demostración.
18.Realice animaciones de fotogramas clave simples
Paul Lloyd, diseñador de interacción de The Guardian
En 24ways.org, agregamos aletas de esquina animadas a los resúmenes, que se abrieron al pasar el mouse. Esto se hizo combinando el @keyframes regla con la propiedad animation, alterando la posición de una imagen de fondo para lograr una animación basada en sprites. El truco consiste en declarar la cantidad de fotogramas que tiene en su sprite de animación con el pasos() valor. Vea una demostración.
19. Crea efectos 3D flotantes con sombras
Catherine Farman, desarrolladora de Happy Cog
Un proyecto reciente requería una foto de producto flotante con una sombra redonda debajo, creando un efecto 3D de salirse de la pantalla. La sombra utiliza varias características de CSS3: radio de borde transparencia alfa y sombra de la caja. Funciona bien para cuadrículas de productos, mostrar imágenes en un héroe de la página de inicio o cualquier diseño caprichoso con una inclinación esqueuomórfica. Vea una demostración.
20. Actualice los elementos de la página con ": target"
Simon Madine, desarrollador web senior de HeRe
CSS no es un lenguaje de programación en el sentido habitual, pero aún puede hacer cosas inteligentes sin recurrir a JavaScript. Por ejemplo, el :objetivo La pseudoclase se aplica a los elementos que son el objetivo de un enlace en el que se hace clic.
Puede usar esto para definir el estado de una página, apuntar a un padre que contenga muchos elementos, y sus enlaces se convertirán en un medio para controlar el aspecto y el diseño de todos los hijos con un solo clic. Vea una demostración.
21. Proporciona comentarios con animaciones sutiles.
Neil Renicker, diseñador y desarrollador
Pseudoelementos CSS ::antes de y ::después junto con las transiciones CSS, puede habilitar una animación encantadora que proporciona comentarios sutiles a los usuarios del mouse. Por ejemplo, construya una flecha CSS dentro de un pseudo-elemento, aplique una transición al pseudo-elemento (transición: todas las entradas y salidas fáciles .15s;) y luego agregue un cambio de diseño simple al :flotar pseudo-clase (como enmendar margen superior). Vea una demostración.
22. Prepárate para "will-animate"
Paul Lewis, codificador y miembro del equipo de relaciones con desarrolladores de Chrome
Si ha usado -webkit-transform: translateZ (0) para hacer tus páginas más rápidas mágicamente, el truco, que en muchos navegadores simplemente crea una nueva capa de compositor, está siendo reemplazado por animar. Pronto, podrá decirle al navegador lo que planea cambiar sobre un elemento (su posición, tamaño, contenido o posición de desplazamiento) y el navegador aplicará la optimización adecuada bajo el capó. Más información.
23. Humanizar los campos de entrada
Yaron Schoen, fundador de Made For Humans
Agregar animaciones rápidas a los elementos con los que los usuarios interactúan hace que la interfaz se sienta menos computarizada. Con los campos de entrada, intente poner un llamada de transición dentro, por lo que cada vez que lo enfocas o desenfocas, hay una transición suave.
entrada, área de texto {-moz-transición: todos los 0.2s de salida fácil; -o-transición: todos los 0,2 segundos de salida; -webkit-transición: todos los 0,2 segundos de salida; -ms-transición: todos los 0,2 segundos de salida; transición: todos los 0,2 segundos de salida;
24. Pausar y reproducir animaciones CSS
Val Head, diseñador y consultor
Puede "pausar" y "reproducir" la animación CSS cambiando su estado de juego de animación propiedad. Configurarlo en "pausa" detiene la animación en su lugar, hasta que cambie estado de juego de animación a corriendo, por ejemplo, al pasar el mouse.
.animating_thing {animación: spin 10s linear infinite; estado de reproducción de animación: en pausa; }. animating_thing: hover {animation-play-state: running; }
25. No use variables CSS
Dave Shea, diseñador y autor
Finalmente obtenemos variables CSS, por ejemplo, para escribir el valor hexadecimal de un color una vez y hacer referencia a él a través de una hoja de estilo. Pero la especificación oficial es detallada, agrega complejidad sintáctica, ofrece una funcionalidad decepcionante y, en gran medida, no es compatible con la mayoría de los navegadores. En una era en la que Sass es muy popular y va más allá de las variables con una potente lógica de programación como funciones personalizadas y declaraciones if / else, la especificación oficial se queda corta.
Esperamos que estos consejos importantes hayan renovado su visión de CSS y las posibilidades que representa en el desarrollo y diseño web. No olvide probar cualquiera de estas técnicas a fondo para comprobar la compatibilidad del navegador antes de poner en marcha cualquier trabajo.
Palabras: Craig Grannell Ilustración: Mike Chipperfield
Este artículo apareció originalmente en el número 253 de la revista net.
