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

Interesante página la de CSS Menu Generator, con la cual podremos realizar menús CSS atractivos, si no tenemos mucha idea de como realizar uno. Cuentan con 25 menús, que puedes personalizar y adaptar, y probar todos los cambios al momento online. Si no te gustan puedes crear uno desde 0.

Todos disponen de puntuación dada por los usuarios, para que puedas tenerlo en cuenta. Sin duda un recurso a tener en cuenta. El único aspecto negativo es que requiere registro:

Enlace: | CSS Menu Generator

Un sitio web que esta genial a la hora de obtener recursos CSS para elaborar diseños de páginas webs. Dispone de diferentes elementos, como son Layouts, para establecer la maquetación de nuestro web, templates, tutoriales, artículos, menús, etc. Sin duda muy interesante, podremos aprender mucho y mejorar la calidad de nuestros diseños.

Enlace: | Free CSS

Intensivstation es un sitio web que vendrá muy bien a todos aquellos que estén comenzando con la maquetación CSS. Dispone de multiples layouts distintos, que pueden servir de plantilla a la hora de elaborar nuestro diseño web. Los hay centrados, a 3 columnas, diseño líquido, fijo, con sidebars a los lados, etc.

Sin duda un buen recurso para todos aquellos que maquetamos con CSS, pues disponemos de diferentes organizaciones para nuestro sitio web, sin necesidad del uso de las molestas tablas para llevar a cabo el proceso de maquetación.

Enlace: | Intensivstation

Fancy form es un script realizado mediante CSS+Javascript, junto con imágenes, que nos permitirá cambiar al habitual diseño por defecto de checkboxs y radio buttons, por otros con mejor diseño y más bonitos. El resultado es el siguiente, y al pinchar sobre cualquiera de ellos cambia su estado:

Para utilizarlo simplemente hay que llamar a un par de ficheros Javascript y listo, como explican en su página web.

Enlace: | Fancy form | Demo

Hace ya algún tiempo que se viene hablando sobre la nueva versión de CSS que saldrá, la que será conocida como CSS3. Una vez salga deberemos estar al tanto de los nuevos estándares, para adaptarnos pero sobre todo para aprovechar las novedades que presente el nuevo estándar. Se habla del uso de nuevos atributos como opacity, para controlar la opacidad, box-shadow, para dotar de sombre a nuestras capas, también se dice que será posible crear tablas con filas alternativas de 2 colores, etc. Hasta que ese día llegue, si quieres estar totalmente informado de todas las novedades, puedes hacerlo a través del blog oficial CSS3.info, donde estarás enterado de todas las novedades y evoluciones. Además, hace poco han incluido una presentación pdf con ejemplos prácticos de las novedades de la nueva versión.
Enlace: | CSS3.info | Novedades en formato pdf

FormArchitect es una herramienta online que nos permitirá generar formularios HTML sin la necesidad de maquetarlos con tablas, sino que usa CSS. El código generado es HTML válido, crea un diseño muli-layout, implementa las validaciones Javascript y es compatible con varios navegadores. Sin duda una forma de evitarnos quebradero de cabeza maquetando lo siempre complicados formularios.

Enlace: | FormArchitect