Para que eso se pueda hacer realidad he pensado estas dos formas para mandar las propuestas:

1. La más lógica, escribir un comentario con la propuesta aquí, en este artículo.
2. Escribir en twitter la propuesta poniendo en algún sitio @cssblog_es y tambien @CKGrafico de manera que te asegurarás de que yo lo leo.

En cualquiera de las dos formas has de poner como mínimo esta información:

• Tu nombre (o nick o como quieras llamarte)
• Tu propuesta
• Tu twitter (si tienes)
• Tu web (si quieres)

Si tienes cualquier propuesta o sugerencia escribela no pierdes nada y seguro que ayudas ha alguien al resolverla.

Voy a tomarme muy enserio estas propuestas y todas las que sean interesantes irán a la lista de próximos artículos que tengo en mi ordenador, me encantaría ver la participación de los lectores y que se involucren.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Opinión: ¿Qué te gustaría leer en el blog?

• Opinión: Tu primer fallo con CSS

• ¿Cómo inspirarse para el diseño web?

CSS3 Please es una herramienta que trae a nuestro disposición una hoja de estilos con propiedades CSS3, como pueden ser transform, border-radius, text-shadow, box-shadow, transition y @font-face, que podremos modificar y observar su resultado final, a la derecha. Cabe destacar que es un generador de reglas cross-browser, es decir, se podrá mostrar en cualquier navegador, aunque algunas propiedades en IE requieran el uso de filtros.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Comprueba efectos CSS3 con Ceaser

• Test de propiedades CSS3 basadas en Webkit

• Propiedades CSS ordenadas alfabéticamente

Mediante CSS Sprites y JQuery podemos crear un efecto al aplicar :hover (posicionar el cursor encima) de un bloque, dándole a este una cambio de colores a escala de grises, como dice Sohtanaka. Esto puede resultar útil en portafolios, pero no recomiendo usarlo en proyectos grandes.

Estructura HTML

Primero crearemos una lista desordenada que la usaremos para crear la lista de imágenes de la galería:

<ul>
<li>
<a href="#"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Nombre de la imagen</a></h2>
</li>
</ul>
<ul class="gallery">

<li>

<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>

<h2><a href="#">Nombre de la imagen</a></h2>

</li>

</ul>

Cada lista contendrá una imagen agrupada en una etiqueta <span>. Esta etiqueta será usada para recortar la imagen para mostrarla sólo en su estado por defecto. Fíjate en este esquema para verlo mejor:

Código CSS

Estilizaremos esta galería como cualquier galería, aplicando CSS a las listas y a las miniaturas. La única diferencia es que tenemos la etiqueta <span> para cortar las imágenes y debemos estilizarla también:

ul.gallery {

width: 708px; /*--Ajustar el ancho acorde a tu documento--*/

list-style: none;

margin: 0; padding: 0;

}

ul.gallery li {

float: left;

margin: 10px; padding: 0;

text-align: center;

border: 1px solid #ccc;

-moz-border-radius: 3px;

-khtml-border-radius: 3px; 

-webkit-border-radius: 3px; 

display: inline; /*--IE6 Fix - Arregla el fallo de doble margen en IE6--*/

}

ul.gallery li a.thumb {

width: 204px; /*--Ancho de la imagen--*/

height: 182px; /*--Alto de la imagen--*/

padding: 5px;

border-bottom: 1px solid #ccc;

cursor: pointer;

}

ul.gallery li span { /*--Usada para cortar la imagen--*/

width: 204px;

height: 182px;

overflow: hidden;

display: block;

}

ul.gallery li a.thumb:hover {

background: #333; /*--Efecto hover para navegadores con js desactivado--*/

}

ul.gallery li h2 {

font-size: 1em;

font-weight: normal;

text-transform: uppercase;

margin: 0; padding: 10px;

background: #f0f0f0;

border-top: 1px solid #fff;

}

