En ocasiones, ser un desarrollador web se torna mucho más difícil de lo normal debido a que una parte muy particular del código entorpece y ralentiza por consiguiente el flujo de trabajo, reduciendo la calidad del mismo, transcurriendo noches enteras sin dormir, con la sola compañía de libros, pizza y una buena taza de café.
La razón: con un número de problemas de incompatibilidad y el entorpecimiento de nuestro motor creativo, muchas veces nos toma mucho tiempo encontrar el problema de nuestro código, aún cuando lo tenemos en frente de nuestras narices; ese es el momento en que nos viene como anillo al dedo soluciones desarrolladas por otros diseñadores cuya eficiencia está más que probada.
En este post te presento 50 técnicas CSS, ideas y soluciones probadas para un código efectivo. Definitivamente conocerás algunas, seguramente (me atrevo a afirmar) otras no. ¿Se nos escapó algo? ¿Crees que faltó mencionar alguna? Déjanos saber en los comentarios de este post.
Pienso que antes de seguir debo darle las gracias a los desarrolladores que han contribuido al diseño basado en CSS (conozco a más de uno), en serio, la comunidad aprecia en demasía sus aportes.
Técnicas CSS
1. Fondo tridimensional con CSS
El sitio web de Silverback usa 3 imágenes de fondo para crear una ilusión 3D con un uso simple de CSS. No se provee ninguna documentación al respecto, no obstante con solo mirar el código fuente, sabremos lo intuitivo que es, y sabremos además que no es tan complicado el procedimiento.
2. Uso creativo de la transparencia PNG en el Diseño Web
Desde hace algún tiempo, con el soporte de archives PNG por parte de Microsoft Internet Explorer (ya era hora) y algún que otro truco JavaScript-CSS, podemos hacer uso de imágenes PNG para mejorar nuestro vocabulario de diseño.
6. Estilizando la entrada de archivos con CSS y DOM
Las entradas (o inserciones) de archivos (<input type=”file” />) son la ruina del diseño de formularios. Ningún motor render provee el control granular que los diseñadores verdaderamente desean en sus presentaciones. Esta pequeña solución ofrece un marco de trabajo progresivo con CSS y JavaScript para suavizar esta dificultad de la cual casi todos los diseñadores son o hemos sido en algún momento.
7. La solución perfecta para los mensajes de Copyright
Derek Powazek sugiere agregar un mensaje de copyright a una foto y usar CSS para recortar su vista. Se supone que esto logre la meta de agregar información robusta de copyright sin que desfigures tu trabajo.
8. Listado de categorías (muy bueno)
9. Otro menú avanzado hecho con CSS
Lo que queremos hacer aquí, es, en vez de alterar simplemente el estado del objeto de navegación que los usuarios están usando, queremos también, alterar los objetos no navegables de igual forma.
11. Crear una tabla con columnas dinámicamente resaltadas como la tabla de precios de Crazy Egg
12. Una franja de inspiración de estilo de lista
Un tipo bien diferente de lista y estilado de navegación, con franjas.
13. Redescubriendo el botón Elemento
14. CSS dinámico con variables
Geoffrey Grosenbach describe cómo puedes integrar variables CSS dentro del código CSS — con Ruby on Rails.
15. Vínculos sugestivos con favicons
Esto conduce sin lugar a dudas a un nuevo concepto de vínculos sugestivos. Para aquellos vínculos que apuntan a sitios externos, ¿qué tal si, en vez de mostrar un simple ‘vínculo externo’, mostráramos además el favicon de dicho sitio?
16. Tablas hechas con CSS (versión 2)
17. Menú de pasos a seguir con CSS
Un método para diseñar el llamado menú de pasos, el cual posee pasos que el usuario debe seguir para lograr cierto objetivo. Este menu ofrece una cantidad variable de pasos, dependendiendo del tipo de usuarios accesando a esta aplicación.
18. Creando botones ‘especiales’ con CSS
19. Iconizar los vínculos con CSS
Los vínculos son algo bien interesante, pero algunas veces no sabemos hacia dónde nos pueden llevar. Con esta pequeña técnica CSS un usuario puede identificar un vínculo por su ícono.
20. Mejores listas ordenadas (usando PHP y CSS)
Las listas ordenadas son lo más aburrido que existe! (en mi modesta opinión) Seguramente puedes aplicarles imágenes de fondo y hacer infinidades de cosas para componer una lista ordenada regular, esta pequeña herramienta te enseñará cómo dotarlas de un look distinto.
Este artículo muestra cómo podemos crear una navegación circular. Aquí te dejo el código fuente y el ejemplo web.
23. Barra de navegación estilo Digg usando CSS
TEste tutorial explica cómo diseñar una barra de navegación con un diseño ‘líquido’ con esquinas redondeadas para los vínculos.
24. 13 increíbles menúes hechos con JavaScript y CSS
La misma es una tabla de precios basada en CSS en la que, cuando hagamos clic en alguno de los campos, la (o las) fila correspondiente reaccionarán, indicando el grado de relación entre la información proveída. Solución similar: Tablecloth.
27. Cómo crear una barra tipo VISTA con CSS
28. Fondo que se desaparece en CSS
TEsta es una demostración del efecto donde el fondo de la página parece desaparecer. La técnica hace uso de una posición de div arreglada (bottom: 0%) con una imagen PNG transparente y un valor z-index.
29. Scrollovers – Una nueva forma de hacer vínculos
30. Cómo estilizar un índice A – Z con CSS
32. Cómo crear una navegación de “Tabla de contenidos”
33. Receta para el éxito en CSS
34. Opacidad parcial
35. Botones web estilo Nintendo Wii en CSS
36. Cómo hacer botones sensuales con CSS
37. Comillas imponentes con CSS
38. Sombra con CSS
39. Burbújas de diálogo con CSS
40. Listados tipo ‘zebra’ con CSS
41. Texto en perspectiva con CSS
42. Selectores de atributo con CSS (mejores vínculos de Email)
43. CSS: Descripciones en un menú
Otras técnicas
44. Configuración de transparencia para todos los navegadores
45. Script sensitivo a la fecha en CSS
El mismo es un script que cambia la hoja de estilos del sitio en dependencia de la fecha.
Este pequeño, pero increíble script le permite al usuario modificarle ‘al vuelo’ el tamaño a cualquier contenedor.
47. Reseteo de CSS por Eric Meyer
Te permite la creación de un archivo PNG transparente el cual puede ser usado como una máscara.
49. Transformando listas en árboles
50. Crear imágenes cuyo tamaño puede ser alterado con CSS
Vía | Smashing Magazine
Deja tu respuesta