•  

    <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
  •  

      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
  •  

    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
  •  

    Pies, para qué los quiero si tengo alas para volar. Frida Khalo


    HTML



    CSS




  •  

    Estilos

    1. Estilos antiguos (ruso)
    2. Google

    Generadores

    1. http://css-text-shadow/
    2. http://csstypeset.com/
    3. http://www.dynamicdrive.com/dynamicindex10/




  •  


    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
  •  


     <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
  •  

    Cambio de color del texto seleccionado


    CSS

    /* webkit, opera, IE9 */
     ::selection { background:#B9C4EA; color:#000; }
     /* mozilla firefox */
     ::-moz-selection { background:#B9C4EA; color #000; }




  •  


    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
  •  


    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
  •  


    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
  •  


    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 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
  •  


    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
  •  

    Fuente
        a. http://codepen.io/micke/pen/bNrqvQ




    La belleza  de la mujer se halla iluminada por una luz que nos lleva y convida a contemplar el alma que tal cuerpo habita, y si aquélla es tan bella como ésta, es imposible no amarla.
    Sócrates

    Con amor.
    GloriaV



    HTML



    CSS




  •  

    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
  •  

    05

    HTML

    <p><embed width="450" height="450" src="http://htmlka.com/wp-content/uploads/2011/05/colorChooser.swf" wmode="transparent"></embed></p>

    <p><a href="http://htmlka.com/wp-content/uploads/2011/05/colorChooser.swf" target="_blank"><span style="text-decoration: underline;"><strong><span style="color: #000000; font-size: small;">05</span></strong></span></a></p>


  •  

    !!!70
    HTML

     <p>

        <embed wmode="transparent" src="http://www.yapfiles.ru/files/73870/colorwizard.swf" width="420" height="450" />

    </p>

    <a href="http://www.yapfiles.ru/files/73870/colorwizard.swf" target="_blank"><u><strong><font color="#000000" size="2">!!!70</font></strong></u></a>


  •  
    HTML

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="470" height="500">

        <param name="movie" value="http://u.jimdo.com/www21/o/ s4e9df44a0ad8ccd8/flash/mfa3cf33b72d58060/ 1337970615/flash.swf" />

        <param name="quality" value="high" />

        <embed wmode="transparent" src="http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/flash/mfa3cf33b72d58060/1337970615/flash.swf" quality="high" pluginspage=

        "http://www.macromedia. com/go/getflashplayer" type="application/x-shockwave-flash" width="470" height="500" />

    </object>