• Mostrar/Ocultar Spoiler

     


     

  •  


    Texto oculto

    Todos los hombres estamos hechos del mismo barro, pero no del mismo molde.

    HTML


    <p id="spoiler">Texto</p>

     

    CSS


    <style type="text/css"><!--

    #spoiler { opacity:0; filter:alpha(opacity=0); }

    #spoiler:hover { opacity:1.0; filter:alpha(opacity=100); }

    --></style>

     

     


    votre commentaire
  •  


    Spoiler

    http://codepen.io/lonekorean/pen/kocrl
    1. http://codepen.io/lonekorean/pen/kocrl
    2. http://codepen.io/Shinobi-san/pen/lLHhw
    3. http://codepen.io/shshaw/pen/gEiDt
    4. http://codepen.io/syanshammi/pen/CEGLt
    5. http://codepen.io/darkwing/pen/DbKtx
    6. http://codepen.io/Kmlkmljkl/pen/GgnEj
    7. http://codepen.io/asdillon/pen/lGnaL
    8. http://codepen.io/skrippi/pen/laKpk
    9. http://codepen.io/kharma/pen/oefug
    10. http://codepen.io/telinc1/pen/Fresy
    11. http://codepen.io/Manumanu/pen/PwmoNK
    12. http://codepen.io/franklynroth/pen/KwWyNb
    13. http://codepen.io/AngelKrak/pen/blvFy
    14. http://codepen.io/cerita/pen/PwbpLb
    15. http://codepen.io/scotty_paterson/pen/hFBEK
    16. http://codepen.io/AngelKrak/pen/mFieu
    17. http://codepen.io/Develonaut/pen/wcpDx
    18. http://codepen.io/suez/pen/wHKls
    19. http://codepen.io/anon/pen/Estiu
    20. http://codepen.io/JHicks/pen/myrPrB
    21. http://codepen.io/flyholander/pen/oCdEr
    22. http://codepen.io/iiil/pen/uFqLh
    23. http://codepen.io/HarryMills/pen/ajhkn
    24. http://codepen.io/AngelKrak/pen/yudhi
    25. http://codepen.io/Trejo/pen/IwLql
    25. http://codepen.io/jQzz/pen/NPpKEy
    27. http://codepen.io/eknoor292/pen/emOGea
    28. http://codepen.io/AngelKrak/pen/ngwsc
    29. http://codepen.io/glanzb/pen/hsfiL
    30. http://codepen.io/udafinio/pen/pvyXGp
    31. http://codepen.io/anon/pen/EaKGEx
    32. http://codepen.io/anon/pen/YPyKKR
    33. http://codepen.io/garrettdoll/pen/clJDs
    34. http://codepen.io/akr/pen/sJrBA
    35. http://codepen.io/yappa/pen/qEmKMw
    36. http://codepen.io/anon/pen/qEjKGv
    37. http://codepen.io/anon/pen/pvROZP
    38. http://codepen.io/anon/pen/dPoJee
    39. http://codepen.io/AngelKrak/pen/tArvm
    40. Con imagen
    41. http://cssdeck.com/glossy-social-media-select-box
    42. http://cssdeck.com/labs/simple
    43. html-and-css-snippet-code-highlighting
    44. http://cssdeck.com/labs/stylish-google-code-prettify
    45. http://cssdeck.com/labs/pure-css-osx-terminal
    46. http://cssdeck.com/labs/animated-skills-bar-2
    47. http://cssdeck.com/labs/pxgbxrlj
    48. http://cssdeck.com/labs/openclose-interactive-tooltip
    49. http://tympanus.net/codrops/accordion-with-css3/


    votre commentaire
  •  


    OcultarMonstrar

    Si el Creador puso tantos límites a la inteligencia humana, parece injusto que no hay señalado también límites a la estupidez humana.


    HTML


    <div id="container"><a id="hide" class="button" href="#show">Ocultar</a><a id="show" class="button" href="#container">Monstrar</a><p id="content">Texto oculto</p>



    CSS


    /* code minimum. */ #container #content { height: 1px; width: 440px; overflow: hidden; border: 1px solid silver; } #container:target #content { height: auto; } /* ci-dessous : pour cacher les liens. */ #container:target #hide, #container #show { display: inline; } #container:target #show, #container #hide { display: none; }

     


    votre commentaire
  •  


    Tutorial de: www.todocursosonline.es

    HTML


    <div class="general"><img src="http://u.jimdo.com/www62/o/s54593b1f8c82bdd3/img/i406ccdafd7ffd018/1402577241/std/image.gif" alt="" />
    <div class="mascara"><p>Tutorial de: www.todocursosonline.es</p></div></div>

     



    CSS


    <style type="text/css"><!--
    .general .mascara { top: -200px; opacity: 0; -webkit-transition: all 0.3s ease-out 0.5s; -moz-transition: all 0.3s ease-out 0.5s; -o-transition: all 0.3s ease-out 0.5s; -ms-transition: all 0.3s ease-out 0.5s; transition: all 0.3s ease-out 0.5s; } .general:hover .mascara { opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.9s linear; -moz-animation: bounceY 0.9s linear; -ms-animation: bounceY 0.9s linear; animation: bounceY 0.9s linear; }--></style>

     

     


    votre commentaire
  •  


    HTML
    <div class="ma_boite3">
    <div class="title_box6">Codigo</div>
    <div class="content_box" style="overflow: none; font-size: 19pt;">Texto oculto</div>
    </div>


    CSS


    <style type="text/css"><!--
    .ma_boite3{
    width:300px;
    height:30px;
    text-align:center;
    overflow:hidden;
    transition: height 1s;
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
    -o-transition: height 1s;}
    .ma_boite3:hover{
    width:460px;
    height:480px;}
    .title_box6{
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    color:black;
    background-image:
    background-image: -webkit-gradient( linear, right top, right bottom, color-stop(0, #81BCE4), color-stop(0.5, #FFFFFF), color-stop(1, #DD84E6));
    background-image: -o-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
    background-image: -moz-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
    background-image: -webkit-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
    background-image: -ms-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
    background-image: linear-gradient(to bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
    border: 1px solid black;
    border-radius: 15px 15px 0px 0px;}
    --></style>

     

     


    votre commentaire
  •  


    <div class="ma_boite3"><div class="title_box6"><div style="width: 450px; height: 400px; scrollbar-track-color: #0a0308; scrollbar-arrow-color: #264250; scrollbar-base-color: #000000; overflow: auto;">C&oacute;digo, texto</div></div> </div>



    CSS


    <style type="text/css"><!--
    .ma_boite3{
    width:300px;
    height:30px;
    text-align:center;
    overflow:hidden;
    transition: height 1s;
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
    -o-transition: height 1s;}
    .ma_boite3:hover{
    width:460px;
    height:380px;}
    .title_box6{
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    color:black;
    background-image:
    background-image: -webkit-gradient( linear, right top, right bottom, color-stop(0, #a9caec), color-stop(0.5, #FFFFFF), color-stop(1, #6b99c8));
    background-image: -o-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
    background-image: -moz-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
    background-image: -webkit-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
    background-image: -ms-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
    background-image: linear-gradient(to bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
    border: 1px dotted #ccc;
    border-radius: 15px ;}
    --></style>

     




    votre commentaire
  •  


    <div class="quotetitle"><input style="height: 28px; width: 200px; font-size: 16px; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'FERMER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'REVOIR'; }" type="button" value="Codigo"/></div><div class="quotecontent"><div style="display: none;"><p>Texto</p></div></div>

     


    votre commentaire
  •  


    <div class="quotetitle"><input style="height: 28px; width: 200px; background-color: #cef5f9; font-size: 16px; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'FERMER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'REVOIR'; }" type="button" value="Codigo" /></div>
    <div class="quotecontent"><div style="display: none;"><div style="left: 0px; overflow: auto; width: 390px; text-indent: 2pt; scrollbar-arrow-color: #0033CC; scrollbar-base-color: #000000; top: 2px; height: 140px; text-align: center;"><p>Texto, c&oacute;digo...</p></div></div></div>




    votre commentaire
  •  

    <div class="quotetitle"><input style="height: 28px; width: 200px; background-color: #fff;font-size: 16px; margin: 0px; padding: 0px; border-radius: 15px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'FERMER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'REVOIR'; }" type="button" value="Codigo" /></div><div class="quotecontent"><div style="display: none;"><p>Texto</p></div></div>




    votre commentaire
  •  


    <div class="quotetitle"><input style="height: 28px; width: 200px; background-color: #f0f0ff; font-size: 16px; margin: 0px; padding: 0px; border-radius: 15px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'FERMER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'REVOIR'; }" type="button" value="Codigo" /></div>
    <div class="quotecontent"><div style="display: none;"><div style="left: 0px; overflow: auto; width: 390px; text-indent: 2pt; scrollbar-arrow-color: #0033CC; scrollbar-base-color: #000000; top: 2px; height: 140px; text-align: center;"><p>Texto, código...</p></div></div></div>




    votre commentaire
  •  


    <div style="margin-bottom: 20px; margin-top: 5px;"><div class="quotetitle"><strong></strong> <input style="height: 40px; width: 110px; font-size: TAILLE DE LA POLICE DU BOUTONpx; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher';}" src="http://www.gifmania.com/Gif-Animados-Web/Imagenes-Botones-Web/Botones-Web-Bolas/Interruptor-Redondo-Alas-64990.gif" type="image" value="Texto en bot&oacute;n" /></div><div class="quotecontent"><div style="display: none;"><p>Texto</p></div></div></div>



     


    votre commentaire
  •  


    <div style="margin-bottom: 20px; margin-top: 5px;"><div class="quotetitle"><strong></strong> <input style="height: 100px; width: 100px; font-size: TAILLE DE LA POLICE DU BOUTONpx; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher';}" src="http://papillondavril.p.a.pic.centerblog.net/db941b32.GIF" type="image" value="Texto en bot&oacute;n" /></div>
    <div class="quotecontent"><div style="display: none;"><div style="left: 0px; overflow: auto; width: 390px; text-indent: 2pt; scrollbar-arrow-color: #0033CC; scrollbar-base-color: #000000; top: 2px; height: 140px; text-align: center;"><p>Texto, c&oacute;digo...</p></div></div></div></div>



     


    votre commentaire
  •  




    HTML

    <div id="hoverme">

    <img src="https://lh4.googleusercontent.com/-nAh8l6HtbuQ/VOXq75-qGdI/AAAAAAABcxU/I_g9oeMPWfM/w86-h91-no/6.gif">

    <p><div align="left">

    <div style="margin-top: 5px; width: 430px; height: 200px; margin-left: 0px; overflow: auto; scrollbar-face-color: #ff0000; scrollbar-highlight-color: #565448; scrollbar-track-color: #565448; scrollbar-arrow-color: #000000;">

    <p align="left">Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen,Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código... código...</div></div>

    </div>

     



    HTML o CSS

    <style type="text/css"><!--  

    html{
    -webkit-font-smoothing: antialiased;
    }
    Body{
    background-color: #eeeeee;
    font-family: Edwardian Script ITC;
    font-size: 22px;
    }
    h1{
    margin: 0 auto;
    text-align: center;
    margin-top: 100px;
    color: #545454;
    font-weight: 800;
    text-shadow: 3px 3px 3px rgba(255,255,255,0.3);
    }
    #hoverme{
    width: 280px;
    height: auto;
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
    background-color: #fff;
    padding: 40px;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.2), 0 0 14px rgba(0,0,0,0.2);
    border-radius: 20px;
    }
    #hoverme p{
    opacity: 0;
    transition:opacity 0.2s linear, margin 0.2s linear;
    font-family: Edwardian Script ITC;
    font-size: 22px;
    font-style: italic;
    color: #666666;
    margin-top: 10px;
    margin-bottom: 20px;
    }
    #hoverme:hover p{
    opacity: 1;
    margin-top: 20px;
    margin-bottom: 10px;
    }
    #hoverme:hover{
    cursor: pointer;
    }
    img{
    border-radius: 20px;
    box-shadow: #6d3112 2px 2px 11px;
    border: 1px dotted #ccc; }
     --></style> 

     




    votre commentaire
  •  



    HTML


    <div id="spoiler" style="display: none;">
        Texto oculto</div>
    <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"
    title="Click to show/hide" type="button">Abrir/Cerrar</button>
     

     


    votre commentaire
  •  





     


    votre commentaire
  •  


     


    votre commentaire
  •  

     

    HTML


    <div style="padding-bottom: 10px; padding-top: 10px;">
    <div class="quotetitle"><strong></strong> <input style="height: 57px; width: 143px; font-size: 24px; color: #ffffff; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Fermer'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Blogs utiles &gt;&gt;&gt; Clic';}" src="http://www.123gifs.eu/free-gifs/love/liebe-0393.gif" type="image" value="Blogs utiles &gt;&gt;&gt; Clic" /></div>
    <div class="quotecontent"><div style="display: none;"><p>&nbsp;</p><p><a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/j8TA7u2vBt7maG9CHh9APsLmuIk/loria-lirio1.gif" alt="" width="66" height="70px" /></a></p><p>&nbsp;</p></div></div></div></div>

     

     


    votre commentaire
  •  


    HTML
    <div style="margin: 8px auto; border: 1px dotted #000; border-radius: 20px 20px 10px 10px;box-shadow: 0 1px 5px #777; width: 450px; height: 300px; border-left-width: 1px;">
    <div style="background: #EBC517;box-shadow: 0 1px 5px #777, 0 2px 10px #CCC inset; height: 19px; border-radius: 20px 20px 5px 5px; font: 26px Edwardian Script ITC; font-weight: bold; cursor: pointer;" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; btn = this.getElementsByTagName('img')[0]; if (hidn.style.display != '') { hidn.style.display = ''; orimg = btn.src; btn.src = 'http://www.artfile.ru/i/sm/ad.gif'; } else { hidn.style.display = 'none'; btn.src = orimg; }"><img style="margin: 0; padding: 5px 5px 0;" src="http://www.liveinternet.ru/images/brandnewsmilies/good.gif" alt="" /> {Texto1}</div>
    <div style="display: none; background: #; border-top: 1px dotted #000; padding: 2px;"><div style="width: 416px; height: 280px; scrollbar-track-color: #; scrollbar-arrow-color: #; scrollbar-base-color: #; padding: 0 20px 0 10px; font: 24px Edwardian Script ITC; color: #000; text-shadow: 1px 1px 1px #ccc; overflow: auto; text-align: center;"> </p>Texto oculto<p></div></div></div>

     

     


    votre commentaire