ul.gallery li a {text-decoration: none; color: #777; display: block;}

Código Javascript (JQuery)

Para todo el que no esté familiarizado con JQuery, puede echar un vistazo a su página oficial y aprender lo básico.

Vamos a llamar al archivo JQuery, que se encuentra alojado en Google. O también puedes descargarlo y subirlo a tu servidor, como desees. El código para llamar al archivo JS alojado en Google es este:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Se aplicará un efecto “fade” a la miniatura y se definirá una imagen de fondo en la etiqueta <a>. Usando CSS Sprites posicionaremos la imagen con escala de grises en la parte inferior así cuando posicionemos el cursor encima de la miniatura, esta, mediante el efecto “fade”, nos mostrará la imagen con escala de grises.

El siguiente script contiene comentarios explicando las acciones que se producen con JQuery:

$(document).ready(function() {

$("ul.gallery li").hover(function() { //En hover...

var thumbOver = $(this).find("img").attr("src"); //Obtener la direccion de la imagen y asiganarla a 'thumbOver'

//Definir una imagen de fondo (thumbOver) en la etiqueta <a> - Definir la posicion en la parte inferior (bottom)

$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

//Animar la imagen a opacidad 0 (fade out)

$(this).find("span").stop().animate({opacity: 0}, 300);

} , function() { //on hover out...

//Animar la imagen a opacidad 100% (fade in)

$(this).find("span").stop().animate({opacity: 1}, 300);

});

});

Estandarización

XHTML 1.0 Transitional válido.

CSS 2.1 inválido (por propiedades CSS3).

Ejemplo de su funcionamiento

Vía | Sohtanaka

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Efecto de despliege con CSS y JQuery

• Galería de imágenes interactiva con CSS

• 7 fantásticas galerías sobre logotipos

Hay muchas formas de presentar imágenes para enseñarlas a los usuarios. Una de ellas es el rotador de imágenes. Con HTML, CSS y un poco de JQuery podemos crear una forma de ver nuestras imágenes de forma amena, sencilla y eficaz.

Paso 1. HTML

Como vamos a ver, el rotador se compone de dos estructuras, la zona donde muestra la imagen en sí (izquierda -main image-) y la zona donde se muestran las otras imágenes que podemos ver (derecha -thumbnail list section-. Existe una tercera sección, llamada desc que será la descripción de cada imagen.

Zona main_image HTML

<div class="main_image">
<img src="banner1.jpg" alt="" />
<div class="desc"><a href="#" class="collapse">Cerrar</a><div class="block">
<h2>Título</h2><small>Date</small><p>Copiar</p></div></div> </div>
Zona image_thumb HTML

La zona image_thumb será parecida a la sección principal, solo que en este caso cada imagen estará rodeada por su propio item de lista.
<div class="image_thumb"><ul><li><a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h2>Título</h2><small>Fecha</small><p>Copiar</p></div></li></ul> </div>

Paso 2 – CSS

Ahora vamos a personalizar el rotador con CSS:

Zona main_image CSS

.main_image {
	width: 598px;
	height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;
	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 10px;
	margin: 0;
}
.block small {
	font-size: 1em;
	padding: 0 0 0 20px;
	background: url(icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse {
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px;
	width: 93px;
	text-indent: -99999px;
	position: absolute;
	top: -27px;
	right: 20px;
}
.main_image a.show {background-position: left bottom;}

Zona image_thumb CSS

.image_thumb {
	float: left;
	width: 299px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;
}
.image_thumb img {
	border: 1px solid #ccc;
	padding: 5px;
	background: #fff;
	float: left;
}
.image_thumb ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0;
	padding: 12px 10px;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active {
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 1.5em;
	margin: 5px 0;
	padding: 0;
}
.image_thumb ul li .block {
	float: left;
	margin-left: 10px;
	padding: 0;
	width: 170px;
}
.image_thumb ul li p{display: none;}/*--Esconde la descripción de la lista de items--*/

Paso 3 – JQuery

Ver descripción de la imagen y establecer opacidad en el bloque

Para desaparecer con opacidad la descripción de una imagen escondida mediante CSS, hay que utilizar este código JQuery:

$(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Establecer opacidad

Click y Hover para una imagen de la lista

El siguiente código cambia la zona de la imagen principal cuando se haya clickado en un item de la lista de imágenes -image_thumb-. Cada línea de código contiene su explicación sobre que ocurre en cada proceso:

$(".image_thumb ul li:first").addClass('active'); //Añade la clase active

$(".image_thumb ul li").click(function(){

//Set Variables

var imgAlt = $(this).find('img').attr("alt"); //Obtener tag Alt de la imagen

var imgTitle = $(this).find('a').attr("href"); //Obtener la dirección de la imagen principal

var imgDesc = $(this).find('.block').html();  //Obtener el HTML del bloque contenedor

var imgDescHeight = $(".main_image").find('.block').height(); //Encontrar la altura del bloque

if ($(this).is(".active")) {  //Si la lista está activa/seleccionada, después...

return false; // Previene animaciones repetitivas en la lista de item activo/seleccionado

} else { //Si no está activa, después...

//Animar la descripción

$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Desplaza el bloque hacia abajo(margen negativo del bottom con su propia altura$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250 ); //Intercambia el html del bloque, después desplaza el contenedor del bloque hacia arriba y le añade opacidad

$(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Cambia de imagen principal (URL + tag alt)

});

}

//Ver la lista de los items activos

$(".image_thumb ul li").removeClass('active'); //Elimina la clase 'active' de todos los items de la lista

$(this).addClass('active');  //Añade clase 'active' a la lista seleccionada

return false;

}) .hover(function(){ //Efecto hover en los items de la lista

$(this).addClass('hover'); //Añade la clase 'hover' cuando el cursor se pone encima

}, function() {

$(this).removeClass('hover'); //Elimina la clase 'hover' cuando el cursor deja de ponerse encima

});

En cada click, muestra u oculta la descripción:

$("a.collapse").click(function(){ 	$(".main_banner .block").slideToggle(); //Activa la descripción (desplazamiento abajo y arriba) $("a.collapse").toggleClass("show"); //Activa el nombre de la clase de 'show' (la pestaña oculta/mostrada) });

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Finalmente podemos ver un ejemplo de su funcionamiento:

Vía | SohTanaka

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Pestañas simples con CSS y JQuery

• Galería con efecto de escala de grises mediante CSS y JQuery

• Bonito menú realizado con CSS & JQuery

Una galería interactiva nos permitirá mostrar a nuestros usuarios una pequeña descripción al lado de la imagen cuando situen el cursor encima de dicha imagen.

El método para crear esta galería es muy sencillo, su estructura es mediante listas (<ul><li></li></ul>).

El código es completamente personalizado, por lo que podremos incluir o eliminar cualquier información que queramos acerca de la imagen.

Para crear esta galería interactiva deberemos seguir estos pasos:

Incluir este código CSS en nuestro documento:

ul#gallery, #gallery ul{
list-style-type: none;
margin: 0;
padding: 0;
}

ul#gallery>li{
float: left;
padding: 10px;
margin: 10px;
width: auto;
height: auto;
border: 1px solid transparent;
}

ul#gallery>li ul{
padding: .8em;
/*margin-top: 50px;*/
border: 1px solid #000;
background-color: #fff;
color: #000;
font-size: 90%;
max-width: 40%;
display: none;
position: absolute;
}

ul#gallery>li ul li{
margin-top: 2px;
}

ul#gallery>li:hover{
color: #369;
background-color: transparent;
border-color: #369;
}

ul#gallery>li:hover ul{
display: block;
list-style-type: none;
}

