Un pequeño dato, que quizás no conocen, Google Font Directory, aquellas fuentes que Google nos facilita de forma gratuita a través de sus servidores, gracias a las bondades de CSS 3.

Ahora contamos con una nueva funcionalidad que permite probar todas las fuentes de Google Font Directory, modificar a voluntad y con menúes sencillos cada fuente, lo cual genera un código CSS que se puede pegar directamente o adaptar a nuestro diseño web.

Hace unos días les mostraba “The Art & Science of CSS“, un libro para sacarle provecho a las CSS, pero que para usarlo había que tener un conocimiento mínimo de cómo funciona.

Repasemos, el CSS o Cascade Style Sheet (Hojas de estilo en cascada) permiten darle a una página web su diseño. El código no es dificil de entender aunque es un poco distinto si lo único que has visto en tu vida es el HTML.

Por eso les traigo una guía elemental para aprender a usar desde el primer paso cómo usar la CSS. Es un tutorial de LadyBenko en que nos enseña cómo diseñar la estructura de un blog (al estilo del clásico Kubrick). Vamos completando cada paso hasta que al final obtenemos una linda página web.

Para descargarla sigan el link: Tutorial de XHTML + CSS desde cero.

Este manual pertenece a Sitepoint y permite aprender a utilizar CSS para aprender cómo tratar distintos elementos en las páginas web, tales como bordes, fondos, imágenes, formularios, tablas y esquinas redondeadas.

Aunque “The Art & Science Of CSS” es bastante ilustrativo y nada dificil de entender, está en inglés y es recomendable tener algún conocimiento en CSS para sacarle provecho. Es un manual bastante amplio, tiene más de 200 páginas con ejemplos, pero no hace falta leerlo linealmente para entenderlo, es un manual de consulta.

El libro se vende en formato físico a US$39.95 y en PDF pero hicieron una campaña en Twitter para regalarlo e hicieron una campaña para ponerlo al alcance de cualquiera, en principio ellos te piden seguirles en Twitter para darte el link de descarga gratuita pero la promoción se ha terminado. Por lo visto están regalando todavía copias en PDF si nos suscribimos a su lista de correos.

Pero como a mi me encanta compartir les dejo mi copia para que la disfruten:

Descárguenla Aquí – “The Art & Science of CSS”

Completa guía de estilos CSS que me encuentro en Sentido Web, para poder comprobar que propiedades CSS podemos utilizar en los diferentes clientes de correo electrónico. Por un lado encontramos la tabla de compatibilidades entre diferentes softwares, como Outlook, Thunderbird…

Por otro lado también encontramos las propiedades CSS en los clientes vía web, como Hotmail, Yahoo o Gmail. Sin duda muy útil si envias correos electrónicos y quieres usar estilos para personalizarlos hasta el más mínimo detalle. Puedes descargarte la versión en formato pdf o en excel.

Enlace: | Guía de estilos CSS para emails

Open Web Design es un interesante sitio web en el cual podemos descargar plantillas a partir de la cual elaborar nuestra propia página web. Mucha gente desconoce como realizar una página web decente, bien sea porque no conoce CSS en profundidad o ni tan siquiera HTML.

Si deseas una base a partir de la cual poder cimentar el diseño de una página web, tanto si eres novato como más avanzado, en Open Web Design encontrarás 3.235 plantillas gratuitas para descargar. Incluyen imágenes y el código valida, asi que nunca estará de más echar un vistazo.

Enlace: | Open Web Design

Mini tutorial muy recomendable el de Webdesignerwall, mediante el cual aprenderemos como podemos mediante CSS y el empleo de la etiqueta <span> podemos poner un borde, una chincheta o cualquier otro elementos que se nos ocurra. Además el código funciona en diferentes navegadores, y nos evitaría un laborioso trabajo editando cada imagen por separado.

Enlace: | Tutorial establecer elementos con CSS y la etiqueta span

Después del Homer Simpson realizado con CSS, Román Cortés ha elaborado una aplicación que nos permite convertir cualquier imagen, a código CSS. Para que podamos convertir una imagen a código CSS, simplemente hemos de tener en cuenta algunas cosas.

• La imagen que queramos convertir debe ser jpg, y llamarse image.jpg.
• La imagen, será convertida en el fichero out.html, pero sin colores, solo en blanco y negro.
• Tan sólo hay que descargarse el programa jpeg2css, y podremos comenzar a convertir nuestras imágenes.

Como una imagen vale más que mil palabras, podeis ver el proceso en éste vídeo:

Enlace: | jpeg2css

Increíble, pero hay gente capaz de realizar increíbles diseños simplemene con html+CSS, como es el caso de éste Homer Simpson, realizado por Román Cortés y publicado en su blog. Como el mismo comenta, Homer realizado con CSS se ve correctamente en Internet Explorer 5.5, 6 y 7, Firefox 2, Safari 3 y Opera 9.

Si quieres ver todo el código, lo puedes ver después del salto: Continúa leyendo »

¿En busca de un nuevo diseño para tu página web? ¿Comienzas un diseño desde 0 y te ves sin ideas? Entonces es muy probable que Submit CSS te sea de ayuda para encontrar inspiración, puesto que tiene una recopilación de muchos sitios webs con interesamte diseños.

Puedes dejar comentarios sobre los diseños, incluso darles una puntuación. Sin duda un lugar interesante para buscar ideas, o si simplemente eres un apasionado del diseño web y te gusta observar grandes diseños de otras personas.

Enlace: | Submit CSS
Vía: | Adictos

Una vez más, gracias al empleo de Javascript, podemos encontrar una biblioteca con la cual poder ampliar las funcionalidades de nuestro sitio web. Con MoreCSS, seremos capaces de incluir nuevas propiedades CSS, como abrir enlaces en una nueva ventana de un tamaño determinado, crear tooltips, precargar imágenes...

Por ejemplo, para realizar una precarga de imágenes, simplemente hemos de descargarnos el script y realizar la llamada en el head:

En nuestro fichero CSS, dentro de la etiqueta body, podremos realizar la precarga de imágenes de la siguiente manera:

Enlace: | MoreCSS
Vía: | Xyberneticos