• Texto efectos

     


    Texto

  •  


    1. http://redeando.blogspot.com.estexto-estilo-luces-de-neon.
    2. http://redeando.estexto-intermitente-que-cambia-de-color
    3. http://redeando. sombras-animadas-que-cambian-de-color
    4. Texto con imagen
    5. http://shpargalkablog.ru/2011/07/transformaciya-css.html
    6. Galeria con texto
    7. Texto animado
    8. Texto con JS
    9. http://codepen.io/mikpatte/pen/LELMdL
    10. http://codepen.io/tmrDevelops/pen/dPzGqV
    11. Para texto con imagen
    12. http://cssdeck.com/labs/7y2gz430
    13. http://cssdeck.com/labs/stacked-papers-using-box-shadow
    14. http://cssdeck.com/labs/simple-perspective-preloader
    15. http://cssdeck.com/picks/180
    16. http://cssdeck.com/labs/8852y8sb
    17. http://cssdeck.com/labs/shuffled-paper
    18. Texto en neon
    19. Texto flotante
    20. Letra flotante
    21. Multicolor
    22. Acordeón 
    23. Hover
    24. Flotante
    25. En columnas
    26. Sombra
    27. http://cssdeck.com/labs/content-box-with-lifted-shadows
    28. Golden (sombra)
    29. http://cssdeck.com/labs/tabs-using-css
    30. http://cssdeck.com/labs/profile-interface
    31. http://cssdeck.com/labs/eclectic-circle-in-css3-animation
    32. http://codepen.io/MattiaAstorino/pen/
    33. http://codepen.io/waddington/pen/qJsGd
    34. http://codepen.io/ashleynolan/pen/QwvKaw
    35. http://codepen.io/Lewitje/pen/JoJepP
    36. http://codepen.io/riktar/pen/dPRgOq
    37. http://codepen.io/tmrDevelops/pen/yybKwd
    38. http://codepen.io/yoannhel/pen/sJpDj
    39. http://codepen.io/gcyrillus/pen/vqkgf
    40. Acordeón
    42. Fade para texto
    43. Cubo con texto
    44. http://tympanus.net/typography-effects-with-css3-and-jquery/
    45. http://bradsknutson.com/blog/unfocused-text-with-css/
    46.  http://codepen.io/tmrDevelops/pen/qsckv
    47. http://codepen.io/pseudoheld/pen/Hyqlt
    48. http://tympanus.net/Development/HoverEffectIdeas/index.html
    48. Texto con hover Codepen
    49. http://www.dynamicdrive.com/dynamicindex10/
    50. http://codepen.io/ultimatedelman/pen/zDLAv
    51. http://codepen.io/alexincarnati/pen/EFlnc

     


  •  

    Cambio de color del texto seleccionado


    CSS

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




  •  


    Te amo
    Con corazón y alma

    Para texto, imagen...
    Fuente

    HTML

    <div id="sq"> 
     <div class="circ1">Te amo</div> 
     <div class="circ2"><a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://imagenes.gifmania.com.pr/Gifs-Animados-Amor/Animaciones-Corazones/Imagenes-Animadas-Corazones-Colores/corazon-colores16.gif" alt="" /></a></div> 
     <div class="circ3">Con coraz&oacute;n y alma</div> 
     </div> 



    CSS

    <style><!--.circ1{ 
     width:160px; 
        height:160px;    
        border-radius:120px; 
        background-color:rgb(255, 255, 255);       
        }
    .circ2{ 
        width:150px; 
        height:180px;       
        border-radius: 80px / 50px; 
        background-color:rgb(255, 255, 255);    
        } 
            
    .circ3{ 
        width:150px; 
        height:220px;    
        border-radius: 80px / 50px; 
        background-color:rgb(255, 255, 255);       
        }
    .circ1{    
        width:120px; 
        height:120px;    
        border-radius:120px; 
        background-color:rgb(255, 255, 255);    
             margin:20px 0 0 60px;    
        } 
    
    .circ2{ 
        width:150px; 
        height:80px;       
        border-radius: 80px / 50px; 
        background-color:rgb(255, 255, 255);    
             margin:-90px 0 0 80px; 
        } 
            
    .circ3{ 
        width:150px; 
        height:90px;    
        border-radius: 80px / 50px; 
        background-color:rgb(255, 255, 255);    
        margin:-90px 0 0 0px;    
        }
    @-webkit-keyframes animar{ 
         0%  { }  
          50% { -webkit-transform:translateX(700px) scale(1.2);} 
          100% {-webkit-transform:translateX(0px); } 
    }
    #sq{ 
        -webkit-animation-name: animar; 
        -webkit-animation-duration: 20s; 
        -webkit-animation-timing-function: lineal; 
        -webkit-animation-iteration-count:infinite; 
        opacity: 0.6; 
        margin:0; 
        position:absolute; 
    }
    #sq{ 
        -webkit-animation-name: animar; 
        -webkit-animation-duration: 20s; 
        -webkit-animation-timing-function: lineal; 
        -webkit-animation-iteration-count:infinite; 
        opacity: 0.6; 
        margin:0; 
        position:absolute; 
    } 
    
    #sq2{ 
        -webkit-animation-name: animar;
        }
     --></style>




  •  


    Séneca

    No hay cosa más fuerte que el verdadero amor.


    HTML

    <div id="recuadro1">
     <h3>Texto</h3>
     <p>Texto</p></div>



    CSS

    #recuadro1{
      border-radius: 20px;  
      background-color:#E1CCDE;
      width:200px;
      height:200px;
      padding:8px;
      -moz-animation-play-state:paused;
      -moz-animation-name: animacion1;
      -moz-animation-duration: 4s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;
      -webkit-animation-play-state:paused;
      -webkit-animation-name: animacion1;
      -webkit-animation-duration: 4s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -o-animation-play-state:paused;
      -o-animation-name: animacion1;
      -o-animation-duration: 4s;
      -o-animation-iteration-count: infinite;
      -o-animation-direction: alternate;
    }
    
    #recuadro1:hover {
      -moz-animation-play-state:running;
      -webkit-animation-play-state:running;
      -o-animation-play-state:running;
    }
    
    @-moz-keyframes animacion1 {
      from {
        border-radius:0px;
        background-color:#E1CCDE;
      }
      to {
        border-radius:40px;
        background-color:#F4B9EB;
      }
    }
    
    @-webkit-keyframes animacion1 {
      from {
        border-radius:0px;
        background-color:#E1CCDE;
      }
      to {
        border-radius:40px;
        background-color:#F4B9EB;
      }
    }
    
    @-o-keyframes animacion1 {
      from {
        border-radius:0px;
        background-color:#E1CCDE;
      }
      to {
        border-radius:40px;
        background-color:#F4B9EB;
      }
    }
    
    
    body {
      background:white;
      margin:50px;
    }




  •  


    "¿Los límites existen? ‘Oh no, esos son creaciones modernas de tu sociedad, en el idioma universal no existe la expresión límite, sólo existe la manifestación de la expresión de la infinidad", respuesta del Maestro Malatai a esta pregunta















    HTML

    <div class="element"> 
     <div class="img"><img src="https://lh6.googleusercontent.com/-_l3PR-U8_FY/VOcpWz4-QpI/AAAAAAABc0M/wco-gPSSM0s/w223-h300-no/2-223x300%2B%281%29.gif" alt="" /></div> 
     <div class="description"> 
     <p>"&iquest;Los l&iacute;mites existen? &lsquo;Oh no, esos son creaciones modernas de tu sociedad, en el idioma universal no existe la expresi&oacute;n l&iacute;mite, s&oacute;lo existe la manifestaci&oacute;n de la expresi&oacute;n de la infinidad", respuesta del Maestro Malatai a esta pregunta</p> 
     </div> 
     </div> 



    CSS

    .element {
    border: 2px dotted #330e02;
     border-radius: 5%/10%;
    background: #fff;
    float: left;
    height: 320px;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
    width: 417px;
    }
    
    .element a {
    text-decoration: none;
    color: #000;
    }
    
    .img, .description {
    height: 300px;
    }
    
    .img {
    margin-top: 0;
    background: #fff;
    -webkit-transition-property: margin-top;
    -webkit-transition-duration: .5s;
    
    -moz-transition-property: margin-top;
    -moz-transition-duration: .5s;
    
    -o-transition-property: margin-top;
    -o-transition-duration: .5s;
    
    -ms-transition-property: margin-top;
    -ms-transition-duration: .5s;
    
    }
    
    .element:hover .img {
    margin-top: -120px;
    }
    
    .description {
    background: #fdf8d2;
    color: #000;
    font-family: Edwardian Script ITC;
    font-size: 22px;
    }
    
    
    .description p {
    padding:0 0 0 5px;
    }




  •  


    Saber y saberlo demostrar, es valer dos veces.Baltasar Gracián

    HTML

    <div class="css3_pulsate pulsate">Saber y saberlo demostrar, es valer dos veces.Baltasar Graci&aacute;n</div>



    CSS

     
    @-webkit-keyframes pulsate {
      0% { width:200px; }
      5% { width:250px; left:-25px; }
      10% { width:200px; left:0px; }
      15% { width:250px; left:-25px; }
      20% { width:200px; left:0px; }
      40% { width:200px; background-color:#BEEBFE; }
      45% { width:250px; left:-25px; background-color:#BEEBFE; }
      50% { width:200px; left:0px; background-color:#BEEBFE; }
      55% { width:250px; left:-25px; background-color:#BEEBFE; }
      60% { width:200px; left:0px; background-color:#BEEBFE; }
      80% { width:200px; background-color:#82D9FC; }
      100% { width:200px; background-color:#82D9FC; }
    }
    .css3_pulsate:hover {
      -webkit-animation-name: pulsate;
      -webkit-animation-duration: 3s;
      -webkit-animation-timing-function: ease-in-out;
    }
     




  •  

     


    Fuente

    La mente de una mujer es más limpia que la de un hombres: la limpian más a menudo.Oliver Herford.

     


    HTML

    <div class="transition-opacity"><p>Texto</p><br /><p><img style="border: 2px double #f69f64; border-radius: 10px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh4.googleusercontent.com/-51R5po3iN58/U2numiM_JsI/AAAAAAAAXCM/wPvwnMidnis/w314-h400-no/42.gif" alt="" width="250" height="290" /></p></div>



    CSS

    <style type="text/css"><!--
     .transition-opacity {
      background: #fff;
      color: #000;
      margin: 0 auto;
      padding: 10px;
      text-align: center;
      max-width: 500px;
      font-size: 20px;
      border: 2px ridge #f69f64;
     border-radius: 10px;
     box-shadow: 1px 1px 7px #000;
      cursor: pointer;
      transition: 3s linear;
    }
    .transition-opacity:hover {
      opacity: .1;
    }
     --></style>




  •  


    Dios tiene un principe para tí,
    pero eso no significa que no seas ya una reina.


    HTML

    <div class="transition-translate">
    <p style="text-align: center;">Dios tiene un principe para t&iacute;, <br />pero eso no significa que no seas ya una reina.</p>
    <img style="border: 2px dotted #0099c8; border-radius: 110px/140px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh5.googleusercontent.com/-bLLEVt-HGns/U-jZpnNed7I/AAAAAAAA2rI/thbYxI5wfIw/w245-h170-no/8.gif" alt="" width="270" height="230" /></div>



    CSS

    <style type="text/css"><!--
     .transition-translate {
      position: relative;
      top: 0;
      z-index: 2;
      background: #fff;
      color: #000;
      margin: 0 auto;
      padding: 10px;
      text-align: center;
      max-width: 400px;
      font-size: 20px;
      border: 3px double #0099c8;
      border-radius: 110px/140px;
     -webkit-box-shadow: #3f3850 44px 44px 44px;-moz-box-shadow: #71346f 14px 14px 14px; box-shadow: 0 5px 5px 2px #000;  
      cursor: pointer;
      transition: 3s linear;
    }
    .transition-translate:hover {
      top: 50px;
    }
     --></style>




  •  


    Una mujer bella no siempre es inteligente; una mujer inteligente siempre es bella.


    HTML

    <div class="transition-width"> 
     <p>Texto</p><p><img style="border: 2px double #cc5670; border-radius: 5em/1em; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="http://mir-animashki.com/_ph/67/461291948.gif" alt="" width="250" height="290" /></p></div>



    CSS

    <style type="text/css"><!--
     .transition-width {
      background: #FEFBFE;
      color: #000;
      margin: 0 auto;
      padding: 10px;
      text-align: center;
      max-width: 400px;
      font-size: 20px;
      border: 2px dotted #cc5670;
     border-radius: 5em/1em;
      cursor: pointer;
      transition: 3s linear;
    }
    .transition-width:hover {
      max-width: 300px;
    }
     --></style>




  •  


    Fuente

    Los dioses ayudan a los hombres que se ayudan a sí mismos, y esto es mediante el trabajo. Virgilio

    HTML

     <div class="imagepluscontainer" style="z-index: 2;">
    <p><img style="border: 2px double #b7d9fa; border-radius: 8px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh6.googleusercontent.com/-dy6eflBlE2o/VOdyIloF99I/AAAAAAABc4o/lG0DJAbHW1U/w191-h300-no/1-191x300.gif" alt="" width="220" height="290" /></p>
    <div class="desc">Texto</div></div>



    CSS

     <style>
     .imagepluscontainer{ 
    position: relative;width: 200px;
    z-index: 1;
    }
    .imagepluscontainer img{ 
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    
    .imagepluscontainer:hover img{ 
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    }
    
    .imagepluscontainer div.desc{ /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.8); color: #000;
         font-family: "Edwardian Script ITC";
         font-size: 22px;
    -moz-border-radius: 0 0 8px 8px;-webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0; /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); 
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s; 
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
    }
    
    .imagepluscontainer div.desc a{
    color: white;
    }
    
    .imagepluscontainer:hover div.desc{ 
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity:1; /* Reveal desc DIV fully */
    }
     </style>




  •  


    Para texto, imagen...

    Te amo  

    Anoche miré al cielo y empecé a dar a cada estrella una razón por la que te quiero tanto. Me faltaron estrellas.
























    HTML

    <div class="box">
    <h2>Te amo<span class="l">&nbsp;</span><span class="r">&nbsp;</span></h2>
    <div class="block">
    <div class="block_in">
    <p>Texto</p><p><img style="border: 2px double #916ea7; border-radius: 5px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh4.googleusercontent.com/-wnHHm0Xt9ds/VOdkMDfcSrI/AAAAAAABc4Q/MtryfXKO1z0/w276-h262-no/1-276x262.gif" alt="" width="305" height="250" /></p></div></div></div>
     



    CSS

    <!-- end of #container -->
     <style type="text/css"><!--
     .box {
    	background:#fcf3fc;
    	padding:0;
     margin: 40px 30px 45px 40px; 
     
    	overflow: hidden;
     width: 400px;
    	border: 1px solid #908396;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-webkit-box-shadow:0 0 10px #DCDCDC inset;
    	-moz-box-shadow:0 0 10px #DCDCDC inset;
    	box-shadow:0 0 10px #DCDCDC inset;
    }
    .box h2 {
    	font-size:1em;
    	font-weight:20;
    	text-transform:uppercase;
    	color:#000;
    	background: #e4dbec;
    	margin:0 -10px -1px -10px;
    	padding:12px;
    	padding-left: 15px;
    	padding-right: 45px;
    	-webkit-box-shadow:0 0 10px #DCDCDC inset;
    	-moz-box-shadow:0 0 10px #DCDCDC inset;
    	box-shadow:0 0 10px #DCDCDC inset;
    	border-radius: 5px 5px 0 0;
    	-moz-border-radius: 5px 5px 0 0;
    	-webkit-border-radius: 5px 5px 0 0;
    }
    
    .block {
    	padding:0;
    }
    
    .block_in {
    	padding:12px;
    }
    
    .box div.hide {
    display: block;
    width: 40px;
    line-height: 24px;
    position: absolute;
    right: 5px;
    top: 8px;
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    border: solid 1px #aaa;
    background: #faeaf3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow:0 0 4px #DCDCDC inset;
    -moz-box-shadow:0 0 4px #DCDCDC inset;
    box-shadow:0 0 4px #DCDCDC inset;
    }
    
    .box div.hide:hover {
    background: #fff;
    }
    
    .box div.hide span.h {	display: block;}
    .box div.hide span.s {	display: none;}
    .box div.show  span.h {	display: none;}
    .box div.show  span.s {	display: block;}
    
    .closed div.hide span.h {	display: none;}
    .closed div.hide span.s {	display: block;}
    .closed div.show  span.h {	display: block;}
    .closed div.show  span.s {	display: none;}
     --></style>




  •  


    No se puede exigir del mineral para convertirse en el gas.

    No se puede exigir de la locura que actua con sabiduría.

    Y si el primero es todavía posible hacer,

    lo segundo no logrará nunca.

    Amen


    HTML

    <blockquote>
     <p class="hov">Lorem</p>
     <p class="hov">ipsum</p>
     <p class="hov">dolor</p>
     <p class="hov">sit</p>
     <p class="hov">amen</p>
     </blockquote>



    CSS

    <style><!--
     blockquote:hover p.hov {
        box-shadow: 
        1px 1px #666,
        2px 2px #666,
        3px 3px #666;
    }
     --></style>




  •  


    CSS3 Text Effect 4

    HTML

    <div id="eff4">CSS3 Text Effect 4</div>



    CSS

    <style type="text/css"><!--
     #eff4 {
        background: #0C84F3 -webkit-gradient(linear, left top, right top, from(#0DF2B4), to(#C0DFFC), color-stop(0.5, #ffffff)) 0 0 no-repeat;
        color: rgba(255, 255, 255, 0.1);
        font-size: 30px;
        font-weight: bold;
        position: relative;
    
        -webkit-animation: shine 2s infinite;
        -webkit-background-clip: text;
        -webkit-background-size: 300px;
    }
    
    @-webkit-keyframes shine {
        0% {
            background-position: top left;
        }
        100% {
            background-position: top right;
        }
    }
     --></style>




  •  


    El amor es la alegría de los buenos, la reflexión de los sabios, el asombro de los incrédulos.

    Platón


    HTML

    <div id="wrapper">
     <h1>Texto</h1>
     <p>Texto</p>



    CSS

    #wrapper h1{
    font:normal 16pt Monotype corsiva;
    color:#000;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }
    
    #wrapper p{
    font:normal 16pt Monotype corsiva;
    color:#000;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),8 0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }




  •  


    http://bradsknutson.com/blog/css3-flash-card-demo/



    Hacer una corona es mucho más fácil
    que hallar una cabeza digna de llevarla.
    Johann Wolfgang von Goethe
     







    HTML

    <div class="flip-card"> <div class="flip-front"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.bellaterreno.com/graphics/clipart_mystical/crowntiny/crowntiny_spin_shadow_ani.gif" alt="" />Texto, imagen</div><div class="flip-back"></div></div>



    CSS

    .flip-card {
    	height: <-- height of flash card -->;
    	width: <-- width of flash card -->;
    	transform: perspective(400px) rotateY(0deg);
    	-moz-transform: perspective(400px) rotateY(0deg);
    	-webkit-transform: perspective(400px) rotateY(0deg);
    	-o-transform: perspective(400px) rotateY(0deg);
    	-ms-transform: perspective(400px) rotateY(0deg);
    	transition: all ease 0.2s;
    	-moz-transition: all ease 0.2s;
    	-webkit-transition: all ease 0.2s;
    	-o-transition: all ease 0.2s;
    	-ms-transition: all ease 0.2s;
    }
    .flip-card .flip-front {
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 100%;
    	width: 100%;
    }
    .flip-card .flip-back {
    	height: 100%;
    	width: 100%;
    }
    .flip-card:hover {
    	transform: perspective(400px) rotateY(180deg);
    	-moz-transform: perspective(400px) rotateY(180deg);
    	-webkit-transform: perspective(400px) rotateY(180deg);
    	-o-transform: perspective(400px) rotateY(180deg);
    	-ms-transform: perspective(400px) rotateY(180deg);
    }
    .flip-card:hover .flip-back {
    	transform: perspective(400px) rotateY(-180deg);
    	-moz-transform: perspective(400px) rotateY(-180deg);
    	-webkit-transform: perspective(400px) rotateY(-180deg);
    	-o-transform: perspective(400px) rotateY(-180deg);
    	-ms-transform: perspective(400px) rotateY(-180deg);
    }
    -->
    -->




  •  

    Efectos hover con CSS3

    • Título primera imagen


      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.

      Mas Info
    • Título segunda imagen


      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.

      Mas Info



























    HTML

    <div id="container">
    <div id="cabecera">
    <h1>Efectos hover con CSS3</h1>
    </div>
    <div id="contenido">
    <ul class="efectos">
    <li><img style="border: 1px dotted #52BEFE; -webkit-border-radius: 1em/0.5em; -moz-border-radius: 1em/0.5em; border-radius: 1em/0.5em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://productions.caffix.org/wp-content/uploads/2009/11/m-6e0568979b684dc9a70f8317aa58_128_128.gif" alt="" width="135" height="135" />
    <h2>T&iacute;tulo primera imagen</h2>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.</p>
    <a class="boton" title="Haz click aqu&iacute; para m&aacute;s informaci&oacute;n" href="#">Mas Info</a></li>
    <li><img style="border: 1px dotted #52BEFE; -webkit-border-radius: 1em/0.5em; -moz-border-radius: 1em/0.5em; border-radius: 1em/0.5em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://www.gifsde.com/uploads/651ce2_ohmmmmm.gif" alt="" width="135" height="135" />
    <h2>T&iacute;tulo segunda imagen</h2>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.</p>
    <a class="boton" title="Haz click aqu&iacute; para m&aacute;s informaci&oacute;n" href="#">Mas Info</a></li></ul></div></div>



    CSS

    background:#B4C1DE url(../img/bg.png) 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:#B4C1DE url(../img/efecto-fondo.jpg) no-repeat center center;
    position:relative;
    list-style:none;
    width:400px;
    height:250px;
    overflow:hidden;
    border:20px solid #FFF;
     border-radius: 1em 0.5em;
    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
    }
     ul.efectos li img {
    z-index:30;
    position:absolute;
    top:0;
    left:0;
    -webkit-transition:all .7s ease-out;
    -moz-transition:all .7s ease-out;
    -ms-transition:all .7s ease-out;
    -o-transition:all .7s ease-out
    }
     ul.efectos li h2 {
    font-size:3em;
    color:#fff;
    line-height:1.5em;
    letter-spacing:.1em;
    text-align:center;
    text-transform:uppercase;
    -webkit-transition:all .5s ease-in;
    -webkit-transform:scale(0.1);
    -moz-transition:all .5s ease-in;
    -moz-transform:scale(0.1);
    -ms-transition:all .5s ease-in;
    -ms-transform:scale(0.1);
    -o-transition:all .5s ease-in;
    -o-transform:scale(0.1);
    opacity:0;
    margin:0;
    padding:0
    }
     
    ul.efectos li:hover h2 {
    padding-top:30px;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    opacity:1
    }ul.efectos li a.boton {
    display:block;
    text-align:center;
    font-family:helvetica, arial, sans-serif;
    position:relative;
    text-transform:uppercase;
    letter-spacing:.2em;
    text-decoration:none;
    font-size:1.6em;
    background:#333;
    color:#fff;
    width:150px;
    margin-left:125px;
    border:none;
    -webkit-transition:all .6s ease-in;
    -webkit-transform:translateY(230px) scale(5);
    -moz-transition:all .6s ease-in;
    -moz-transform:translateY(230px) scale(5);
    -ms-transition:all .6s ease-in;
    -ms-transform:translateY(230px) scale(5);
    -o-transition:all .6s ease-in;
    -o-transform:translateY(230px) scale(5);
    opacity:0;
    cursor:pointer;
    z-index:50;
    padding:4px
    }
    ul.efectos li:hover a.boton {
    -webkit-transform:translateY(0) scale(1);
    -moz-transform:translateY(0) scale(1);
    -ms-transform:translateY(0) scale(1);
    -o-transform:translateY(0) scale(1);
    opacity:1
    }




  • <

     


    http://cssdeck.com/labs/profile-interface

    Created by balapa95

     

    HTML

    <div class=container>
       <div class=nama>
       <h3>Created by balapa95</h3>
     </div><img class=me src="https://lh3.googleusercontent.com/-NhjadQ0xxTU/VJQfrCl4kxI/AAAAAAABREg/-lIzr86dUW4/w240-h300-no/4-240x300.gif" alt=" " /></div>



    CSS

    <style type="text/css"><!
     * {
      margin:0px;
      padding:0px;
    }
    
    .container {
      background-color:#fff;
      width:270px;
      z-index:2;
      display:block;
      margin:130px auto;
      position:relattive;
      padding-top:10px;
      border-radius:5px;
    }
    
    .nama {
      width:270px;
      display:block;
      z-index:-2;
      position:absolute;
      left:50%;
      margin:-15px 0px;
       transition:0.3s all ease-out;
    }
    
    .nama h3 {
      left:-50%;
      color:white;
      font-size:16px;
      position:relative;
      text-align:center;
      background:#c4c7c2;
      line-height:50px;
      border-top-left-radius:5px;
      border-top-right-radius:5px;
    }
    
    .container:hover .nama {
      margin:-55px 0;
    }
    
    .container:hover .me {
      transform:scale(1.05);
    }
    
    .me {
      border-radius:10%;
      border: 1px dotted #fff;
      width:50%;
      display:block;
      margin:0 auto;
      margin-top:20px;
      transform:scale(.95);
      transition:.3s all ease;
    }
     --></style>




  •  

    El profesor mediocre dice.
    El buen profesor explica.
    El profesor superior demuestra.
    El gran profesor inspira.

    HTML

    <table id="myexample" style="border-right: gray 2px dotted; border-radius: 10px/5px; border-top: gray 2px dotted; border-left: gray 2px dotted; border-bottom: gray 2px dotted,border-radius: 10px/5px;" border="0" width="280" align="center"><tbody><tr><td>Texto</td></tr></tbody></table>



    CSS

    <script type="text/javascript">// <![CDATA[
    //configure interval btw flash (1000=1 second)
        var speed=500
    
        function flashit(){
        var crosstable=document.getElementById? document.getElementById("myexample") : document.all?
    
        document.all.myexample : ""
        if (crosstable){
        if (crosstable.style.borderColor.indexOf("yellow")!=-1)
        crosstable.style.borderColor="red"
        else
        crosstable.style.borderColor="yellow"
    
        }
        }
        setInterval("flashit()", speed)
        //-->
     // ]]></script>
    




  •  

        Para texto, código, imagen...

    1 Título

    Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

    2 Título

    Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

    3 Título

    Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

    4 Título

    Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

    5Título

    Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

    6 Título

    Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.
     

    HTML

    <div id="tarjetas"> <div class="tarjeta"><p>1 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>2 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>3 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>4 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>5 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>6 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>7 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>8 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div style="clear: both;">&nbsp;</div></div>



    CSS

    #tarjetas {width:460px;
     margin: 0 auto;
     background:#f7f7f7;
     border:1px solid #FFF;
     box-shadow:0 0 1px #CCC;
     padding:0 10px 10px 10px;
     }
     .tarjeta {
     float:left;width:200px;
     padding:10px;
     background:#FCFCFC;
     line-height:10px;
     font-size:19px;
     color:transparent;
     text-shadow:0 0 3px black;
     box-shadow: 0 0 7px #ccc;
     border-radius:1px;
     margin-left:10px;
     margin-top:10px;
     -moz-transition: 0.4s;
     -webkit-transition: 0.4s;
     -o-transition: 0.4s;transition: 0.4s;
     }
     .tarjeta:hover {
     box-shadow:2px 2px 1px #ccc; 
     -webkit-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px); 
     -moz-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
     -o-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
     color:#222; 
     text-shadow:0 0 1px white;
     background-image: linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
     background-image: -o-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
     background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
     background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
     background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(245,245,245)), color-stop(0.59, rgb(255,255,255)) ); 
     } 
     .tarjeta p {
     font-size:13px;
     }




  •  

     

    Texto

    HTML

    <div class="row"> <div class="col-sm-1"> <div class="round round-sm"><span class="glyphicon glyphicon-file"><img src="https://img-fotki.yandex.ru/get/4810/sibircko-ir.38/0_59ee5_b2693a2_orig" width="140" height="165" alt="" /></span><br /></div>  </div> </div><div class="container"> <div class="row"><div class="col-sm-1"><div class="round round-sm hollow "><span class="glyphicon glyphicon-file">Texto</span></div></div></div></div>



    CSS

    .round{ -moz-border-radius:50%; /* for Firefox */ -webkit-border-radius:50%; /* for Webkit-Browsers */
        border-radius:50%; /* regular */
        opacity:1; /* Transparent Background 50% */
        background:#eee;
        padding:40px;
        height:170px;
        width:170px;
        text-align: center;
        alignment-adjust: middle;
        vertical-align:middle;
        text-decoration: none;
        color:#000; } 
    .round:hover{ -moz-border-radius:50%; /* for Firefox */ -webkit-border-radius:50%; /* for Webkit-Browsers */
        border-radius:20%; /* regular */
        opacity:1; /* Transparent Background 50% */
        background:#ccc;
        padding:40px;
        height:170px;
        width:170px;
        text-align: center;
        alignment-adjust: middle;
        vertical-align:middle;
        text-decoration: none;
        color:#fff; }




  •  


    http://stackoverflow.com/questions/19052755/text-in-rounded-corners-and-hover-not-working



    Las buenas mujeres dicen toda su vida, y día a día, hora por hora y minuto a minuto, muchas cosas que los ángeles pueden leer. Bram Stoker

    Que acaso no existan los ángeles, pero que hay gente que podrían ser ángeles...David Foster Wallace

    HTML

    <a href="http://fondogifflashgloriav.ek.la/angeles-c25903940"> <div class="round"> <img src="https://img-fotki.yandex.ru/get/6421/122885204.12c/0_81333_8aeaa0d4_orig" width="140" height="165"align="center" /><br />Texto</div> </a> <a href="http://fondogifflashgloriav.ek.la/angeles-c25903940"> <div class="round"> <img src="https://img-fotki.yandex.ru/get/4310/sweetlankakiss.15/0_29679_32ad8cd7_orig" width="140" height="165" align="center" /><br />Texto</div> </a>



    CSS

    <style type="text/css"><!--   .round{ -moz-border-radius:30%; /* for Firefox */ -webkit-border-radius:30%; /* for Webkit-Browsers */
      border-radius:30%; /* regular */
      opacity:1; /* Transparent Background 30% */
      background:#eee;
      padding:40px;
      height:170px;
      width:170px;
      text-align: center;
      alignment-adjust: middle;
      vertical-align:middle;
      text-decoration: none;
      color:#000; 
    } 
      .round:hover{ 
      -moz-border-radius:30%; /* for Firefox */ -webkit-border-radius:30%; /* for Webkit-Browsers */
      border-radius:10%; /* regular */
      opacity:1; /* Transparent Background 30% */
      background:#ccc;
      padding:40px;
      height:170px;
      width:170px;
      text-align: center;
      alignment-adjust: middle;
      vertical-align:middle;
      text-decoration: none;
      color:#fff; 
    }--></style>




  •  

    Texto 1

    Texto 2



















    <div id="f1_container" class="hover">
    <div id="f1_card" class="shadow">
    <div class="front face">
    <img style="margin-left: auto; border-radius: 2%;
    box-shadow: 1px 1px 6px 1px #666; display: block;
    margin-right: auto;"
    src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif"
    width="195" height="210"/>
    </div> <div class="back face center">
    <p>Texto 1</p> <p>Texto 2</p></div></div></div>

    CSS

    #f1_container { 
    position: relative;
    margin: 10px auto;
    width: 400px;
    height: 400px;
    perspective: 1000;
    -webkit-perspective: 700; background: red;
    } #f1_card {
    width: 400px; height: 400px;
    transform-style: preserve-3d;
    transition: all 1.0s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1s ease-in-out;
    -webkit-transform-origin: right; }
    #f1_container:hover
    #f1_card {
    -webkit-transform: rotateY(-180deg);
    }




  •  

    Texto 1

    Texto 2










     

    <div id="f1_container" class="hover">
    <div id="f1_card" class="shadow">
    <div class="front face">
    <img style="margin-left: auto; border-radius: 2%; 
    box-shadow: 1px 1px 6px 1px #666; display: block; 
    margin-right: auto;" 
    src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif" 
    width="195" height="210"/>
    </div> <div class="back face center">
    <p>Texto 1</p> <p>Texto 2</p></div></div></div>

    CSS

     

    #f1_container { 
      position: relative; 
      margin: 10px auto; 
      width: 50%; 
      height: 50%; 
      perspective: 1000; 
      -webkit-perspective: 400; 
      background: ; 
    } #f1_card { 
      width: auto; 
      height: auto; 
      transform-style: preserve-3d; 
      transition: all 1.0s ease-in-out; 
      -webkit-transform-style: preserve-3d; 
      -webkit-transition: all 1s ease-in-out; 
      -webkit-transform-origin: right; 
    } 
    #f1_container:hover #f1_card { 
     -webkit-transform: scaleX(-1); }
    #f1_card { 
      width: 50%; 
      height: 50%; border-radius:2%; 
      border: 1px dotted #000;
      transform-style: preserve-3d; 
      transition: all 1.0s ease-in-out; 
      -webkit-transform-style: preserve-3d; 
      -webkit-transition: all 1s ease-in-out; 
      -webkit-transform-origin: right; 
    } #f1_container:hover #f2_card { 
      -webkit-transition-delay: 2s; 
     -webkit-transform: scaleX(-1); }
      }
    .face {  
      position: absolute; left: 100%; 
      bottom: 100%; 
      width: 50%; 
      height: 50%;
      -webkit-backface-visibility: hidden; z-index: 3; 
    } 
    .face.back { 
     -webkit-transform: scaleX(-1); }
    } 
    .face2 { 
      position: absolute; 
      left: 100%; 
      width: 50%; 
      height: 50%;
      -webkit-backface-visibility: hidden; z-index: 0; 
    } .face2.back2 { 
     -webkit-transform: scaleX(1); }




  •  

    Texto 1

    Texto 2









    <div id="f3_container" class="hover">
    <div id="f3_card" class="shadow">
    <div class="front face">
    <img src="https://img-fotki.yandex.ru/get/6438/131165231.36/0_aa92e_e58bda4a_orig"
     width="195" height="210"/>
    </div> <div class="back face center"> 
    <p>Texto 1</p> <p>Texto 2</p> </div></div></div>

    CSS

    <style>
     #f3_container {
     position: relative;
     margin: 10px auto;
      width: auto;
     height: auto;
     z-index: 1;
     }
     #f3_container {
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -o-perspective: 1000;
     -ms-perspective: 1000;
     perspective: 1000;
     }
     #f3_card {
      width: 50%;
     height: 40%;
     -webkit-transform-style: preserve-3d;
     -webkit-transition: all 1.0s linear;
     -moz-transform-style: preserve-3d;
     -moz-transition: all 1.0s linear;
     -o-transform-style: preserve-3d;
     -o-transition: all 1.0s linear;
     -ms-transform-style: preserve-3d;
     -ms-transition: all 1.0s linear; 
     transform-style: preserve-3d;
     transition: all 1.0s linear;
     }
     #f3_container:hover #f3_card, #f3_container.hover_effect #f3_card {
     -webkit-transform: rotateZ(180deg);
     -moz-transform: rotateZ(180deg); 
     -o-transform: rotateZ(180deg);
     -ms-transform: rotateZ(180deg); 
     -webkit-box-shadow: -5px -5px 5px #aaa; 
     -moz-box-shadow: -5px -5px 5px #aaa;
     box-shadow: -5px -5px 5px #aaa; 
     }
     </style>




  •  

    Texto












    <div id="f2_container" class="hover">
     <div id="f2_card" class="shadow">
     <div class="front face">
     <img src="https://img-fotki.yandex.ru/get/4909/131165231.6a/0_dc80c_3093e75b_orig"width="195" height="210"/></div>
     <div class="back face center">
     <p>Texto</p></div></div></div>

    CSS

    <style>
     #f2_container {
     position: relative;
     margin: 10px auto;
     width: auto;
     height: auto;
     z-index: 1;
     }
     #f2_container {
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -o-perspective: 1000;
     -ms-perspective: 1000;
     perspective: 1000;
     }
     #f2_card {
     width: 50%;
     height: 35%;
     -webkit-transform-style: preserve-3d;
     -webkit-transition: all 1.0s linear;
     -moz-transform-style: preserve-3d;
     -moz-transition: all 1.0s linear;
     -o-transform-style: preserve-3d;
     -o-transition: all 1.0s linear;
     -ms-transform-style: preserve-3d;
     -ms-transition: all 1.0s linear; 
     transform-style: preserve-3d;
     transition: all 1.0s linear;
     }
     #f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     transform: rotateY(180deg);
     -webkit-box-shadow: -5px 5px 5px #aaa; 
     -moz-box-shadow: -5px 5px 5px #aaa;
     box-shadow: -5px 5px 5px #aaa; 
     }
     </style>




  •  

    Este efecto es perfecto para mostrar información adicional sobre imágenes.

    Mejor tutorial

    © GloriaV

     










    <div id="f1_container" class="hover">
    <div id="f1_card" class="shadow">
    <div class="front face">
    <img src="http://media.giphy.com/media/N8XWcaExxbiFO/giphy.gif" />
    </div>
    <div class="back face center">
    <p>Este efecto es perfecto para mostrar información adicional sobre imágenes.</p>
    <p>Mejor tutorial
    <a href="http://tutorialgloriav.eklablog.com/" target="_new">
    <p>© GloriaV<p>
    </div>
    </div>
    </div>

    CSS

    <style>

    #f1_container {
    margin-top:20px;
    position: relative;
    width: 400px;
    height: 300px;
    z-index: 1;
    }
    .face.back {
    display: none;
    }

    #f1_container {
    -webkit-perspective: 1000;
    }
    #f1_card {
    -webkit-box-shadow: 5px 5px 5px #aaa;
    -moz-box-shadow: 5px 5px 5px #aaa;
    box-shadow: 5px 5px 5px #aaa;
    border-radius: 5px; border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    -ms-transform-style: preserve-3d;
    -ms-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
    }
    #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);

    -webkit-box-shadow: -5px 5px 5px #aaa;
    -moz-box-shadow: -5px 5px 5px #aaa;
    box-shadow: -5px 5px 5px #aaa;
    }
    .face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    }
    .face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
    -webkit-box-sizing: border-box;
    -moz-transform: rotateY(180deg);
    -moz-box-sizing: border-box;
    -o-transform: rotateY(180deg);
    -o-box-sizing: border-box;
    -ms-transform: rotateY(180deg);
    -ms-box-sizing: border-box;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #ccc;
    color:#000;
    }
    </style>




  •  

    Slider
    Texto

    Fuente -http://www.corelangs.com/css/box/float.html

     

    <div class="box2">Slider</div>
    <div class="box3">
    <img src="http://sl.glitter-graphics.net/pub/2422/2422088qh0kylt7go.gif" 
    alt="" width="20" height="16" />Texto</div>

    CSS

    .box1 {
      width:200px;
      height:100px;
      background-image: url('https://lh3.googleusercontent.com/-VrjACCpEwuc/V1_gToQADGI/AAAAAAAB-ko/SvwjNigL32IQFiUq99_Qj0eLvy5FPbDqACL0B/w426-h930/1.jpg');
      margin:0 auto;
      border-radius: 5px; 
      border: 1px dotted #9C9C9C; 
      box-shadow: 1px 1px 5px #666;
      position: relative;
      z-index: 2;
      bottom: -10px;
        }
    .box2 {
      width:250px;
      height:100px;
      border-radius: 5px; 
      border: 1px dotted #9C9C9C; 
      box-shadow: 1px 1px 5px #666;
      background-color:red;
      position:relative;
      z-index:1 ;
      margin:0 auto;
      padding:10px;
        }
    .box3 {
      background-image: url('https://lh3.googleusercontent.com/-VrjACCpEwuc/V1_gToQADGI/AAAAAAAB-ko/SvwjNigL32IQFiUq99_Qj0eLvy5FPbDqACL0B/w426-h930/1.jpg');
      height: 100px;
      border-radius: 5px; 
      border: 1px dotted #9C9C9C; 
      box-shadow: 1px 1px 5px #666;
      margin: 0 auto;
      position: relative;
      top: -10px;
      width:90%;
      z-index: 4;
        }




  •  


    Texto 1

    Texto 2


















    <div id="f1_container" class="hover">
    <div id="f1_card" class="shadow">
    <div class="front face">
    <img src="https://img-fotki.yandex.ru/get/9496/131165231.50/0_c6d17_90e7518d_orig" 
    width="195" height="210" />
    </div> <div class="back face center">
    <p>Texto 1</p><p>Texto 2</p></div></div></div>

    CSS

    <style>
     #f1_container {
     position: relative;
     margin: 10px auto;
     width: auto;
     height: auto;
     z-index: 1;
     }
     .face.back {
     display: none;
     }
     #f1_container {
     -webkit-perspective: 1000;
     }
     #f1_card {
     width: auto;
     height: auto;
     -webkit-transform-style: preserve-3d;
     -webkit-transition: all 1.0s linear;
     -moz-transform-style: preserve-3d;
     -moz-transition: all 1.0s linear;
     -o-transform-style: preserve-3d;
     -o-transition: all 1.0s linear;
     -ms-transform-style: preserve-3d;
     -ms-transition: all 1.0s linear; 
     transform-style: preserve-3d;
     transition: all 1.0s linear; 
     }
     #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     transform: rotateY(180deg);
     -webkit-box-shadow: -5px 5px 5px #aaa; 
     -moz-box-shadow: -5px 5px 5px #aaa;
     box-shadow: -5px 5px 5px #aaa; 
     }
     .face {
     position: absolute;
     width: auto;
     height: auto;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden; 
     }
     .face.back {
     display: block;
     -webkit-transform: rotateY(180deg);
     -webkit-box-sizing: border-box;
     -moz-transform: rotateY(180deg);
     -moz-box-sizing: border-box;
     -o-transform: rotateY(180deg);
     -o-box-sizing: border-box; 
     -ms-transform: rotateY(180deg);
     -ms-box-sizing: border-box;
     transform: rotateY(180deg);
     box-sizing: border-box; 
     padding: 10px;
     color: white;
     text-align: center;
     background-color: #fff;
     }
     </style>




  •  

    Fuente -http://www.corelangs.com/css/box/transparent.html

    Texto
    <div class="duck"> <br>Texto </div> 

    CSS

    <style> 
    .duck { 
    width:100%; 
    height:100%; 
    background: url(http://www.soullightenhancement.com/images/workshop/SOUL-LIGHT-ENHANCEMENT-WITH-HEALING.jpg) no-repeat; 
    border-radius: 5px; 
    box-shadow: 1px 1px 5px #666;
    border:1px dotted #ffffff; 
    font-size: 30px; 
    font-family:Harrington;
    color:rgba(0,0,0,.5); 
    font-weight: 900; 
      } 
    .trBorder { 
    height: 100%; 
    width: 100%; 
    margin: 10px; 
    border-radius: 5px; 
    border: 5px solid rgba(255,255,255,.5); 
      } 
    </style>



                                    


  •  

    Ejemplo



    <div id="Rojo_Negro">Ejemplo</div>

    CSS (1º opción)

    <style>

    #Rojo_Negro {
    text-align:center;
    position:relative;
    background-color:#D6A6D4;
    color:#000;
    -webkit-transition-property:background-color, color;
    -webkit-transition-duration:2s, 2s;
    -moz-transition-property:background-color, color;
    -moz-transition-duration:2s, 2s;
    -o-transition-property:background-color, color;
    -o-transition-duration:2s, 2s;
    transition-property:background-color, color;
    transition-duration:2s, 2s;
    }
    #Rojo_Negro:hover {
    background-color:#A4BBD6;
    color:#FFF;
    -webkit-transition-property:background-color, color;
    -webkit-transition-duration:2s, 2s;
    -moz-transition-property:background-color, color;
    -moz-transition-duration:2s, 2s;
    -o-transition-property:background-color, color;
    -o-transition-duration:2s, 2s;
    transition-property:background-color, color;
    transition-duration:2s, 2s;
    }
    </style>

    CSS (2º opción)

    <style>

    #Rojo_Negro {
    text-align:center;
    position:relative;
    background-color:#D6A6D4;
    color:#000;
    height:40px;
    width:200px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #666;
    border:1px dotted #ffffff;
    -webkit-transition-property:background-color, color;
    -webkit-transition-duration:2s, 2s;
    -moz-transition-property:background-color, color;
    -moz-transition-duration:2s, 2s;
    -o-transition-property:background-color, color;
    -o-transition-duration:2s, 2s;
    transition-property:background-color, color;
    transition-duration:2s, 2s;
    }
    #Rojo_Negro:hover {
    background-color:#A4BBD6;
    color:#FFF;
    border-radius: 15px;
    box-shadow: 1px 1px 5px #666;
    border:1px dotted #000;
    -webkit-transition-property:background-color, color;
    -webkit-transition-duration:2s, 2s;
    -moz-transition-property:background-color, color;
    -moz-transition-duration:2s, 2s;
    -o-transition-property:background-color, color;
    -o-transition-duration:2s, 2s;
    transition-property:background-color, color;
    transition-duration:2s, 2s;
    }
    </style>