Post Pic

50 técnicas avanzadas CSS para una codificación efectiva.

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.

CSS-Technique

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.

CSS-Technique

3. Procesador CSS

CSS-Technique

4. Menú Avanzado en CSS

CSS-techniques - Advanced CSS Menu

5. Mapa de un sitio con CSS

CSS-techniques - beTech » CSS SiteMap » Oct 3, 2007

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.

CSS-Technique

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.

Screenshot

8. Listado de categorías (muy bueno)

CSS-techniques - Particletree » Automatically Version Your CSS and JavaScript Files

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.

Screenshot

10. Efecto hover con CSS

CSS-techniques - CSS hover effect | Veerle's blog

11. Crear una tabla con columnas dinámicamente resaltadas como la tabla de precios de Crazy Egg

CSS-techniques - Creating a table with dynamically highlighted columns like Crazy Egg's pricing table

12. Una franja de inspiración de estilo de lista

Un tipo bien diferente de lista y estilado de navegación, con franjas.

CSS List Style

13. Redescubriendo el botón Elemento

CSS-techniques - Particletree » Rediscovering the Button Element

14. CSS dinámico con variables

Geoffrey Grosenbach describe cómo puedes integrar variables CSS dentro del código CSS — con Ruby on Rails.

Dynamic CSS

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?

CSS-techniques - Drop Shadow CSS

16. Tablas hechas con CSS (versión 2)

CSS-techniques - A CSS styled table version 2 | Veerle's blog

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.

Stepmenu

18. Creando botones ‘especiales’ con CSS

CSS-techniques - Creating bulletproof graphic link buttons with CSS | 456 Berea Street

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.

Screenshot

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.

Screenshot

21. Menú circular con CSS

Este artículo muestra cómo podemos crear una navegación circular. Aquí te dejo el código fuente y el ejemplo web.

Circular Menu with CSS

22. Menú estilo Dock con CSS

CSS-techniques - CSS Dock Menu

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.

Screenshot

24. 13 increíbles menúes hechos con JavaScript y CSS

CSS Menu

25. Tabla de precios con 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.

CSS Pricing Matrix

26. Listado expansor en CSS

List Expander

27. Cómo crear una barra tipo VISTA con CSS

Vista CSS Toolbar

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.

CSS-techniques - Fade Out Bottom

29. Scrollovers – Una nueva forma de hacer vínculos

Scrollovers

30. Cómo estilizar un índice A – Z con CSS

CSS-techniques - How to Style an A to Z Index with CSS | Smiley Cat Web Design

31. Lista en cuadros en CSS

List Boxes

32. Cómo crear una navegación de “Tabla de contenidos”

Table of Contents

33. Receta para el éxito en CSS

CSS-techniques - CSS - A Recipe for Success

34. Opacidad parcial

CSS-techniques - Stu Nicholls | CSSplay | Partial Opacity

35. Botones web estilo Nintendo Wii en CSS

CSS-techniques - Simple Round CSS Links ( Wii Buttons )

36. Cómo hacer botones sensuales con CSS

CSS-techniques - How to make sexy buttons with CSS

37. Comillas imponentes con CSS

CSS-techniques - CSS Pull Quotes | Design Meme

38. Sombra con CSS

CSS-techniques - Drop Shadow CSS

39. Burbújas de diálogo con CSS

Screenshot

40. Listados tipo ‘zebra’ con CSS

CSS-techniques - CSS: Double Lists | Mike’s Experiments | MikeCherim.com

41. Texto en perspectiva con CSS

CSS-techniques - Mike’s Experiments: Archives Page | A Record of My Madness | Powered by the GreenBeast CMS RSS Newsmaker - -

42. Selectores de atributo con CSS (mejores vínculos de Email)

Screenshot

43. CSS: Descripciones en un menú

Screenshot

Otras técnicas


44. Configuración de transparencia para todos los navegadores

CSS-techniques - CSS Transparency Settings for All Browsers

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.

46. Edición de contenedores

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

CSS-techniques - CSS Tools: Reset CSS

48. Superpocisión PNG

Te permite la creación de un archivo PNG transparente el cual puede ser usado como una máscara.

49. Transformando listas en árboles

CSS-techniques - odyniec.net

50. Crear imágenes cuyo tamaño puede ser alterado con CSS

CSS-techniques - Create Resizable Images With CSS | Smiley Cat Web Design

Vía | Smashing Magazine

Post relacionados

Posts populares


2 Trackbacks

1
09.28.08
Bitácora de Intelisen » CSS, JavaScript, Ajax

[...] 50 técnicas avanzadas CSS para una codificación efectiva. [...]

2
09.28.08
50 tecnicas avanzadas CSS « Cristian Cena: Bitácora Personal

[...] leyendo en webizzima.com « [...]

8 Respuestas

09.28.08

Muy bueno, desde ya en mis bookmarks :D

09.28.08

Buen aporte

09.28.08

Gracias por los comentarios. Inicialmente puse 50, pero vi un millón más, ya iré poniendo nuevos posts al respecto.

09.28.08

_ Espectacular esta relación, miles de gracias. (y)

09.28.08

Gracias a ti por comentar Norant, espero que nuestra casi recién nacida comunidad sea de tu agrado.

09.28.08

Muy genial, de veras.

09.28.08

Impresionante este sitio, a marcadores!! Gracias por compartir información de tan buena calidad.

09.28.08

Gracias por escogernos dentro de tu preferencia.

Deja tu respuesta

* Nombre, Email, Se requieren comentarios