Navegando por ahi, llegué a esta interesante página, CSS play. Aqui podremos encontrar todo tipo de ejemplos ya sea para menus, layouts, boxes, galerias para fotos, y un largo etc. Todo hecho con CSS, para que vean lo poderoso que puede ser unos sencillos códigos CSS.

Cada ejemplo viene con su propio código CSS para usarlo libremente, claro el autor de la web dice que hay que fijarse bien porque hay algunos (pocos) que si llevan un copyright. Peor que no es nada del otro mundo, sino poner un comentario en el código.

Igual vale la pena darse una vuelta, asi también se aprende a trabajar mejor con CSS y xhtml.
¿Quienes pensaban que CSS solo era para colorear o cambiar las fuentes?
Ya verán que es mucho más que eso.

Saludos
The Ghost

Para todos los diseñadores webs no es ninguna novedad que se esté trabajando en una CSS 3, si no lo sabías, ahora ya lo sabes. Yo recién me enteré leyendolo en isopixel.
Asu vez me enteré que un grupo de entusiasta ha creado un sitio para la CSS 3, donde exponen las novedades que éste nos traerá. También tiene su blog propio.

Entre las novedades que puedo destacar:

• border-image: esto sin duda ayudará mucho para poner imagenes como bordes.
• border-radius, gracias a esta propiedad de border, podremos obtener las esquinas redondeadas que siempre hemos querido.
• opacity, no hay mucho que decir, solo que cuando salga, se podrá cambiar la opacidad de un color de fondo. Aparte también podemos tener los valores de HSL.
• background-size, se podrá especificar el tamaño de una imagen usada solo para background.
• multiple-backgrounds, agregar varios background a un mismo elemento no será cosa de “hacks”. Solo se tendrá que separar por comas los backgrounds.
• resize, esto especificará si una caja es redimensionable. Adios “hacks” para lograr esto.
• text-shadows, ya no tendremos que acudir al photoshop para poder agregar sobras a nuestros textos. Esta propiedad nos permitirá agregarle el sombreado que queramos.

Algunos elementos ya son aceptados tanto por mozilla como safari/webkit, pero para testeo, aunque de igual manera se pueden usar, pero me imagino que muy pronto ya los podremos usar mas libremente. IE 7 soportará por completo CSS 3.

Saludos
The Ghost

Ya puede ser descargado el RC 1 del Internet Explorer 7, solo para WindowsXP (que jodidos…con lo que odio WinXP, siempre he usado Win2k).
Ademàs en el blog de IE se dan los bugs corregidos que tienen que ver con CSS, lo cual ha de emocionar a más de uno en la comunidad.
En Super Mag se da una traducción de los mas relevantes que paso a transcribir…:

• Corregidos están todos los bugs documentados en positioniseverything
• Oveflow ahora funciona como debería ser (Adios a ese hack para divs flotados)
• Bugs de interpretación: * html, _propiedad y /**/. Con ésto, miles de hacks dejarán de funcionar.
• Ahora los controles Select son estilizables mediante CSS
• <?xml> ya no causa que el navegador se ponga en quirks mode
• Los bordes declarados como dotted ahora serán efectivamente dotted y no dashed.
• La sentencia !important ya funciona. Otros hack que dejará funcionar.
• El pseudo selector :hover sobre cualquier elemento, no solo en anchors.
• Min/max width/height
• Más pseudoselectores: first-child, adjacent, attribute, child.
• Y lo que más felices nos hará a los diseñadores: *!Soporte de transparencia alfa en imagenes PNG!*

Parece que gracias a todas estas correciones, les diremos adios a los hacks que solemos usar para que un diseño web se vea bien no solo en los demás navegadores sino en el “bendito” IE.

Saludos
The Ghost

Revisando sobre la diferencia entre diseño líquido y diseño fijo, encontre este artículo escrito por Nicolás Fantino de 100px acerca de la diagramación elástica como una opción más y quizas una solución mejor.

Es un muy buen artículo sobre maquetación en CSS y XHTML, donde la gracia está en fijar el ancho de bloque o divisiones en em en lugar de píxeles y porcentajes. El resultado es que además del texto también los contenedores se van a redimensionar cuando el usuario cambie el tamaño de la letra.

El principal problema al usar la diagramación elástica se da cuando se usa imágenes de fondo en los bloques, ya que las imagenes no se redimensionan cuando el contenedor lo haga. Pero como una últil solución es que se defina el width y el height de la imagen en em.

