JMiur [E]

Deluxe Blog Tips nos muestra una forma de crear un slider de imágenes utilizando sólo CSS3. La idea es bastante simple pero, el problema es que no funcionará en ninguna versión de Internet Explorer ya que utiliza un selector que ese navegador aún no ha implementado. Del mismo modo, el resultado en Firefox no es tan interesante como lo es en Chrome, Safari y Opera ya que habrá que esperar a que salga la version 3.7 para que las transiciones se vean animadas.

Claro que todo esto no implica que no podamos jugar un rato y empezar a acostumbrarnos a lo que vendrá.

El slider lo creamos fácilmente:
<div id="elSlider">
<img id="imgSlider1" src="URL_imagen_1" />
<img id="imgSlider2" src="URL_imagen_2" />
<img id="imgSlider3" src="URL_imagen_3" />
</div>
<div id="numSlider">
<a href="#imgSlider1">1</a>
<a href="#imgSlider2">2</a>
<a href="#imgSlider3">3</a>
</div>
Y ahora, el CSS del demo:
<style>
#elSlider {
background-color: #000;
height: 350px;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 450px;
/* propiedades CSS3 */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 0 30px #666 inset;
-webkit-box-shadow: 0 0 30px #666 inset;
box-shadow: 0 0 30px #666 inset;
}
#elSlider img {
height: 300px;
left: -450px;
opacity: 0;
position: absolute;
top: 25px;
width: 400px;
z-index: 1;
/* propiedades CSS3 */
-moz-transition: all linear 500ms; /* Firefox 3.7 */
-webkit-transition: all linear 500ms; /* Safari y Chrome */
-o-transition: all linear 500ms; /* Opera */
transition: all linear 500ms; /* w3org */
}
#elSlider img:target {
left: 25px;
opacity: 1;
z-index: 9;
}
#elSlider img:first-child {
left: 25px;
opacity: 1;
}
#numSlider {
text-align: center;
}
#numSlider a {
background-color: #000;
border: 1px solid #444;
color: #FFF;
font-family: Century Gothic;
font-size: 24px;
font-weight: normal;
margin: 0 1px;
padding: 1px 10px 3px;
text-decoration: none;
/* propiedades CSS3 */
-moz-box-shadow: 0px 0px 20px #444 inset;
-webkit-box-shadow: 0px 0px 20px #444 inset;
box-shadow: 0px 0px 20px #444 inset;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#numSlider a:hover {
background-color: #222;
border: 1px solid #666;
}
</style>

11 comentarios:

La hormiguita  

Está muy bueno lástima el tema de los navegadores.... :(

Responder
JMiur  

Hay que tener paciencia, ya vendrán tiempos mejores :D

Responder
Gem@  

Cualquier cosa, cualquier efecto, todo lo que se consiga con CSS tiene un valor incalculable así que guardaremos las ideas en el saco de la paciencia.

Responder
Unknown  

Queremos Compatibilidad, Queremos Compatibilidad :P

Responder
JMiur  

Gem@: guardaremos las ideas en el saco de la pacienci PERFECTO :D

Graciela: Queremos Compatibilidad YA :D

Responder
Bocha  

JMiur, te comento... coloque en mi blog iconos de redes sociales (en los posteos), y entre ellos esta el de blogger... pero ese no me anda como quiero... osea... quiero que ande como lo hace el icono de blogger de este blog http://www.ticespor.com cuando lo tocas te manda a "blog this" o algo asi y yo quiero que el mio ande igual...

Responder
JMiur  

Ese blog utiliza los botones de Blogger mismo. Fíjate en esta entrada

Responder
Loren  

Yo en mi blog también tengo un Image Slider. En mi opinión, está más desarrollado que el que nos propone Jmiur. Pueden pasar a verlo en http://www.puntodepenalti.com/

Responder
Marcos Gabriel  

tb conhecia esta esta funcionaliade ..
Com ela podemos tambem criar conteudo em abas , com um pouco de pesquisa da para achar um pequeno JS para que funcione tambem no ie

Responder
JMiur  

Loren:
Acá no se propone absolutamente nada, sólo se muestran cosas que existen.

Responder
Allan Fixnet Uster  

Amigo por causa de um { eu não conseguia montar o belissimo menu em css!
Muito obrigada amigo lindo!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR