50xcss-mini

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

 

13. Redescubriendo el botón Elemento

CSS-techniques - Particletree » Rediscovering the Button Element

 

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

 

22. Menú estilo Dock con CSS

CSS-techniques - CSS Dock Menu

 

 

26. Listado expansor en CSS

List Expander

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

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

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 - -

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

10 Comentarios

  1. fearlex

    Muy bueno, desde ya en mis bookmarks 😀

  2. TBS

    Buen aporte

  3. alain

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

  4. Norant

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

  5. alain

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

  6. Koratsuki

    Muy genial, de veras.

  7. cristian cena

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

  8. alain

    Gracias por escogernos dentro de tu preferencia.

Dejanos un comentario