Image Silider usando sólo CSS3

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>

123456