Imagenes con css – css3

#contenedor{
padding:10px;
text-align:center;
width:100%;
border-radius:5px;
margin:10px auto;
border:solid 1px #DEDEDe;
background:-moz-linear-gradient(#dedede 0%, #000 100%);
background:-moz-linear-gradient(#dedede 0%, #000 100%);
background:-ms-linear-gradient(#dedede 0%, #000 100%);
background:-o-linear-gradient(#dedede 0%, #000 100%);
background:-webkit-linear-gradient(#dedede 0%, #000 100%);
}
img{
background:#999;
transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
border:solid 5px rgba(204,204,204,0.3);
background-clip:padding-box;
border-radius:5px;
margin-left:10px;
cursor:pointer;
transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
width:10%;
height:50px;
}
img:hover{
transform:scale(1.8,1.8);
-moz-transform:scale(1.8,1.8);
-o-transform:scale(1.8,1.8);
-ms-transform:scale(1.8,1.8);
-webkit-transform:scale(1.8,1.8);

box-shadow:0 0 15px #ffF;
-moz-box-shadow:0 0 15px #ffF;
-ms-box-shadow:0 0 15px #ffF;
-o-box-shadow:0 0 15px #ffF;
-webkit-box-shadow:0 0 15px #ffF;
}
/*mas codigo con el mismo ejemplo */
#img2{
background:#999;
transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
border:solid 5px rgba(204,204,204,0.3);
background-clip:padding-box;
border-radius:5px;
margin:0px;
cursor:pointer;
transform:skew(10deg,20deg);
-moz-transform:skew(10deg,20deg);
-ms-transform:skew(10deg,20deg);
-o-transform:skew(10deg,20deg);
-webkit-transform:skew(10deg,20deg);
width:10%;
height:50px;
}
#img2:hover{
transform:scale(1.8,1.8);
-moz-transform:scale(1.8,1.8);
-o-transform:scale(1.8,1.8);
-ms-transform:scale(1.8,1.8);
-webkit-transform:scale(1.8,1.8);
box-shadow:0 0 15px #9F0;
-moz-box-shadow:0 0 15px #9F0;
-ms-box-shadow:0 0 15px #9F0;
-o-box-shadow:0 0 15px #9F0;
-webkit-box-shadow:0 0 15px #9F0;
}
#img3{
background:#999;
transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
border:solid 1px rgba(204,204,204,0.3);
background-clip:padding-box;
border-radius:5px;
margin:0px;
cursor:pointer;
transform:skew(40deg,-20deg);
-moz-transform:skew(40deg,-20deg);
-ms-transform:skew(40deg,-20deg);
-o-transform:skew(40deg,-20deg);
-webkit-transform:skew(40deg,-20deg);
width:80px;
height:50px;
}
#img3:hover{
transform:translate(-20px,20px);
-moz-transform:translate(-20px,20px);
-ms-transform:translate(-20px,20px);
-o-transform:translate(-20px,20px);
-webkit-transform:translate(-20px,20px);
width:20%;
box-shadow:0 0 15px #0F0;
-moz-box-shadow:0 0 15px #0F0;
-ms-box-shadow:0 0 15px #0F0;
-o-box-shadow:0 0 15px #0F0;
-webkit-box-shadow:0 0 15px #0F0;
height:60px;
margin:0px;
}
#codigo{
background:#999;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:10px;
color:#FFF;
}

Imágenes con css,css3

Hola amigos en esta nueva entrada vamos a aprender a manipular imágenes con css en todos sus sentidos, sabemos que las imágenes son muy utilizadas en los sitios web tanto para darle un diseño mucho más elegante como para acompañar datos con una representación grafica.

Para manipular las imágenes con css nos vamos a centrar principalmente en la nueva actualización de css o sea CSS3 ya que con esta nueva actualización podemos experimentar una gran variedad de propiedades que antes no podíamos crear.

