• Ventanas para texto, código, imagen

     


     

     





     


    visible, el contenido que sobresale no se corta. Se renderiza fuera del área que tenía asignado. Este es el valor por defecto.
    hidden, el contenido que sobresale se corta y el resto del contenido se queda como invisible.The overflow is clipped, and the rest of the content will be invisible.
    scroll, el contenido que sobresale se corta, pero se añade una scrollbar que nos permite llegar al resto del contenido.
    auto, si el contenido que sobresale se corta, se añade una scrollbar para ver el resto del contenido.content inherit, el valor será heredado del elemento padre.

     

     

  •  




  •  
    Código:
    <dl class="codebox" style="margin: 6px 3px; padding: 3px; 
    border-width: 1px 1px 2px; border-style: solid;
    border-color: #3399cc;
    font-size: 13px; border-radius: 3px; color: #555555;
    box-shadow: inset 0px -6px 10px rgba(0,0,0,0.6),
    inset 0px 2px 3px rgba(252,255,255,0.7), 0px 2px 5px -6px
    rgba(0,0,0,0.5); font-family: Verdana, Arial,
    Helvetica, sans-serif; line-height: 18.2px;
    background: #f6f6f6 !important;
    width: 500px; height: 100%;">
    <dt style="margin: -3px -3px 10px; padding: 3px;
    border: none; font-size: 12px; font-weight: bold;
    color: #ffffff; background:
    #3399cc;">C&oacute;digo:</dt>
    <dd style="margin: 0px; padding: 0px;">
    <pre class="prettyprint" style="margin-top: 0px;
    margin-bottom: 0px;
    padding: 2px; font-size: 13px; font-family: Monaco,
    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
    'Lucida Console',
    monospace;"><span class="tag" style="margin: 0px;
    padding: 0px; color: #000;"> Texto</span>
    </pre>
    </dd>
    </dl>




  •  
    HTML
    <pre>Deporte favorito 
    
    Según la edad, el deporte favorito de un hombre es:
    17 - Hacer el amor, hacer el amor, hacer el amor.
    25 - Hacer el amor , hacer el amor, fútbol.
    35 - Hacer el amor, fútbol.
    48 - Fútbol y hacer el amor a veces.
    66 - Dormir.</pre>

    CSS

    /*Pre*/
    pre {
        display: block;
        font-family: monospace;
       text-shadow:2px -3px 2px rgba(0, 0, 0, 0.35);
        border: 3px double #666;
        border-radius: 4px; 
        padding: 0.5em;
    background: rgba(255, 254, 254, 0.2); 
       white-space: pre;
       overflow: auto;
       max-height: auto; 
      max-width: 450px;
      margin: 1em;
      box-shadow: inset rgba(0,0,0,.6) 0 -6px 5px,inset rgba(252,255,255,.7) 0 2px 5px,rgba(0,0,0,.8) 0 8px 5px -7px;
     text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
     -webkit-transition: all 1s ease; 
     -moz-transition: all 1s ease; 
     -o-transition: all 1s ease;
    }
    pre:hover {
     opacity: 0,9;
     visibility: visible;
     border: 1px dotted #4F4F4F;
     border-radius:5px;
    text-shadow: 0px 0px 0 #e7e7e7,1px 1px 0 #cfcfcf,1px 2px 0 #b6b6b6,3px 3px 0 #9e9e9e,1px 3px 0 #868686,1px 4px 4px rgba(0,0,0,1),2px 5px 1px rgba(0,0,0,0.5),0px 0px 4px rgba(0,0,0,0.2);
     background:#;
    
    }

  •  
    HTML



    <pre>¿Cuáles son los cuatro defectos de
    un hombre?
    Pues una cabeza que no
    funciona, dos pechos que
    no amamantan, dos bolas
    que no ruedan y un
    pajarito que no vuela.</pre>

    CSS

    /*Pre*/
    pre {
        display: block;
        font-family: monospace;
       text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
        border: 1px dashed #666;
        border-radius: 5px; 
        padding: 0.5em;
    background: rgba(255, 254, 254, 0.2); 
       white-space: pre;
       overflow: auto;
        margin: 1em;
      box-shadow: inset 0px -1px 1px rgba(0,0,0,0.6), inset 0px 1px 1px rgba(252,255,255,0.7), 0px 1px 1px -1px rgba(0,0,0,0.8);
      text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
     -webkit-transition: all 1s ease; 
     -moz-transition: all 1s ease; 
     -o-transition: all 1s ease;
    }
    pre:hover {
       opacity: 0,9;
       visibility: visible;
      text-shadow:1px -1px 1px rgba(0, 0, 0, 0.25);
     background:#FAFAFA;
    border:4px double #4F4F4F;
     border-radius:5px;
     text-shadow:1px 1px 2px #ddd;
     color:#000;
    }

  •  




  •  

    <div id="scroll" style="box-sizing: content-box; width: auto; height: 120px; border-radius: 5px; border: 1px solid #999; box-shadow: black 0px 0px 2px; overflow: auto; font-size: 12px; position: relative; margin: 20px auto 40px; resize: horizontal;">
    <p style="box-sizing: content-box; margin-bottom: 10px;"><span style="box-sizing: content-box; color: #000;">Texto</span></p>
    </div>




  •  
    HTML
    <div class="bbQuoteBlock" style="border: 1px solid #000; font-stretch: normal; font-size: 15px; line-height: 21px; font-family: 'Times New Roman'; color: #000; border-radius: 5px 5px 2px 2px; margin: 5px 0px 10px !important; background: url('/images/quoteblock.gif') 0px 15px repeat-y #FAFEFF;"> <div class="bbQuoteName" style="border-radius: 5px; font-size: 7pt; background: url('/images/quoteblock.gif') 0px -1px no-repeat; padding: 13px !important 0px !important 0px !important 5px;">HTML</div> <div class="quoteMessage" style="padding: 1px 20px 15px 30px; margin: 3px 20px 0px; border: 1px dotted #002129; border-radius: 5px 5px; max-height: 200px; overflow: auto; background: url('/images/quotes.png') 0px 2px no-repeat;"><span style="font-family: Courier;">Texto</span></div> </div>




  •  






  •  

    1º Texto

    2º Texto3º Texto

    <div style="padding-right: 10px; padding-left: 10px;"><div style="border-radius: 3px; box-shadow: 2px 2px 14px #000000;background-image: url(http://content.foto.mail.ru/mail/olgaolevka/_blogs/i-36096.jpg); background-repeat: repeat; background-attachment: fixed; overflow: scroll; width: 450px; height: 200px;">
    <p>1&ordm; Texto</p><div style=" background-image: url(http://img0.liveinternet.ru/images/attach/c/0//46/487/46487456_1247966062_2.jpg); background-repeat: repeat; background-attachment: fixed; overflow: scroll; width: 440px; height: 90px; ">
    <p>2&ordm; Texto<span class="google-src-text" style="direction: ltr; text-align: left;">3&ordm; Texto</span></p></div>4&ordm; Texto</div>




  •  

     

    HTML






  •  




  •  

     

    Resultado




    HTML

    Texto

     

    <!------------------------------------------------------>
    <div class="article_text">
    <div class="code" style="width: 70%; box-shadow: 1px 1px 6px #000000; border-radius: 10px; text-align: center;"><span style="font-family: 'Edwardian Script ITC'; font-size: 29px;">Resultado</span><br /><br /><br /></div>
    </div>
    <p><br /><br /></p>
    <!------------------ Code html ----------------------->
    <div class="code" style="width: 550px; height: auto; box-shadow: 1px 1px 6px #000000; border-radius: 10px; overflow: auto;"><span style="font-family: 'Edwardian Script ITC'; font-size: 23px;">HTML</span>
    <div class="dp-highlighter">
    <div class="bar">
    <div class="tools">
    <p>Texto</p>
    <p>&nbsp;</p>
    </div>
    </div>
    <p>Texto, c&oacute;digo</p>
    <p>&nbsp;</p>
    </div>
    <p>&nbsp;</p>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <!------------Code HTML----------------------------->
    <div class="code" style="width: 550px; box-shadow: 1px 1px 6px #000000; border-radius: 10px; height: auto; overflow: auto;"><span style="font-family: 'Edwardian Script ITC'; font-size: 23px;">CSS</span>
    <div class="dp-highlighter">
    <div class="bar">
    <div class="tools">
    <p>Texto</p>
    <p>&nbsp;</p>
    </div>
    </div>
    <p>Texto, c&oacute;digo....</p>
    <p>&nbsp;</p>
    </div>
    <textarea id="txtArea" class="txtarea" onclick="this.focus();this.select()" cols="55" rows="3">Texto, código....</textarea><br /><br /></div>

     

     

     

     

    CSS

    Texto

     

    Texto, código....

     




  •  


    HTML

    
    
     <p class="titre">HTML </p> 
     <!------------------------------HighLight-CSS----------------------------------------------------->
     <pre class="pre-lh"><code class="hljs css"> 
     <span class="hljs-class"> Texto, c&oacute;digo...</span> 
     </code></pre>
    
    

    CSS

     

    
     <style><!--
    .titre {
     max-width:100px;
     padding:5px;
      
     background-color:#A9D9EF;
    color: #fff;
     
    border:2px double #78ABCC; border-radius:15px/5px;
     box-shadow:6px 6px 10px #ccc;
     }
     .pre-lh {
     width: 90%;
     border: 0px; 
     padding: 0;
     border-radius:15px/5px;
     box-shadow: 6px 6px 10px #ccc;
     margin-bottom: 20px;
     margin-left: 20px;
     }
    
      position:absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      transition: all 1s ease-in;
      color: #fff;
      background-color: #fff;
      padding: 10px;
      backface-visibility: hidden;
    box-shadow:6px 6px 10px #ccc;
    }
    .flipcard .back 
    {
      position:absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      transition: all 1s ease-in;
      color: #fff;
      background-color: #fff;
      padding: 10px;
      backface-visibility: hidden;
    box-shadow:6px 6px 10px #ccc;
    }
    --></style>
    
    




  •  

    HTML

    Texto

    <div class="code" style="max-height: none; overview: none;">
    <p>HTML</p>
    <div id="cadre-1">
    <p>Texto, c&oacute;digo....</p>
    <p>&nbsp;</p>
    </div>
    <div id="cadre-1" style="height: 200px; overflow: auto;">
    <p>Texto, c&oacute;digo....</p>
    <p>&nbsp;</p>
    </div>
    </div>

     

     


  •  

     

    <div id="cadre-1" style="height: 100px; width: 280px; overflow: auto;">Texto, image, c&oacute;digo....</div>

  •  

     

     <pre class="ruby"> HML Texto, c&oacute;digo ....</pre><pre>CSS  Texto, c&oacute;digo....</pre><pre>Texto, c&oacute;digo....</pre>
    
    <style type="text/css"><!--pre {
     font-family:Edwardian Script ITC;
       
        font-size: 25px;
        color: #000;
      background-color: #fff;
      padding: 5px;
      color: #000;
      border-radius: 4px;
      border: 1px dotted #292929;
     box-shadow: 0 2px 6px #777, 0 3px 10px #CCC inset;
    }
    
    pre .title {
      color: inherit;
    }
    --></style>
    
    Texto, código....
    



  •  

     

    http://codepen.io/arlinadesign/pen/xboQQb

    <div id="wrapper">
    <pre class="code code-html"><label>HTML</label><code>C&oacute;digo, texto HML</code></pre>
    <pre class="code code-css"><label>CSS</label><code>C&oacute;digo, texto CSS</code></pre>
    <pre class="code code-javascript"><label>JS</label><code>C&oacute;digo, texto JS</code></pre>
    <pre class="code code-jquery"><label>Jquery</label><code>C&oacute;digo, texto Jquery</code></pre></div>
    <style type="text/css"><!--
    body {
    background:#fff;
    padding:0;
    margin:0;
    }

    #wrapper {
    padding:5%;
    margin:0 auto;
    }

    /* CSS Simple Pre Code */
    pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    }

    pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px dotted #292929;
    position: relative;
    }

    pre.code label {
    font-family:Edwardian Script ITC;
    font-weight: bold;
    font-size: 17px;
    color: #000;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    }

    pre.code code {
    font-family: "Edwardian Script ITC","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 27px;
    line-height: 26px;
    color: #ddd;
    }

    pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-family:Edwardian Script ITC;
    font-size: 22px;
    color: #000;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
    }

    pre:hover::after {
    opacity: 0;
    visibility: visible;
    }

    pre.code-css code {
    color: #1013B1;
    }

    pre.code-html code {
    color: #0F62B0;
    }

    pre.code-javascript code {
    color: #0FAEAB;
    }

    pre.code-jquery code {
    color: #AE0F61;
    }
    --></style>
    Código, texto JS
    Código, texto JS
    Código, texto Jquery
    Código, texto Jquery

  •  

    Onglets. Fuente

     







  •  

     

    <div class="grain" style="float: left; width: 460px; height: 160px; border-radius: 10px; border: 1px ridge white; box-shadow: 4px 4px 6px black;"><div style="width: 454px; height: 220px; scrollbar-track-color: #; scrollbar-arrow-color: #; scrollbar-base-color: #; overflow: auto;"><p>Texto</p><p>&nbsp;</p></div></div>

     












  •  

     

    <div style=

    "overflow-x; auto; overflow-y: auto; height: 200px; width: 480px;border-radius: 20px; background-color: #xxxxxx; text-align: center; border-width: 1px; border-color: #ccc;box-shadow:inset 1px 1px 10px #000000; border-style: dotted; padding: 5px;">

        <p style="text-align: center; margin: 0px;">

            <span style="color: #000000;">Texto</span>

        </p>

        <ul style="list-style-type: none; padding: 0px; margin: 0px;"></ul></div>