• Imagen efectos

     


     

  •  

    Efectos para imagen

    1. http://pourquoipas732.eklablog.com/details-article
    2. http://pourquoipas732.eklablog.com/deplacement
    3. http://pourquoipas732.eklablog.com/clic-sur
    4. http://pourquoipas732.eklablog.com/page-par
    5. http://pourquoipas732.eklablog.com/variante
    6.  http://pourquoipas732.eklablog.com/variante
    7.  Hover
    8. 9 ejemplos de efectos  
    9. 55 efemplos de efectos
    10. http://www.marcofolio.net/css/
        a. Para imagen con texto
    11. Esquina doblada (tener cuidado con este código)
    12. Efecto "Temblor"
    13. Para texto, imagen, código
    14.  Varios efectos(acordeón, menu...) 
    15. http://cssdeck.com/-folded-corner-effect-with-animations
    16. http://cssdeck.com/labs/jquery-fade-in-on-scroll
    17. Rotación
    18. http://cssdeck.com/labs/css3-window
    19. http://cssdeck.com/labs/pure-css3-page-flip-effect
    20. http://-reflections-on-animated-3d-glossy-elements
    21. http://cssdeck.com/labs/turntable
    22. http://redeando.blogspot.com.es/2013/02/galeria
    23. http://codepen.io/amyfu/pen/zBcfJ
    24. http://www.creativejuiz.fr/blog/ danimations-simples-en-css3
    25. http://cssdeck.com/labs/css3-animation-effects-demos
    26. http://cssdeck.com/labs/sweet-image-zoom-effects
    27. http://cssdeck.com/labs/css3-proximity-effect-layout
    28. http://cssdeck.com/labs/simple-css-image-carousel
    29. http://cssdeck.com/labs/jgsg6wjt
    30. http://cssdeck.com/labs/list-curls
    31. http://cssdeck.com/labs/collage
    32. http://cssdeck.com/labs/pure-css-image-slider
    33. http://cssdeck.com/labs/imagefilter
    34. http://cssdeck.com/labs/pure-css-featured-image-slider
    35. http://cssdeck.com/labs/3-d-photo-gallery
    36. http://cssdeck.com/labs/pure-css-slider-target
    37. Imagen con texto
    38. http://cssdeck.com/labs/pure-css3-slideshow-without-page-jump
    39. http://cssdeck.com/labs/css3-stacks-with-pseudo-elements
    40. Imagen con texto 
    41. Acordeón imagen, texto
    42. http://cssdeck.com/labs/solitary-css3-slider-rotation-transition
    43. 9 efectos para imagen , texto
    44. Efecto "Blur"
    45. http://cssdeck.com/labs/nyafuite
    46. Galeria con tres efectos
    47. http://tympanus.net/codrops/2011/12/26/css3-lightbox/
    48.  http://www.freshdesignweb.com/css3-tutorials-examples.html/2
    49. http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html
    50.  http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
    51. http://tympanus.net/codrops/2011/12/26/css3-lightbox/
    52. Zoom con Java
    http://www.ciudadblogger.com/2012/04/aumentar-imagenes-al-pasar-el-cursor.html
    53. http://www.cssauthor.com/jquery-css3-hover-effects/
    54. http://codepen.io/anon/pen/ByeWPX
    55. Para imagen y texto

     

     


    votre commentaire
  •  


    Opacidad y zoom
    <div class="hovergallery">
    <img src="URL imagen 1" /><img src="URL imagen 2" /><img src="URL imagen 3" /><img src="URL imagen 4" /><img src="URL imagen 5" /><img src="URL imagen 6" /></div>
    <style type="text/css">
    /*GloriaV */
    /*URL: http://tutorialgloriav.eklablog.com/*/
    .hovergallery img{ -webkit-transform:scale(0.8);
    border-radius: 5%;
    border: 1px dotted #000;
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
    }.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
    >-o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    box-shadow:3px 3px 10px #000; /*Sombra sobre toda la imagen*
    /-webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:3px 3px 10px #000;
    -ms-box-shadow:3px 3px 10px #000; opacity: 1
    ;}
    </style>

     


    votre commentaire
  •  


    Giro 1  Fuente


    1ª opción

    <div class="morphaizum pic"><img style="border: 0px solid #0033c7; -webkit-border-radius: 5%/10%; -moz-border-radius: 5%/10%; border-radius: 5%/10%; -webkit-box-shadow: #000 3px 3px 9px; -moz-box-shadow: #000 3px 3px 9px; box-shadow: #000 3px 3px 9px;" src="http://virtuellife.v.i.pic.centerblog.net/0a1f3400.gif" alt="" width="235" height="199" /></div>
    /*MORPH*/ .morphaizum { 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease; transition: all 0.5s ease; }
    .morphaizum:hover {
    -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);
    transform: rotate(360deg);}

    2ª opción   Demo

    <table><tbody><tr><td><div class="morphaizum pic"><img src="http://ekladata.com/aYrkmDLrZIt4qOczZlPkKs08jqA@230x220.gif" alt="" width="230" height="220" /></div></td><td><div class="morphaizum pic"><img src="http://stat18.privet.ru/lr/0a13684e7bf1781b216364f17e6d16d8" alt="" width="230" height="220" /></div></td></tr></tbody></table>
    /*MORPH*/ .morphaizum {margin: 20px 10px 15px 20px; border: 1px dotted #84909A; border-radius:4px;box-shadow: 2px 2px 10px #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease; transition: all 0.5s ease; }
    .morphaizum:hover {
    -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);
    transform: rotate(360deg);}

     


    votre commentaire
  •  


    Cubo de tres lados. Fuente

    <div id="contenedorcubo"> <div class="cube"> <div class="face top"><img src="https://lh4.googleusercontent.com/-jZ4bK-AUgQM/VN8nHOE7UpI/AAAAAAABcaY/mLgFBqzupQk/s96-no/1.gif" alt="" width="100" height="100" /></div> <div class="face left"><img src="https://lh3.googleusercontent.com/-So71bObzxx4/VN81EN8An0I/AAAAAAABcbI/hN7z7qZfqns/s102-no/1.gif" alt="" width="100" height="100" /></div><div class="face demoright"><img src="https://lh4.googleusercontent.com/-J7NW24qWA34/VN8oqWUXPZI/AAAAAAABcas/kHt9v8sXUSk/w81-h71-no/2.gif" alt="" width="100" height="100" /></div> </div></div>
    <style>
     : 250px;height: 250px;position: relative;float:center;}      
         .cube {
    position:relative;
    top: 0px;
    left: 0px;
    }
    .face {
    position: absolute;
    width: 100px;
    height: 100px;
    overflow: hidden;
    font-family: monospace;
    font-size: 24px;
    }
    .top {
    top: 0;
    left: 89px;
    background: #fff;
    color: ;
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
    }
    .left {
    top: 77px;
    left: 44px;
    background: #fff;
    color: ;
    -webkit-transform: rotate(15deg) skew(15deg, 15deg);
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
    }
    .demoright {
    top: 77px;
    left: 133px;
    background: ;
    color: ;
    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
    }
    </style>

     


    votre commentaire
  •  


    Giro 2

    <div class="imagerotate"><img style="width: 215px; height: 208px; margin-left: 3px; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; box-shadow: 5px 5px 3px 1px;" title="Con amor. GloriaV" src="https://lh5.googleusercontent.com/-vfQHss3g3ww/U9TiqQuV-yI/AAAAAAAAtKQ/1D0M4ADFct0/w240-h320-no/13.gif" alt="" width="205" height="260" /> <img style="width: 215px; height: 208px; margin-left: 3px; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; box-shadow: 5px 5px 3px 1px;" title="Con amor. GloriaV" src="http://file.mobilmusic.ru/d9/43/4e/1250804.gif" alt="" width="205" height="260" /></div>
    .imagerotate img {-moz-border-radius:5px; 
    -moz-transition: -moz-transform 1s ease 0s; 
    background:#B292A9 !important; 
    border: 1px solid #ffffff !important; 
    border-radius: 5px 5px 5px 5px; 
    height: 150px; margin: 5px; 
    padding: 0px; 
    position: relative; 
    width: 220px; 



    .imagerotate img:hover { 
    background:#AD184E !important; 
    -moz-transform:rotate(5deg); 
    -o-transform:rotate(5deg); 
    -webkit-transform:rotate(5deg); 
    -ms-transform:rotate(15deg); 

    div.sube_imagen img{ 
    border: 2px solid #000; 
    float: left; 
    margin-left: 20px; 
    -webkit-transition: margin 0.5s ease-out; 
    -moz-transition: margin 0.5s ease-out; 
    -o-transition: margin 0.5s ease-out; } 
    div.sube_imagen img:hover { 
    margin-top: 6px; }

     


    votre commentaire
  •  


    Opacidad    Fuente

     

     <a class="opacity" href=""><img src="http://laranaroja.com/wp-content/uploads/2012/08/gif-animado-gracioso-entrenador-monitor-de-windsurf-tocar-culo.gif" alt="" /></a>  
    /* Efecto opacidad en la imágenes en Aizum Blog */ 
    /*GloriaV */
    /*URL: http://tutorialgloriav.eklablog.com/*/
    a.opacity img { filter:alpha(opacity=50); 
    border: 2px dotted #fff;
    border-radius: 1em/1em;
    box-shadow: 3px 2px 6px #000000;
    -moz-opacity: 0.5; opacity: 0.5; 
    -khtml-opacity: 0.5; } 
    a.opacity:hover img { 
    filter:alpha(opacity=100); 
    -moz-opacity: 1.0; opacity: 1.0; 
    -khtml-opacity: 1.0; }
     

     


    votre commentaire
  •  


    Sombra y bordes para todos imágenes
    .module_titre {
    text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#fff,2px 3px 3px #000,1px 3px 2px #B6B6B6;
    }
    #header {border-radius:10%; }
    .module_contenu img {margin: 20px 10px 15px 20px; border: 1px dotted #84909A; border-radius:10%;box-shadow: 2px 2px 10px #000;}




    votre commentaire
  •  


     <div class="aumenta_imagen"><img src="https:jpg" width="250"alt="" /> <img src="http:jpg" width="250" alt="" /></div>
    div.aumenta_imagen img{ 
    border: 2px solid #fff;
    border-radius: 1em/1em;
    box-shadow: 3px 2px 6px #000000;
    height: 170px;
    width: 230px;
    margin: 15px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease; }
    div.aumenta_imagen img:hover {
    height: 128px;
    width: 202px;
    border-radius: 20px;
    margin-left: -30px; }

    votre commentaire
  •  


    Hover 1   

     

    <div class="hovergallery"><img src="http://katka5212.bloglap.hu/kepek/201401/uj018.gif" alt="" width="180" height="250" /> <img src="https://lh5.googleusercontent.com/-uZasZsRKh28/U1p5I5BUK6I/AAAAAAAATFw/dQF71VljcS0/w569-h444-no/5.gif" alt="" width="200" height="200" /> <img src="http://dl4.glitter-graphics.net/pub/1024/1024014p7fz7jhlrw.gif" alt="" width="200" height="200" /> <img src="https://lh4.googleusercontent.com/-3IMVihieIkM/U9jVrwtOruI/AAAAAAAAwZQ/Zq4EeFiDQj0/w457-h500-no/656059024.gif" alt="" width="200" height="200" /></div>
    <style type="text/css"><!-- /*Credits: Dynamic Drive CSS Library */    /*URL: http://www.dynamicdrive.com/style/ */   .hovergallery img{ 
    border: 2px solid #fff;
    border-radius: 1em/1em;
    box-shadow: 3px 2px 6px #000000;
    -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ 
    -moz-transform:scale(0.8); /*Mozilla scale version*/  
    -o-transform:scale(0.8); /*Opera scale version*/  
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/  
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/  
    -o-transition-duration: 0.5s; /*Opera duration version*/  
    opacity: 0.7; /*initial opacity of images*/ 
    margin: 0 10px 5px 0; /*margin between images*/  
    }  
      
    .hovergallery img:hover{  
    -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
     
    -moz-transform:scale(1.1); /*Mozilla scale version*/  
    -o-transform:scale(1.1); /*Opera scale version*/  
    box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ 
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ 
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/  
    opacity: 1; 
    }  
    --></style>
     

     


    votre commentaire
  •  

    Hover. Con imagen para fondo
    Fuente
     













    <div id="container"><div id="cabecera">&nbsp;</div><div id="contenido"><ul class="efectos"><li><img src="http://senderosdeiluminacion.bligoo.com/media/users/16/814428/images/public/187154/1325488685529-DEVI_SARASVATI_by_VISHNU108.gif?v=1325488806005" alt=" " width="200" height="190" /><hr /></li><li><img src="http://fc05.deviantart.net/fs70/f/2011/330/3/2/shiva_temple_by_vishnu108-d4hcvmg.gif" alt=" " width="200" height="190" /><hr /></li></ul></div></div> 
    <style type="text/css"><!--
    body { background:#ffffff url(https://lh4.googleusercontent.com/-QVeub426KUE/U-Cuu1VAosI/AAAAAAAA0Us/vqAuDzatiJQ/w289-h149-no/2.gif) repeat top left; font-family:'Yanone Kaffeesatz', sans-serif;
    font-size:62.5%;
    margin:0;
    padding:0
    }
    ul.efectos {
    position:relative;
    margin:0;
    padding:0
    }
    ul.efectos li {
    background:#ffffff url(https://lh4.googleusercontent.com/-QVeub426KUE/U-Cuu1VAosI/AAAAAAAA0Us/vqAuDzatiJQ/w289-h149-no/2.gif) no-repeat center center; position:relative;
    list-style:none;
    width:200px;
    height:190px;
    overflow:hidden;
    border:2px solid #FFF;
    border-radius:8em/3em;
    float:left;
    -webkit-box-shadow:0 0 10px #333;
    -moz-box-shadow:0 0 10px #333;
    -ms-box-shadow:0 0 10px #333;
    -o-box-shadow:0 0 10px #333;
    box-shadow:0 0 10px #333;
    margin:0 20px 40px;
    padding:0
    }
    ul.efectos li:hover img {
    >-webkit-transform:scale(6);
    -moz-transform:scale(6);
    -ms-transform:scale(6);
    -o-transform:scale(6);
    opacity:0
    }
    --></style>

    votre commentaire
  •  

      Para texto, imagen...     Fuente
      • Para texto o para imagen












    <ul class="blocks"><li><div class="popup"><img src="http://www.picgifs.com/glitter-gifs/i/i-love-you/picgifs-i-love-you-1412852.gif" alt="" width="145" height="115" /></div> </li><ul class="blocks"><li> <p>Para texto o para imagen</p><div class="popup"> <p>Texto.</p></div></li></ul></ul>
    <style type="text/css"><!--
    @import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic); 
    >html {
    font-family:'Noto Sans', serif;
    }
    .blocks {
    margin: auto;
    max-width:1070px;
    padding:0;
    }
    .blocks li {
    color: #000;
    background-color: #eed6ac;
    cursor:default;
    float:left;
    list-style:none;
    margin:1%;
    padding:60px 0;
    position:relative;
    text-align:center;
    transition:.3s cubic-bezier(.3,0,0,1.3);
    width:31%;
    border-radius: 5%/10%;
    font-weight: bold;
    }
    .blocks li:hover {
    transform:scale(.7);
    z-index:3000;
    }
    .popup {
    background-color: inherit;
    color:#000;
    height: 100%;
    width:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    padding: 15px;
    border-radius: 5%/10%;
    transition:.3s cubic-bezier(.3,0,0,1.37);
    }
    .popup span {
    font-size:12px;
    font-weight: normal;
    left:0;
    padding:15px 25px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    }
    .popup h3 {
    font-size:13px;
    margin:0 0 5px;
    padding:0;
    }
    .blocks li:hover .popup {
    opacity:1;
    transform:scale(2);
    box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
    }
    --></style>

     


    votre commentaire
  •  

    <ul class="contenedor">
    <li class="elemento3d n1"><img src="https://lh3.googleusercontent.com/-r0_rnH6EA88/U9Y2SKOQ2AI/AAAAAAAAt8I/nJRvLgzbUp0/w240-h320-no/1175362.gif" alt="" width="124" height="166" /></li>
    <li class="elemento3d n2"><img src="https://lh4.googleusercontent.com/-kFpT5HvGjqU/U9Y3x1rOVoI/AAAAAAAAt-A/mASyABcItak/w240-h320-no/1173736.gif" alt="" width="124" height="166" /></li>
    <li class="elemento3d n3"><img src="https://lh5.googleusercontent.com/-g8ZX9BZjPLk/U9Y5wNDioCI/AAAAAAAAuCk/RY_Kh5KI3cg/w240-h320-no/1170601.gif" alt="" width="124" height="166" /></li>
    </ul>
    <style><!--
    .n1{transform: rotate3d(0, 0, 1, 20deg);}
    .n2{transform: rotate3d(0, 1, 0, 20deg);}
    .n3{transform: rotate3d(1, 0, 0, 20deg);}
    .n4{transform: rotate3d(1, 0, 1, 40deg);}
    .n5{transform: rotate3d(1, 0, 0, 40deg);}
    .contenedor {
      padding: 0;
      margin: 0 auto;
      list-style: none;
      display: flex;
      flex-direction :row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items:center;
      height:300px;width:460px;
      perspective:400px;
    }
    .elemento3d{
      text-align:center center;
      padding: 40px;cursor:pointer;
      border: 2px dotted #ccc;
    border-radius: 10px;
    box-shadow: 3px 2px 6px #000000;
      line-height: 10px;
      color: white;
      font-weight: bold;
      font-size: 40px;
      width:40px;
      background-color:#fff;
      -webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.75);
      box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.75);
    }
    .elemento3d:hover{
     transform: rotate3d(0, 0, 0, 30deg); 
    }
    --></style>

     


    votre commentaire
  •  

    Hover para todos imágenes
    #content img:hover{
      opacity: 1;
      -webkit-box-shadow: 0px 0px 15px #000000;
      box-shadow: 0px 0px 50px #000000;
      }
      #content img {  -webkit-border-radius: 00px;
      border-radius: 00px;
      -webkit-transition: 0.4s linear;
      transition: 0.4s linear;
    }
    .module_contenu  img:hover {opacity: 2;   -webkit-transition: 500ms;
        -webkit-transform: rotate(10deg);
        border-radius: 5px 25px 5px 25px;
        }

     


    votre commentaire
  •  

      Para texto, imagen... Fuente
       Yo añadí "margin-left: 150px;" para posicionar cada imagen.
      • Con amor. GloriaV

















    <ul class="thumb">
    <ul class="thumb">
    <li><img src="http://file.mobilmusic.ru/09/68/da/803960.gif" alt="" width="150" height="180" /></li>
    <li><img src="http://file.mobilmusic.ru/63/5e/bc/1281199.gif" alt="" width="150" height="180" /></li>
    <li><img src="http://file.mobilmusic.ru/fa/66/47/699794.gif" alt="" width="150" height="180" /></li> <li>Con amor. GloriaV</li>
    </ul>
    </ul>
    <style><!--/* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */ /* por ese motivo, debo dimensionarla con width y height */ 
    ul.thumb { 
    float: left; 
    height: 400px; 
    list-style: none; 
    margin: 0; 
    position: relative; 
    width: 300px; 
    } /* cada item es una imagen que fuerzo a que se muestren pequeñas */ 
    ul.thumb li { 
    /* se posicionand e manera absoluta */ 
    position: absolute; 
    left: 80px; 
    top: 0; 
    z-index: 0; 
    /* algo de decoración */ 
    background-color: #; 
    box-shadow: 0 0 10px #444 inset; 
    padding: 4px; 
    /* el tamaño de la imagen a mostrar */ 
    height: 202px; 
    width: 150px; 
    /* la transición será el efecto */ 
    -moz-transition: all 1s ease-in-out 0s; 
    -webkit-transition: all 1s ease-in-out 0s; 
    -o-transition: all 1s ease-in-out 0s; 
    } 
    ul.thumb li img { 
    height: 100%; 
    width: 100%; 
    } 
    
    /* cada item se posiciona y se rota a gusto */ 
    ul.thumb li:nth-child(1) { 
    -moz-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    -o-transform: rotate(20deg); 
    margin-left: 150px;
    margin-top: 0px; 
    } 
    ul.thumb li:nth-child(2) { 
    -moz-transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg); 
    -o-transform: rotate(-30deg); 
    margin-top: 0px; 
    } 
    ul.thumb li:nth-child(3) { 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg); 
    -o-transform: rotate(-15deg); 
    margin-left: 240px;
    margin-top: 0px; 
    } 
    ul.thumb li:nth-child(4) { 
    -moz-transform: rotate(10deg); 
    -webkit-transform: rotate(10deg); 
    -o-transform: rotate(10deg); 
    margin-left: 100px;
    margin-top: 150px; 
    } 
    /* el efecto al poner el cursor encima */ 
    ul.thumb li:hover { 
    /* se elimina la rotación */ 
    -moz-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    /* se muestra la imagen con su tamaño real */ 
    height: 275px; 
    width: 300px; 
    /* se la posiciona y se la pone en primer plano */ 
    margin-left: 0px; 
    margin-top: -50px; 
    z-index:10; 
    /* algo de decoración */ 
    border-radius: 10px; 
    padding:20px; 
    }
    --></style>

     


    votre commentaire
  •  

       Sombra multicolor


    <div class="sombra"><img style="border: 2px solid #fff; -webkit-border-radius: 1em/1em; -moz-border-radius: 1em/1em; border-radius: 1em/1em; box-shadow: 3px 2px 6px #000000;" src="https://lh6.googleusercontent.com/-aCSnJVK3FoQ/VJ2J1EwVbEI/AAAAAAABTMU/wwhJCTvM6eY/w216-h290-no/1-216x290.gif" alt="" width="145" height="229" /></div>
    <style><!--
    .sombra {
    border: 2px solid #fff;
    border-radius: 1em/1em;

    box-shadow: none;
    filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false); }
    .sombra:hover {
    width: 148px;
    height: 236px;

    webkit-box-shadow: 0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;
    moz-box-shadow: 0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;
    box-shadow:0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;

    >filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
    }
    --></style>

     


    votre commentaire
  •  

     Color - Negro 

    <div class="bwaizum pic"><img style="border: 1px dotted #707070; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; -webkit-box-shadow: 3px 2px 6px #000000; -moz-box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http:// .jpg" alt="" width="250" height="230" /></div>
    /*B&W*/.bwaizum { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; } 
    .bwaizum:hover { 
    -webkit-filter: grayscale(100%); }

     


    votre commentaire
  •  

       Tres imágenes 

    <div class="title"><img src="http://frimousse67.f.r.pic.centerblog.net/70054f10.gif" alt="" width="164" height="146" /></div>
    <div class="screen"><div class="header">    Crosses | Library | New Packs  </div>  <div class="cube blue">    <div class="title">      SOMEBODY THAT U USED TO KNO      <span>GYOTE</span>    </div>  </div>  <div class="cube red">    <div class="title">    2 MILLION    <span>AVICII</span>    </div>  </div>  <div class="cube next">    <div class="title">      SHAKE DAT      <span>SAVAGE</span>    </div>  </div>  <div class="cube nextNext">    <div class="title">      NEXT SONG 0.9 OPACITY      <span>nextsongartist</span>      </div></div></div>
    h1, h3 {
    color:#;
    font-family:sans-serif;
    }

    .screen {
    background:#;
    width:506px;
    height:270px;
    overflow:hidden;
    position:relative;
    -webkit-perspective:400px;
    }

    .cube {border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    position:absolute;
    }
    .cube .title {
    color:#;
    font-family:sans-serif;
    font-weight:lighter;
    padding:3px;
    }
    .title span {
    display:block;
    font-size:12px;
    padding-top:3px;
    }

    .red {
    background:#;border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    top:50px;
    left:278px;
    -webkit-transform-origin: right center;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    z-index:50;
    }

    .blue {
    background:#;border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    top:50px;
    left:78px;
    -webkit-transform-origin: left center;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    z-index:50;
    }

    .header {
    background:#;border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    position:absolute;
    top:-20px;
    height:10px;
    line-height:10px;
    color:#fff;
    font-weight:bold;
    font-family:sans-serif;
    text-align:center;
    width:0%;
    opacity:0.8;
    -webkit-transition: -webkit-transform 0.5s ease;
    }

    .screen:hover .red {border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    -webkit-transform: rotateY(-70deg) translateX(150px) translateY(24px) translateZ(50px);
    }
    .screen:hover .blue {border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    -webkit-transform: rotateY(70deg) translateX( -150px ) translateY(24px) translateZ(50px); }

    .screen:hover .header {border: 2px dotted #fff;
    border-radius: 1em;
    box-shadow: 3px 2px 6px #000000;
    -webkit-transform: translateY(40px);
    }

    .screen:hover .next {border: 2px dotted #fff;
    border-radius: 1em/1em;
    box-shadow: 3px 2px 6px #000000;
    opacity:1;
    margin-top:0px;
    }

    .next {
    background:#;
    top:50px;
    left:178px;
    -webkit-transform-origin: left center;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.6s ease-in-out;
    z-index:1;
    -webkit-transform: translate3d( -50px, 400px, -800px );
    opacity:0.4;
    }
    .screen .next {
    -webkit-transform: translate3d( 0px, 20px, 0px );
    box-shadow:none;
    opacity:0;
    margin-top:150px;
    } .nextNext {
    background:#;
    top:50px;
    left:178px;
    -webkit-transform-origin: left center;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.6s ease-in-out;
    z-index:100;
    -webkit-transform: translate3d( 0px, 600px, 600px );
    opacity:0.4;
    }
    .screen:hover .nextNext {
    -webkit-transform: translate3d( 0px, 240px, 0px );
    box-shadow:none;
    opacity:0.9;
    }

     


    votre commentaire
  •  

      Para texto, imagen...
    <div class="separator"><a><img src="http://file.mobilmusic.ru/a7/56/c6/1173558.gif" alt="" width="240" height="270" /></a></div>
    .separator { margin: 20px; text-align: center;
    clear: both; 
    } 
    .separator a {
    display: table; 
    position: relative; 
    z-index: 10; 
    max-width: 94% !important;
    margin: 10px auto !important; 
    } 
    .separator img { 
    display: table-cell; 
    max-width: 100% !important;
    padding: 15px;
    background: #fff; 
    border-radius:160%/20%; 
    -webkit-box-shadow: 0 1px 5px #999;
    -moz-box-shadow: 0 1px 5px #999; 
    box-shadow: 0 1px 5px #999;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .separator a:before; .separator a:after { content: ""; display: block; position: absolute; top: -5px; left: 0; width: 100%; height: 100%; background: white; border-radius:160%/20%; -webkit-box-shadow: 0 1px 5px #999; -moz-box-shadow: 0 1px 5px #999; box-shadow: 0 1px 5px #999; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all; } .separator a:before { z-index: -2; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); transform: rotate(2deg); border-radius:160%/20%; } .separator a:after { z-index: -3; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); transform: rotate(-3deg); } .separator a:hover:before; .separator a:hover:after { top: -2px; left: 2px; bottom: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); }

     


    votre commentaire
  •  

      Para texto, imagen... Fuente

    Amor, amor, amor...

    El amor es como una guerra, fácil de iniciar, difícil de terminar, imposible de olvidar.

    <div id="recuadro1">
    <h3>Amor, amor, amor...</h3>
    <a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://www.glamik.ru/Glamik/melkie_cvetoch/54.gif" alt="" /></a>
    <p>Texto</p></div>
    <style type="text/css"><!--#recuadro1{
    left:30px;
    position:relative;
    border-radius: 20px;
    background-color:#feeef0;
    width:200px;
    height:240px;
    padding:4px;
    -moz-animation-name: animacion1;
    -moz-animation-duration: 4s;
    -webkit-animation-name: animacion1;
    -webkit-animation-duration: 4s;
    -o-animation-name: animacion1;
    -o-animation-duration: 4s;
    }

    @-moz-keyframes animacion1 {
    from {
    left:30px;
    background-color:#fcdce0;
    }
    to {
    left:300px;
    background-color:#f0608e;
    }
    }

    @-webkit-keyframes animacion1 {
    from {
    left:30px;
    background-color:#fcdce0;
    }
    to {
    left:300px;
    background-color:#f0608e;
    }
    }
    @-o-keyframes animacion1 {
    from {
    left:30px;
    background-color:#fcdce0;
    }
    to {
    left:300px;
    background-color:#f0608e;
    }
    }

    body {
    background:white;
    }
    --></style>

     


    votre commentaire