101 CSS Resources, recopilacion de recursos para CSS

En el blog de Jason Bartholme’s encuentro el artículo 101 CSS Resources to Add to Your Toolbelt of Awesomeness, una recopilacion de recursos para CSS.Todos los diseños web están utilizando el CSS para separar el contenido y el aspecto en su sitio. Aquí están 101 recursos mediante el CSS, te enseñarán algunos trucos y técnicas, limpiar tu código, y probar el funcionamiento de las disposiciones pre-hechas. Están divididos en los siguientes apartados:

• Plantillas y disposiciones del CSS.

• Tips y técnicas del CSS.

• Clases particulares del CSS.

• Utilidades del CSS.

CSS-Tricks: recopilación de los mejores ejemplos CSS

En el blog RUBEN DOMFER me encuentro con este recopilatorio de CSS-Tricks donde repasan los 10 mejores ejemplos de CSS descargable y “testeable”:

• Apple-Like CSS Menu

• How To Set Up Alternate Style Sheets

• Images in All Four Corners of a Webpage

• Exploding CSS Menu

• Fade Out Bottom of a Webpage

• Expandable “Note” Box DIV

• Homebase, a Free CSS Template

• Hang Tab

• A Background for Embedded YouTube Videos

• Crazy Menu

CSS para alinear las imágenes

En WEB INTENTA encuentro un sencillo CSS para alinear las imágenes fácilmente:

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}

Gráficas de barras con CSS

En Barras y gráficas bonitas 100% CSS encuentro una forma de mostrar gráficas de barras con CSS , la forma más limpia posible, es un recurso compatible con la gran mayoría de navegadores y 100% CSS. Se trata de CSS For Bar Graphs.

Mapeando imágenes en estos tiempos

En CSSLAB nos recuerdan los viejos tiempos esos de la etiqueta <map>. Aunque su uso es corriente en nuestros días, en sitios donde ponen un GIF y luego lo «mapean» creando links de navegación.

Con Flickr se le dió un nuevo uso al método de agregar zonas sensibles dentro de imágenes con información anexa, lo cual se vió con muy buenos ojos cuando se necesita mostrar detalles de ciertas zonas dentro de las imágenes.

Existen un par de técnicas pululando por la web que hacen este trabajo, pero encontré una que se necesita sólo CSS para realizarlo. Funciona perfecto en todos los navegadores inportantes.

Si estas interesado en el tama lo puedes leer en: ImageMap: mapeando imágenes en el siglo XX.

El resultado lo muestro graficamente en la siguente imagen:

YAML, un framework XHTML/CSS

Mediante el enlace que nos suministra SENTIDOWEB descubro a YAML (Yet Another Multicolumn Layout), un framework XHTML/CSS que nos permite crear plantillas para diseños web con diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.

También nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.

Spiffy Corner, generador de esquinas redondeadas mediante CSS

En BLOG AND WEB comentan que de la mano de los creadores de Spiffy Box sale Spiffy Corner, una herramienta en línea que ya comenté en el post Más bordes redondeados, pero no esta mal recordarlo. Es un generador de esquinas redondeadas que solo usa css para su funcionamiento, sin imágenes ni scripts. Su funcionamiento es muy sencillo solo hay que escoger un nombre para la clase css (opcional), el color de la sección con bordes redondeados, el color de fondo y el radio de curvatura. Una vez generado te brindará tanto el código css como el html para que puedas implementarlo en tu web.

Blueprint Grid CSS Generator

En el blog LEANDONO´S comenta que hace unos días hablaba sobre Blueprint, un framework CSS que permite facilitar la creación de la maquetación, aspectos tipográficos y de impresión en nuestras creaciones.

Aprovechándose de él, Blueprint Grid CSS Generator es una herramienta online que nos posibilita configurar la grilla de maquetación con los valores que nosotros definamos.

Tablas con css

En XYBERNETICOS nos muestran dos bonitas técnicas basadas en CSS que nos permitirán lograr tablas agradables y con estilo, son de Veerle. Nos vendrá muy bien cuando necesiten mostrar estadísticas o datos:

1. A CSS styled table [Demo].
2. A CSS styled table version 2 [Demo].

Curioso sistema de navegación por franjas con CSS

Es impresionante la cantidad de cosas útiles que se pueden realizar con CSS. En WEBINTENTA, basándose en el artículo «A Stripe of List Style Inspiration» nos muestran como, únicamente con CSS, se pueden realizar estructuras de navegación complejas a partir de listas. En su caso han realizado un sistema de navegación horizontal, con franjas que se expanden para mostrar el contenido de las mismas.

Un sistema de navegación muy útil para enlazar a distintas secciones y crear explicaciones sobre lo que se va a encontrar el usuario dentro de cada una de las secciones.

El ejemplo que aparece está basado en el citado artículo, pero se ha añadido como novedad, la utilización de imágenes dentro de las franjas (cosa que es muy útil para un sistema de navegación de este tipo).

Para ver las explicaciones en castellano, el código empleado, o efectuar la descarga del mismo, pulsa el enlace.

125 codigos útiles

Juan Pablo de JUQUE Y WEBLOG, nos proporciona una gran lista que es una recopilación de códigos (HTML, CSS, Javascript, y snippets de AJAX) para simplemente inspirarse, copiar, aprender o incluirlos en tu blog. 125 Code Snippets for web designers.

Diferentes técnicas y clases del CSS

En A Blog you can use encuentro el siguiente artículo 18 CSS Tips, Techniques and Tutorials , que puede ser de interés (un poco de todo), aquí dejo solamente que los enlaces a los artículos correspondientes:

• CSS Layouts

• CSS Navigation

• CSS Navigation Magnification

• Parallax Backgrounds

• CSS-only, table-less forms

• Styling Forms

• Sizing text

• Spiffy Corners

• CSS Fade in Image

• Suckerfish Dropdowns

• CSS Ratings

• CSS Crossbrowser slideshow

• CSS Tab Designer

• CSS Design and Usability

• CSS Onion skinned drop shadows

• 40 CSS Layouts

• CSS Floats

• CSS Vertical Bar Graphs

Aprender la posición en CSS mediante diez pasos

En BLOG VECINDAD… mencionan que uno de los aspectos que menos se entiende sobre el CSS, es el posicionar elementos en la página. En Learn CSS Positioning in Ten Steps tratan de explicar de forma clara y con ejemplo, la manera de manejar ese aspecto.

Selección de menús de navegación con CSS

Selección de 71 menús de navegación gratuitos realizados con CSS, en 71 Free CSS Menus (del blog A Blog you can use).