ul#gallery ul:before{
content: "Image Information";
font-size: 130%;
font-weight: bold;
border-bottom: 1px solid #999;
display: block;
}

ul#gallery ul:after{
content: "(click to view the larger version of this image)";
font-size: 90%;
text-align: right;
border-top: 1px solid #999;
display: block;
margin-top: 1em;
}

ul#gallery img{
width: 48px;
height: 48px;
display: block;
}

img,a img{
border: 0;
}

ul#gallery:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}

/*
div.clear{
clear: both;
}*/

Hay que aclarar que esta galería se creó hace mucho tiempo y ahora algunas propiedades han dejado de usarse, así que desafortunadamente no validará nuestro código CSS.

El código HTML sería:

<ul id="gallery">

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 87Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: A newt that's green in color.</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 86Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>

<li><strong>Description</strong>: An amphibian. A green amphibian. An animal.</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 86.5Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: A four-legged creature that crawls in the wild. Though it may look scary, a newt will cause no harm to human beings. It won't eat us, okay?</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>Author</strong>: <a href="http://cheeaun.phoenity.com/">Lim Chee Aun</a></li>
<li><strong>File Size</strong>: 87.1Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: This image/icon is based on the original icon of Mozilla 1.0. Since this icon is created from scratch, it's not owned by <a href="http://mozilla.org/">mozilla.org</a>. It's mine  </li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 86.7Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: Gosh.. I don't know how to describe this image..</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: N/A</li>

<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: At last...</li>
</ul></li>

</ul>

Ya está, como siempre aclarar que todo se puede personalizar de acuerdo a nuestro gusto.

Se puede ver un ejemplo de su funcionamiento en la página de su creación.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Añadir un icono de “cargando” en tus imágenes con CSS

• Galería con efecto de escala de grises mediante CSS y JQuery

• Aumentar imágenes con CSS