Se que el artículo es algo viejito, pero realmente sirve para la cuestion de accesibilidad de una web.

Articulo: Ni fijo, ni líquido. Elástico

Saludos
The Ghost

Via anieto2k, me entero de esta libreria para css con una serie de efectos para tu página web. Hay efectos para formularios, menu’s, enlaces, contenedores…etc hechos para css.

Aparte, dentro de la misma web, podemos encontrar una serie de scripts para efectos DHTLM y javascript.

Saludos
The Ghost

Hoy es el Naked Day, noo, no pondré una foto mia desnudo.
Naked Day es un día mundial donde todas las página se presentan sin sus hojas de estilos, con el propósito de fomentar los estándares web y las bondades que la misma nos dá. Este día se celebra desde hoy, todos los 5 de abril de cada año.

Asi que no hay porque alarmarse, esto solo durará 24horas.
Si quieres unirte, solo desactiva tu hoja de estilo y deja tu comentario aca para saber cuantos estamos ante la causa.

Por el momento estos son los que se están uniendo…

Mini-d
TorresBurriel
Erolando
Tochismochis
La Web A
aNieto 2K
Lista completa
Posicionamiento Web
512 Megas

Saludos
The Ghost

Cada día admiro más de lo que se puede hacer solo con CSS y es que ahora también podemos, con un poquito de habilidad, obtener decorados en las cabeceras y/o en textos diferentes. Como bien podemos verlos aqui.
Se ve interesante, no? Pues ahora hay que leer como ha decorado el texto con CSS.

[via: Criterion]

Saludos
The Ghost

Con la salida de la beta 2 del tan usado Internet Explorer, también han salido a la luz algunas mejoras hechas sobre CSS en dicho explorador.
Entre los bugs arreglados que podemos destacar son:

• Hicimos cambios importantes a nuestro modelo de cajas (box model) para soportar corectamente el sobre flujo en bloques no reemplazados de nivel y elementos inline.
• Habilitamos el :hover en todos los elementos, no solo en el tag

• Habilitamos el background-attachment:fixed en todos los elementos, no solo en body.
• Se arregló el posicionamiento.
• Soporte para CSS 3
• Se resolvió el problema con el borde de 1px.
• Se arreglaron la mayoria de los bugs publicados en Explorer Exposed

Lo que quieran leer la nota completa, lean What’s new for CSS in beta 2 preview?

Creo que con estos arreglos, si me animaré a probar esta beta 2 del IE7.
Esperemos que por fin se acaben esos problemas de incompatiblidad a la hora de diseñar con CSS.

[via: 512 Megas]

Saludos
The Ghost

Siempre resulta un problema iniciarse a maquetar con CSS, sobretodo en el hecho de acomodar las capas y el fastidio de siempre que en Firefox se ve bien y en IE no…
En fin, aqui les dejo algunas páginas que les servirán de mucho asi como me sirvieron a mi. Ojo no son tutoriales sino recursos, herramientas que te facilitiaran el trabajo con tu CSS. No solo te facilitan el trabajo sino que si te ayudan a comprender mejor.

• Browser support CSS
  La lista de atributos soportados por diferentes navegadores.
• Box lesson
  Diferentes posiciones de columnas y sus respectivos estilos.
• Fun with Forms
  De mucha ultilidad para los formularios.
• List-u-Like
  Un buen y sencillo generador de listas.
• CSS Creator
  Un muy buen generador de plantilla para CSS, completo y sencillo.
• Layout o-matic
  Otro buen generador de plantilla para CSS, te simplifica mucho el trabajo.
• CSS Optimiser
  Te optimiza tu hoja de estilo.

Para validar sus hojas de estilos puede revisar:

• CSS Validator
  Valida tu hoja de estilo y te muestra los errores.

Y de yapa les daré los lugares donde se pueden inspirar para hacer buenos diseños.

• CSS Reboot
• CSS Import
• W3C Sites
• Unmatched Style
• CSS Zen Garden
• CSS Vault
• CSS Beauty
• CSS Camaleón

Espero les sirva de mucho.

Saludos
The Ghost

Artículo, que muestra como realizar contenido por medio tabs (lengüetas) en tu página web usando CSS y JS. Ver aqui
El tutorial está en inglés pero gracias a traductor de altavista (con google no funciona la traducción) les dejo el enlace en español. Ver Aqui traducción Saludos
The Ghost