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

     

     

  • Par GloriaV le 21 Juin 2017 à 17:34
     




  • Par GloriaV le 14 Mars 2017 à 13:36
     
    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>




  • Par GloriaV le 5 Décembre 2016 à 19:47
     
    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:#;

}

  • Par GloriaV le 5 Décembre 2016 à 19:05
     
    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;
}

  • Par GloriaV le 3 Décembre 2016 à 13:17
     




  • Par GloriaV le 8 Novembre 2016 à 14:13
     

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




  • Par GloriaV le 17 Juillet 2016 à 16:18
     
    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>




  • Par GloriaV le 18 Avril 2016 à 14:04
     






  • Par GloriaV le 16 Mars 2016 à 11:54
     

    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>




  • Par GloriaV le 4 Octobre 2015 à 12:54
     

     

    HTML






  • Par GloriaV le 24 Juillet 2015 à 15:54
     




  • Par GloriaV le 23 Juillet 2015 à 13:55
     

     

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

     




  • Par GloriaV le 23 Juillet 2015 à 12:50
     


    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>




  • Par GloriaV le 22 Juillet 2015 à 14:59
     

    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>

     

     


  • Par GloriaV le 22 Juillet 2015 à 14:53
     

     

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

  • Par GloriaV le 21 Juillet 2015 à 17:38
     

     

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



  • Par GloriaV le 21 Juillet 2015 à 15:56
     

     

    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

  • Par GloriaV le 21 Juillet 2015 à 11:55
     

    Onglets. Fuente

     







  • Par GloriaV le 20 Juillet 2015 à 17:55
     

     

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

     












  • Par GloriaV le 20 Juillet 2015 à 17:46
     

     

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