Todo Para el WebMaster

Las Transparencias son un efecto espectacular, lamentablemente no son muy populares. una del as mayores razones es que antes se usaba imagenes PNG, por el pobre soporte que tenia IE6.

Esto empezo a cambiar con la utilización de IE 7 y Firefox que se volvieron cada vez mas populares en el sistema operativo de Windows.

Aqui presentamos la manera de crear transparencias utilizando la llamada opacity tag y las propiedades de opacity filter basados en IE.

Como puedo crear columnas transparantes uq e funcionen en todos los navegadores?

Esto es posible utilizanco CSS. Crearemos una columna de fondo
transparente con un tamaño, y dentro colocaremos una columna transparente y más pequeña aque la anterior donde se pondra el contenido.



Empezemos
Definimos las columnas:

<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>

Nosotros podemos camabiar la posición de la columna contenedora: position: relative; float; left; esto nos permite cambiar la posición de la columna de contenido dentre de la columna transparente.

column-1 {
position: relative;
float: left;
width: 500px; /* Se puede cambiar el ancho */
}

Ahora crearemos la columna transparente...

css.overlay{
position: absolute;
top: 0; /* permite subir y bajar la columna */
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* para viejos navegadores Gecko-based */
filter:alpha(opacity=65); /* para IE6&7 */
}

Ok. Ahora veamos el codigo para la columna de contenido:

column-1 .content {
width: 460px;
padding: 20px;
}

Ya casi terminamos. Como veras hasta ahora, el contenido aparece por debajo, para solucionar esto utilizamos la posicion relative.

css.content {
position: relative;
}

Terminamos, solo queda resolver un problema, como siempre, que funcione en IE:

* Usamos el asterico para que solo sea leido por IE-6 */
* html #column-1 .overlay {
height: expression(document.getElementById("column-1").offsetHeight);
}

Puedes mirar un muy buen Ejemplo.

Puedes descargar el codigo fuente Aqui.

Fuente Original bitsamppixels.com.

Mediante el uso de XHTML / CSS + JQuery (AJAX) se logra este espectacular Slide de simple diseño y una gran versatilidad, además de un excelente efecto de animación.

Este Slider, posee un contenido principal, que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay pequeñas imagenes que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier parte del slide. Además cada parte diferente del Slide permite tener una breve descripción y un titulo sobre una columna transparente montada sobre la misma imagen del slide.

• Auto-play. No solo permite cambiar las distintas muestras del Slide, sino también permite ir rotandolas de manera automática cada un periodo de tiempo determinado.
  
• Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

Ver demo
LINK: Auto playing featured Content Slider

Este servicio web permite mejorar la velocidad de carga de tu site redimensionando las imágenes que forman parte del mismo.

Tanto al subir imagenes desde tu ordenador a través de tu navegador web, o indicando la dirección URL de una imagen, Smush it comprimira de forma automática para proporcionar en un zip, una imagen muchos menos pesada que la original y sin apenas pérdida de calidad.

Este soporta formatos de imagenes gif, jpg, png y gif con animaciones.

Para aquellos que usan Mozilla Firefox existe una extensión de Smush it que se integra como un botón en la barra de estatus del navegador web y hace más sencillo si cabe la tarea de redimensionar imágenes.


LINK: Smush.it.