8 tips para alinear objetos con CSS

CSS Globe se ha convertido en una excelente referencia personal si pienso acerca de CSS, y en esta ocación nos muestra una lista de 8 tips para alinear objetos con CSS, algunos muy basicos y otros que no conocia, excelente!!.

# (3 Comentarios)

HTMLPlayground, practicas de HTML 0

StumbleUpon me convence cada dia mas con que es una excelente fuente de información, ahora me tope con HTMLPlayground es un sitio hecho en Java que nos permite practicar y aprender mas sobre HTML de una manera muy dinamica.

Como funciona?

Seleccionamos un tag (<table>, <img>, <address>, etc..) de la lista.
En el siguiente recuadro nos muestra una descripción del tag seleccionado y nos genera el codigo HTML de como se usa el tag.
En el cuadro donde esta el codigo deberemos hacer click sobre el tar del cual nos interese saber que atributos se le puede insertar.
y por ultimo en ultimo recuadro nos muestra en el momento los cambios que sufre el HTML al agregarle atributos y como le afectan visualmente.

Me dejo maravillado, asi que si andas estudiando sobre diseño y desarrollo de paginas web o por simple hobbie te recomiendo el sitio esta perfecto y es gratis.

Enlace: HTMLPlayground

CSS: Columnas Transparentes 5

columnas transparentes con CSS

A los objetos en las pagina web se les puede aplicar un efecto que bien utilizado puede ser una gran herramienta me refiero a las transparencias, pero como siempre para casi todo ay trabas y en el diseño y desarrollo web la mayoria del tiempo es el IE6, la manera sencilla de aplicar transparencias es usando imagenes PNG con transparencia y utilizando alguna de las mil soluciones para que esta transparencia funcione en cualquier navegador.

Pero ay otra solucion “dios bendiga al CSS” jeje, que es usando CSS y aplicar la transparencia y si habria que escribir 2 lineas de mas para que afecte en cualquier navegador pero tambien existe un problema la transparencia automaticamente se aplica tambien al contenido que se encuntre dentro del bloque al que le pusimos la transparencia, pero como para todo ay su solucion, y como dice el articulo que les linkeare.

un bug arregla a otro bug

Como se hace usando un contenedor (div) con posicion relativa (position:relative;) y dentro de este dos capas mas (div’s) cada una con diferentes caracteristicas, una que seria el fondo y este tendria aplicado la transparencia y una segunda que estaria encima de las dos anteriores que seria el contenido, si no me explique cosa que se que fue asi, aqui les dejo el codigo:
HTML:

<div id=“column-1″ class=“container”>
<div class=“overlay”></div>
<div class=“content”>
<h2>Content</h2>
</div>
</div>

CSS:

#column-1 {
position: relative;
float: left;
width: 500px; /* remember to set a width */
}
.overlay{
position: absolute;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* older Gecko-based browsers */
filter:alpha(opacity=65); /* For IE6&7 */
}
#column-1 .content {
width: 460px;
padding: 20px;
}
.content {
position: relative;
}

Ahora un tip mas un hack para que el overlay ocupe el 100% de la columna (contenedor).

/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay {
height: expression(document.getElementById(“column-1″).offsetHeight);
}

Ver Ejemplo

Esta forma de realizar las columnas transparentes la saque de un post en ingles que en parte e traducido en este post, si desean ver el post original sigan el enlace, de cualquier forma si tienes alguna duda igual y te pueda ayudar seguramente.

Enlace: Cross-Browser Transparent Columns