Share
Escuché que esta cosa de CSS3 es toda la rabia. Los recursos están volando alrededor del mundo de los tutoriales y la blogósfera, proporcionando ejemplos brillantes de nuevas formas creativas de diseño utilizando módulos CSS3. Sin embargo, es fácil de implementar en exceso y perder la brillantez sutil de las excelentes interfaces de usuario. Aquí hay tres consejos rápidos para usar poderosas técnicas CSS3 de maneras sutiles.
Las personas son capaces de percibir y distinguir cambios muy pequeños..
La conclusión aquí es que las personas son capaces de percibir y distinguir los cambios muy pequeños que pueden no notar conscientemente o recordar. Dudo que esta sea información nueva para nadie. Es uno de los conceptos más conocidos presentados por los estudios de la sensación y la percepción. A veces, una cosa puede ser agradable sobre otra. Y a veces, ni siquiera sabes por qué.
Sin embargo, tenga en cuenta que el diseño web es un consciente proceso. El diseño sutil puede ser difícil porque es fácil de pensar "eso solo necesita un poco Más."Antes de que te des cuenta, se pierde la sutileza..
Teniendo esto en cuenta, me gustaría presentar tres técnicas CSS3 que se pueden utilizar para proporcionar diversas formas de sutileza para el diseño web.
La transición es una herramienta poderosa, que proporciona una forma en que CSS puede animarse esencialmente de un punto final a otro. La sintaxis contiene un conjunto de herramientas bastante rico: propiedad, duración y flexibilización. Cada una de estas piezas se puede variar para proporcionar diferentes niveles de sutileza. A menudo, solo hace falta tocar, como suelen hacer los efectos. En otras palabras, jugar con los valores hasta que parece correcto. Simplemente no te vuelvas loco. Es fácil perderse ajustando incluso una lista tan corta de variables.
No es raro que los elementos de navegación cambien de color cuando el mouse se desplaza. La transición puede hacer que el cambio de color sea un poco más suave..
.nav li a color: # 282828; texto-decoración: ninguno; -webkit-transición: color .1s facilidad de entrada-salida; -moz-transición: color .1s eas-in-out; -o-transición: color .1s facilidad de entrada-salida; transición: color .1s facilidad de entrada; .nav li a: hover color: # 808080;
El cambio de color no es sutil aquí. Es claramente notable. Qué es Sutil es el alisado de ese cambio de color..
El truco para mantener esto sutil es la duración. Si es demasiado largo, el efecto será demasiado notable. La navegación puede convertirse rápidamente en una carga pesada para flotar y parecer amateur..
Ver la demo.
En caso de que todavía no haya profundizado en CSS3, es importante tener en cuenta el orden en que aparecen las declaraciones específicas del navegador. En realidad, solo es importante tener en cuenta que la declaración no específica del navegador aparece en último lugar en la lista. CSS toma la última declaración y la hace más importante en caso de conflicto. Una vez que se publique una especificación de transición real, probablemente todos los navegadores implementarán el módulo sin Necesitando el prefijo propietario. Por lo tanto, su CSS se vuelve un tanto listo para el futuro sin costo real para las implementaciones actuales.
Además, tenga en cuenta que las transiciones están en el Estilo del elemento, no su hover. Esto proporcionará la transición tanto con el mouse sobre como con el mouse off.
El selector nth of of type o nth-child permite que los patrones se declaren en una serie de elementos y apliquen estilos en consecuencia. Por ejemplo, en una tabla, nth-child podría colorear cada fila alterna usando: nth-child (impar). Veamos un ejemplo que puede no ser tan claro..
Tomaremos un marcado de navegación bastante estándar ...
... y aplicar un poco de estilo.
.nav li: nth-of-type (impar) margin-top: 5px; .nav li: nth-of-type (even) margin-top: 12px; .nav li: nth-of-type (2n + 2) margin-right: 0; .nav li: nth-of-type (2n + 3) margin-left: 8px; margen derecho: 25px;
Esto creará un menú de aspecto escalonado con algunos elementos altos, algunos elementos bajos y un par de conjuntos que se ven emparejados. La diferencia visual entre esto y un menú en línea es clara.
Entonces, ¿qué es tan sutil al respecto? La sutileza aquí es doble..
Por lo tanto, tal vez un visitante primero ve "Inicio". Ese visitante probablemente se dará cuenta de que ya está en la página de inicio. Él o ella puede ver "Trabajo" a continuación.. *hacer clic*. Después de ver algunas piezas de trabajo, es posible que hayan visto "Blog" a continuación, pero tal vez la agrupación termine siendo más fuerte y su deseo se vea "Acerca de". El diseñador ahora está conduciendo al visitante utilizando un diseño de navegación. Él o ella ha brindado pistas sobre dónde deben ir los visitantes, secuencialmente.
¿Esto sucederá cada vez? Absolutamente no. ¿Ocurrirá a veces? Apostaría así.
Ese es el punto de la sutileza. No influye abrumadoramente en el usuario, pero puede proporcionar algunas sugerencias o motivaciones útiles de vez en cuando.
Aquí hay una manera simple de introducir la sutileza en un diseño. Irónicamente, es probable que tenga la sintaxis más complicada que existe. No solo eso, sino que también tiene sintaxis significativamente diferentes entre los navegadores. Vamos a ver.
Dado un formulario de contacto bastante simple (correo electrónico, mensaje), aquí hay algunos estilos:
entrada de formulario [type = text], form textarea background-image: -webkit-gradient (linear, left bottom, left top, color-stop (0, rgb (255,255,255)), color-stop (1, rgb (248,248,248) )); imagen de fondo: -moz-lineal-gradiente (parte inferior central, rgb (255,255,255) 0%, rgb (248,248,248) 100%); esquema: ninguno; borde: sólido 1px #ccc;
Esa es una declaración bastante completa, ¿no? Y eso solo cubre dos navegadores.!
No voy a entrar todos de la sintaxis, porque otros lo han hecho por mí. Consulte "Comprender los gradientes de CSS" en Nettuts + para una mejor comprensión. Cuando hayas terminado, hablemos de sutileza..
El gradiente en estas áreas de texto es casi imperceptible. Sin embargo, si juegas con el CSS y eliminas la frontera, te aseguro que está ahí..
Si aún no puedes verlo en esa segunda imagen, toma tu cabeza y muévela hacia el lado de tu monitor, de modo que estés viendo el monitor en un ángulo bastante inclinado. ¿Vealo Ahora? Si no, me niego a ser responsabilizado. Lo veo, así que tu monitor debe estar roto. :)
De todos modos, observe cuán cerca están los colores rgb en el css. La parte superior de la entrada de texto y el área de texto están sombreadas muy ligeramente. Este es un ejemplo de la sutileza extrema. Al completar un formulario, es poco probable que alguien se percate de este gradiente. Sin embargo, las personas pueden encontrar su forma un poco más atractiva que otras; incluso si no saben por qué.
Bueno, hemos casi Lo hizo a través de un artículo completo de CSS3 sin discutir los problemas del navegador. ¿Cómo logramos eso? Por un lado, no había mucho énfasis en el código. Más importante, sin embargo, estaba guardando lo mejor para el final.
Si echa un vistazo a la demostración de este tutorial en un navegador webkit, luego la compara con un navegador Firefox, notará algunas diferencias. Si pasas a IE, notarás aún más diferencias. Una cosa buena sobre el uso de la sutileza es que si la diferencia sutil no existe, la gente probablemente no lo notará. En otras palabras, el cambio de color en el primer ejemplo todavía funciona sin la transición; Es solo un poco menos resbaladizo. Si el único propósito de usar nth-of-type fue agrupar en función de las características comunes, a ningún visitante le va a importar si esa agrupación no existe. El menú todavía funciona. ¿Y el gradiente? Recuerda lo duro que has tenido que intentar notarlo. Incluso cuando le dijeron exactamente dónde estaba?
Conviértalo en una oportunidad para la creatividad, en lugar de una carga insuperable..
Probablemente la oposición más racional a los "diferentes aspectos de los distintos navegadores" para el diseño web es que muchos (quizás más) los clientes querrán exacto mismo sitio web en cualquier navegador principal. Si no hay espacio para abordar esto y necesita pagar su factura de electricidad, haga lo que sea necesario para obtener esa esquina redondeada tan importante en todas las versiones de IE hasta el principio de los tiempos.
Sin embargo, algunos clientes pueden ser educados y balanceados en cuanto a algunas ventajas de tener un diseño en un lugar y otro en otro lugar. Por ejemplo, aceptar una apariencia ligeramente diferente puede reducir drásticamente las solicitudes HTTP y el exceso de elementos HTML, si se utilizan muchas imágenes para crear bordes y sombras y todo eso. O, si eres como yo, tienes algunos proyectos personales y disfrutas de un buen desafío (como proporcionar el mismo navegador de "experiencia" sin tener siempre el mismo diseño). O quizás tenga dos diseños diferentes que realmente le gusten y no pueda decidir cuál implementar. Aquí hay una oportunidad de implementar uno en un navegador y el otro en otro, expulsado de una sola hoja de estilo.
El punto general aquí es que la incompatibilidad del navegador es una hecho de la web actual al intentar utilizar CSS3. Entonces, conviértalo en una oportunidad para la creatividad, en lugar de una carga insuperable..
La sutileza aquí no es exactamente una diseño sutileza. En cambio, es más de un diseñador sutileza. En mi experiencia, la mayoría de las personas solo usan un navegador. Los profesionales de la web olvidan que a veces, al instalar tres versiones de cinco navegadores diferentes en cada máquina con la que nos encontramos.
Por lo tanto, si un usuario solo de IE pasa a través de su sitio y su contenido es claro y él o ella disfrutan de la experiencia, usted ha tenido éxito en su diseño. Si otro usuario pasa a través de su sitio en Chrome y disfruta de su experiencia y el contenido es claro, usted ha tenido éxito en su diseño. Y tal vez ese visitante apreciaba algunas cosas extra. Prestigio. Sin embargo, lo más importante es que si alguna vez tienes la oportunidad de sentarte y ver cómo sucede esto simultáneamente, habrás logrado divertirte sutilmente..
Accentsconagua