El pequeño Mundo de JooAnfossi

Ya sabrán que las Hojas de estilo o CSS (Cascading Style Sheets) son usadas para darle estilo a los sitios web y separar el contenido del diseño pero hay personas con mucho tiempo y creatividad que logran hacer dibujos solo con CSS sin utilizar imágenes ni ningún truco de magia, solo CSS.

Hay muchos ejemplos en internet que aunque no son muy nuevos no dejo de asombrarme cada vez que veo un dibujo nuevo xD Algunos ejemplos de ello:

• Homero Simpsons
• Bush
• Una Casa
• Un paisaje
• Botella Animada
• Unos lápices
• Un Logo
• Hasta un PACMAN!
• Un inútil Generador de iconos

La mayoría son de Roman Cortes, que parece que es el mas seco en el tema, genial no? aunque un poco dificil y sin mucha utilidad xD

Más de un año me duro el diseño que habíamos hecho con Fernando, luego de cambios en la versión de wordpress y algunos detalles en el theme antiguo basado en el K2 me decidí a cambiar un poco el diseño y la diagramación del contenido basandome en el iTheme. El diseño se mantiene en la misma linea pero con colores mas divertidos. Ojalá les guste.

Imágen del Theme Antiguo

En los últimos blogs que he hecho con Wordpress 2.6 he tenido el problema con la alineación de imágenes, ya que ésta se realiza de una nueva forma que no está incluida en el CSS de nuestro theme, excepto si usamos el theme que trae Wordpress 2.6 por defecto.

El tema es que al alinear las imágenes en el editor de wordpress quedan bien pero en el post publicado la imágen queda  alineada a la izquierda y la solución a esto es simple. Solo tienes que agregar al CSS del theme que utilizarás las siguiente líneas:


img.alignleft, div.alignleft
{
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright
{
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter
{
text-align:center;
margin:0 auto;
}


Y listo, ahora las imágenes aparecen alineadas como corresponde

Esta semana me he dedicado a diseñar para un blog que estamos preparando con Fernando. El diseño con CSS va muy bien, excepto que… para que el blog no desaparezca en los diferentes navegadores he tenido que recurrir a algunos hacks.

Hay varios tipos de hacks, los condicionales y los hacks en línea. Los hacks en línea están integrados en el CSS de forma que cada navegador interprete solo el hack que él conoce. Estos son los principales y con sus respectivos navegadores.

      ie6 y anteriores
          * html {}
      Solo ie7
          *:first-child+html {}
      Ultimas versiones de Opera 9 y anteriores
          html:first-child {}

Esos selectores son recomendados por la W3C porque permiten la validación del estilo a diferencia de los siguientes, que no son válidos  pero si lo son para Internet Explorer y se aplican a las propiedades que no están siendo bien interpretadas:

      ie6 y anteriores
           _propiedad: valor
      Para todos los ie
           *propiedad: valor

Cómo ven la solución no es tan terrible como el ver nuestro sitio totalmente desforme en otro navegador.

Saludos

Encontré en Ateneu Popular una “chuleta” css en la que se explican las propiedades básicas que puedes utilizar en tu hoja de estilo, con los valores que puede tomar y una breve definición. Creo que es super útil tanto para usuarios avanzados que de pronto pueden olvidar alguna cosita o para usuarios que recién empiezan diseñando con css, por su simplicidad. Les dejo una imagen de una pequeña parte de la “chuleta”

Enlaces: Chuleta CSS – Atenue Popular / Descarga