css

hCard con CSS

ByLuis December 14, 2006

En 24 ways nos vuelven a regalar un buen artÃculo sobre cÃ³mo mostrar las hCard con estilos.
Claro, el diseÃ±o que han realizado quizÃ¡s no se amolde al nuestro, pero la tÃ©cnica que usan estÃ¡ bastante bien: usar una imagen de fondo y luego cuatro imÃ¡genes para cada esquina.

Styling hCards with CSS

css

Gráficas mediante CSS

ByLuis April 10, 2007

Una buena colecciÃ³n de herramientas para generar grÃ¡ficas (de barras, progreso, de tarta, …):

Ajax MGraph: desarrollado en XHTML u CSS, es una grÃ¡fica interactiva que funciona en Firefox, IE y Opera. Incluye integraciÃ³n PHP y de la base de datos.
PlotKit: grÃ¡fica de tarta y de puntos, soporta Canvas y SVG y soporte de navegador.
CSS Javascript Bar Charts: grÃ¡fica de barras sencillo.
Vertical Bar Graphs with CSS and PHP: grÃ¡fica de barras con CSS y PHP.
CSS For Bar Graphs: grÃ¡fica de barras usando los tanto por ciento que ofrece CSS.
CSS Vertical Bar Graphs: grÃ¡fica de barras de forma sencilla.
Displaying Percentages with CSS: barra de progreso mediante CSS.
Dynamic Pie Chart with CSS: grÃ¡fica de tarta dinÃ¡mica.

10 Free CSS Graph Resources

VÃa / Intenta

css

12 técnicas básicas de plantillas CSS

ByLuis January 19, 2007

Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es mÃ¡s de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseÃ±os estÃ¡n divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorÃas, a su vez tiene diseÃ±o estÃ¡tico, estÃ¡tico con paneles en el pie de pÃ¡gina y diseÃ±o fluido.

Se pueden descargar los diseÃ±os cuando los visualizas.
12 Basic CSS Templates
VÃa / Digg

Firefox

Firefinder: plugin para Firebug que localiza elementos

ByLuis May 14, 2009

Firefinder es un plugin para Firefox que se integra con Firebug y que nos permite localizar de forma rápida y sencilla elementos HTML en la página.
Permite usar selectores CSS y XPath, por lo que no es necesario conocer una nomenclatura nueva, y además nos ayuda cuando trabajemos con los selectores jQuery o cuando estemos parseando HTML.
Firefinder
Vía / Robert’s talk

css

Colección de diseños de tablas mediante CSS

ByLuis March 17, 2006

Para aquellos que no sean hábiles en el diseño y necesiten de ideas para mejorar el aspecto de las tablas, existe una galería con diseños de tablas mediante CSS.

Hasta ahora hay un total de 71 diseños, que se pueden visualizar en la misma lista, no son screenshots, ni popups, ni enlaces a otras páginas, cuando queremos ver uno de los estilos, se recarga la página y muestra la lista con el estilo seleccionado. También hay una serie de tutoriales sobre tablas y CSS que nos pueden ser de utilidad. Cualquier ayuda siempre es bienvenida.

CSS Table Gallery

Vía / Digg

css

Guía de estilos CSS para e-mails

ByLuis June 17, 2008

Extensa guía de propiedades CSS que permiten los clientes de correo a la hora de presentar los emails en formato HTML.
El trabajo que han realizado es impresionante y va siendo actualizado cada cierto tiempo. Nos muestra las propiedades CSS y si se ven el los clientes de correo de escritorio o los clientes web.

CSS support in email clients
Vía / WebAppers

css | Opera

Selectores CSS3 que soportará Opera

ByLuis January 22, 2007

En cuestión de CSS Opera suele ir por delante del resto navegadores. En el blog de uno de sus desarrolladores nos adelantan algunos de los selectores, en este caso pseudo-clases, que soportarán sus futuras versiones:

:root: selecciona el elemento padre del documento, que normalmente será el <html>
:not(s): representa a todos los elementos del documento excepto aquellos que NO coincidan con el selector "s" (ej.: not(#menu) ).
:nth-child(n): representa al hijo n de un elemento. Ej.: div:nth-child(2) seleccinará todos los elementos div que sean segundo hijo de cualquier elemento (gracias Federico).
:nth-of-type(n): representa al hermano n de un elemento. Ej.: div:nth-of-type(2) seleccinará el segundo elemento del div especificado.
:first-of-type: representa al primer elemento que es el primer elemento de su tipo dentro de la lista de hijos del elemento padre.
:target

Estos otros elementos están implementados en el núcleo de Opera pero por diversas razones no están aun habilitados

:empty : representa a un elemento que no tiene ningún tipo de hijo.
:nth-last-child(n): representa a un elemento que tiene n hermanos después de él.
:nth-last-of-type(): representa a un elemento que tiene n hermantos del mismo tipo.
:last-child: represetna al ultimo hijo de un elemento.
:last-of-type: representa al último hermano de su tipo. Sería lo mismo que :nth-last-of-type(1).
:only-child: representa a un elemento cuyo padre no tiene ningún otro elemento hijo.
:only-of-type: representa a un elemento cuyo padre no tiene otro elemento hijo del mismo tipo.

Vía / Slightly Ajar

Similar Posts