Si no leíste el mini-tutorial de cómo crear un menú parte2 y no sabes manejar las propiedades de css3 tanto para hacer animaciones como para darle estilos a los elementos entonces te recomiendo que le eches un vistazo porque son las mismas propiedades que vamos a utilizar para manipular nuestras imágenes.

Vamos a ver ejemplos de lo que queremos lograr con este mini-tutorial de imágenes con css.

  • Ejemplo 1





  • Ejemplo 2





  • Ejemplo 3





  • Si te fijaste en hicimos varias vistas distintas y con una animación diferente y con un aspecto dinámico, como siempre aquí no hemos visto nada nuevo las propiedades de animaciones de css3 ya la vimos en el post anterior de cómo crear un menú parte2 que vuelvo y te insisto si no la has leído es necesario para que puedas aprender a crear estas animaciones que le eches un vistazo.

    Bueno ahora veamos lo que hicimos, primero insertamos 6 imágenes en nuestro documento HTML.

    <h2>Imagenes con css ejemplo 1</h2>
    <div id=”contenedor”>
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-1.jpg”/>
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-2.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-3.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-4.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-5.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-6.jpg” />
    </div>
    <h2>Imagenes con css ejemplo 2</h2>
    <div id=”contenedor”>
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-1.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-2.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-3.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-4.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-5.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-6.jpg” />
    </div>
    <h2>Imagenes con css ejemplo 3</h2>
    <div id=”contenedor”>
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-1.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-2.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-3.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-4.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-5.jpg” />
    <img src=”http://comocrearmiweb.laexplosionmusical.com/imagenes-con-css-6.jpg” />
    </div>

    Ahora en la hoja de estilo css creamos un código base para nuestras tres vistas diferentes al que solo le fuimos cambiando las propiedades css.

    #contenedor{
     padding:10px;
     text-align:center;
     width:80%;
     border-radius:5px;
     margin:10px auto;
     border:solid 1px #DEDEDe;
     background:-moz-linear-gradient(#dedede 0%, #000 100%);
     }
    img{
     border-radius:5px;
     background:#999;
     transition:all 1s;
     border:solid 5px rgba(204,204,204,0.3);
     background-clip:padding-box;
     border-radius:5px;
     margin-left:10px;
     cursor:pointer;
     transform:rotate(10deg);
     width:10%;
     height:50px;
      }
     img:hover{
      transform:scale(1.8,1.8);
      box-shadow:0 0 15px #ffF;
      }

    Entonces que vamos hacer para cada uno de los ejemplos, simple solo vamos a modificarlo yo en este caso solo les voy a cambiar algunas líneas de código CSS3, el primer ejemplo ya el código está arriba entonces miramos a ver qué tiene de nuevo el segundo.

    En el segundo solo sustituimos la línea transform:rotate(10deg); por la línea de transform:skew(10deg,20deg); para darle un estilo más acostado a la imagen.

    En el tercer ejemplo dejamos todo igual que en la segundo solo en esta vamos a modificar el hover para que el efecto se produzca al Pasar el mouse por encima el código para este tercer ejemplo es.

    #img:hover{
     transform:translate(-20px,20px);
     width:20%;
     box-shadow:0 0 15px #0F0;
     height:60px;
     margin:0px;
       }

    Con estos terminamos de describir los tres ejemplos que les puse en la parte superior del tutorial, como siempre te recomiendo que cambies el código que le coloques propiedades nuevas y que lo rediseñe a tu gusto que así es como se van obteniendo conocimientos y creando la base para ir aprendiendo cada día mas…


    (adsbygoogle = window.adsbygoogle || []).push({});

    Gracias por leer el tutorial y hasta una próxima entrada como siempre si tienes dudas o sugerencias o alguna inquietud no dudes en dejarnos tus comentarios…

    Comments

    1. By Carlos

    Deja un comentario

    Tu dirección de correo electrónico no será publicada.