•  

     

    http://codepen.io/andrewfiorillo/pen/BAvGH

    Expanding Textarea 

    HTML



    CSS

     


  •  

     

    http://codepen.io/ayoungh/pen/ABJKu


    HTML


    CSS






  •  

     

    http://codepen.io/pcridesagain/pen/Bmdli



    HTML

    Character Limit    



    CSS

    HTML

    Character Limit    




  •  

     

    Con Hover 

    http://codepen.io/RicardoTormo/pen/qroEK





    CSS




  •  

    http://codepen.io/vsync/pen/czgrf



    HTML






  •  

     



    CSS

     


  •  

     





  •  

     





  •  

     




  •  

     

    Para añadir codigo es necesario usar signos:


         
    <                 --- 

    &gt;       
    >                 --- &gt;
    </div>        ---
    &lt;/div&gt; 
    </textarea> --- 
    &lt;/textarea&gt;

    Generador:
    http://html-color-codes.info/html-editor/







  •  

     

    Codigo HTML

    <table style="width: 451px; -webkit-border-radius: 15px 15px 2px 2px; -moz-border-radius: 15px 15px 2px 2px; border-radius: 15px 15px 2px 2px; -webkit-box-shadow: #a74665 2px 10px 11px; -moz-box-shadow: #a74665 2px 10px 11px; box-shadow: #44222f 2px 10px 11px;" cellspacing="0" cellpadding="0" background="https://lh4.googleusercontent.com/-2lNCzXbRfiY/U-tHoJxkhdI/AAAAAAAA37E/Z7FQ0DzDTvE/s40-no/2.gif">

    <tbody><tr><td style="padding: 1px;">

    <table style="width: 453px; -webkit-border-radius: 15px 15px 2px 2px; -moz-border-radius: 15px 15px 2px 2px; border-radius: 15px 15px 2px 2px; box-shadow: inset 1px 1px 20px #000000;" cellspacing="0" cellpadding="0" background="http://f15.ifotki.info/thumb/8489021cea9126cb836dec1882693817c3ebef165211390.gif"><tbody><tr>

    <td style="padding: 1px;">Codigo HTML</td></tr></tbody></table>

    <table style="width: 450px; -webkit-border-radius: 2px 2px 15px 15px; -moz-border-radius: 2px 2px 15px 15px; border-radius: 2px 2px 15px 15px; -webkit-box-shadow: #a74665 2px 10px 11px; -moz-box-shadow: #a74665 2px 10px 11px; box-shadow: #44222f 2px 10px 11px;" cellspacing="0" cellpadding="0" background="https://lh4.googleusercontent.com/-2lNCzXbRfiY/U-tHoJxkhdI/AAAAAAAA37E/Z7FQ0DzDTvE/s40-no/2.gif">

    <tbody><tr><td style="padding: 1px;">

    <table style="width: 450px; margin-left: 0px; -webkit-border-radius: 2px 2px 15px 15px; -moz-border-radius: 2px 2px 15px 15px; border-radius: 2px 2px 15px 15px; box-shadow: inset 1px 1px 20px #000000;" cellspacing="0" cellpadding="0" background="http://f15.ifotki.info/thumb/8489021cea9126cb836dec1882693817c3ebef165211390.gif"><tbody><tr>

    <td style="padding: 2px;" align="center">

    <table border="0" cellspacing="0" cellpadding="0" width="200">

    <tbody><tr><td align="center"><br />

    <div style="width: 430px; height: 150px; scrollbar-track-color: #dca54a; scrollbar-arrow-color: #dca54a; scrollbar-base-color: #dca54a; overflow: auto;">

    <p>&lt;table style="width: 450px; -webkit-border-radius: 25px 25px 0px 0px; -moz-border-radius: 25px 25px 0px 0px; border-radius: 25px 25px 0px 0px; -webkit-box-shadow: #a74665 44px 44px 44px; -moz-box-shadow: #a74665 14px 14px 14px; box-shadow: #44222f 2px 4px 6px;" cellspacing="0" cellpadding="0" background="https://lh4.googleusercontent.com/-jDnmpPFRMgE/VNytDlj4EII/AAAAAAABcDE/zMKtMsr0NR4/w24-h73-no/2.gif"&gt;&lt;tbody&gt;&lt;tr&gt;</p>

    <p>&lt;td style="padding: 4px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;</p>

    <p>&lt;table style="width: 445px; -webkit-border-radius: 0%/160%; -moz-border-radius: 0%/160%; border-radius: 0%/160%; -webkit-box-shadow: #a74665 44px 44px 44px; -moz-box-shadow: #a74665 14px 14px 14px; box-shadow: #44222f 2px 4px 6px;" cellspacing="0" cellpadding="0" background="https://lh4.googleusercontent.com/-jDnmpPFRMgE/VNytDlj4EII/AAAAAAABcDE/zMKtMsr0NR4/w24-h73-no/2.gif"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="padding: 2px;"&gt;</p>

    <p>&lt;table style="width: 400px; margin-left: 12px; -webkit-border-radius: 160%/20%; -moz-border-radius: 160%/20%; border-radius: 160%/20%; -webkit-box-shadow: #000000 44px 44px 44px; -moz-box-shadow: #000000 14px 14px 14px; box-shadow: inset 1px 1px 20px #000000;" cellspacing="0" cellpadding="0" background="https://lh3.googleusercontent.com/-iagbw7IYhX4/VNyRm0igvMI/AAAAAAABb90/gWCWL4jMoD4/w149-h150-no/6.gif"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="padding: 2px;" align="center"&gt;</p>

    <p>&lt;table border="0" cellspacing="0" cellpadding="0" width="200"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td align="center"&gt;&lt;br /&gt;</p>

    <p>&lt;div style="width: 430px; height: 150px; scrollbar-track-color: #dca54a; scrollbar-arrow-color: #dca54a; scrollbar-base-color: #dca54a; overflow: auto;"&gt;&lt;p&gt;Texto, c&amp;oacute;digo.....&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;</p>

    <p>&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;</p>

    <p>&nbsp;</p></div><br /><br /></td></tr>

    </tbody></table></td></tr></tbody></table></td>

    </tr></tbody></table></td></tr></tbody></table>

     







  •  

     

    HTML

    <div style="padding: 10px; width: 440px; border-radius: 15px 15px 0px 0px; height: px; -webkit-box-shadow: 0 3px 9px #777, 0 3px 20px #CCC inset; -moz-box-shadow: 0 3px 9px #777, 0 3px 20px #CCC inset; box-shadow: 0 3pxpx 9px #777, 0 3px 20px #CCC inset; border-top: 14px solid #69B7E7; border-bottom: 2px solid #1D7DB8; border-left: 2px solid #1D7DB8; border-right: 2px solid #1D7DB8; background: #87C7ED; margin-bottom: 100px;"><br />
    <table width="442" height="91">
    <tbody><tr><td style="padding: 5px; text-align: justify;"><table><tbody><tr><td style="padding: 5px; text-align: justify;">

    <div style="padding: 5px; width: 410px; border-radius: 15px 15px 0px 0px; height: px; border: 3px double #1D7DB8; background: #fff; margin-bottom: 10px;">
    <table><tbody><tr><td style="padding: 5px; text-align: justify;">
    <div style="margin-top: 5px; width: 380px; height: 168px; margin-left: 0px; overflow: auto; scrollbar-face-color: #ff0000; scrollbar-highlight-color: #565448; scrollbar-track-color: #565448; scrollbar-arrow-color: #000000;">
    <p>Texto, imagen, c&oacute;digo...</p>
    </div></td></tr></tbody></table></div></td></tr></tbody></table></td></tr></tbody></table></div>

     


  •  

     




  •  

     





  •  

     



    <object style="display: inline-block; margin-left: auto; margin-right: auto;" width="360" height="150" data="http://gifsla.ru/images/animation/11-01.gif" type="text/x-scriptlet"><param name="allowScriptAccess" value="never" /</object>





  •  






  •  

     

    <div style="overflow: auto; scrollbar-arrow-color: pink; scrollbar-base-color: #000000; position: width:100%; height: 100px; background-image: url('https://lh3.googleusercontent.com/-hL_4urRUUXM/V6n9dxKf1-I/AAAAAAACM00/aaoZ5u1DIdgbq8NJE32qm_7E7OotYdklgCLcB/s426/2.gif'); top: 5px; text-align: center; text-indent: 8pt;"><span style="font-weight: 400; text-align: center; font-family: monotype corsiva; font-size: 20px; line-height: 150%; text-shadow: 1px 1px 1px #ebd3e1,1px 2px 2px #c0acb7, 1px 3px 1px #a18996; column-count: 3;"> <span style="color: #000000; font-family: 'monotype corsiva';"><span style="font-family: monotype corsiva;">Texto, código o imagen</span></span></span></div>




  •  

     

    <div style="width: 400; height: 200px; margin-top: 0px; margin-left: 0px; text-align: center; font-size: 20px; overflow: auto;"><span style="font-weight: 400; text-align: center; font-family: monotype corsiva; font-size: 20px; line-height: 150%; text-shadow: 1px 1px 1px #c6b5ff,1px 2px 2px #d0528a, 1px 3px 1px #532037; column-count: 3;"> <span style="color: #000000; font-family: 'monotype corsiva';"><span style="font-family: monotype corsiva;">Texto o imagen</span></span></span></div>




  •  

     

    <img src="http://www.clipart-fr.com/data/gif/coeur/gif_anime_clipart_coeur_057.gif" width="130" height="140" align="left" alt="" />

    <div style=

    "overflow:auto;scrollbar-arrow-color:#000000;scrollbar-base-color: ; position: width:99%;height:140px;background-image:url('https://lh4.googleusercontent.com/-z345er8_JrQ/VDJtyQ2ssnI/AAAAAAABE3o/pwoVSe_o73s/s110-no/12.gif ');top:5px;text-align:left;text-indent:5pt">

    Texto, código....</div>





  •  

     

    <center><table background="https://lh5.googleusercontent.com/-2NFTJUxoGLk/VDJuc3X1iaI/AAAAAAABE5E/vJL4v1JLhEU/s174-no/17.gif">

    <tbody><tr><td height="210" width="345"><center>

    <div style="left: 0px; overflow: auto; width: 400px; text-indent: 5pt; top: 2px; height: 150px; text-align: left;"><div style="text-align: center;"><span style=

    "font-weight: 400; text-align: center; font-family: monotype corsiva; font-size: 20px; line-height: 150%; text-shadow: 1px 1px 1px #c6b5ff,1px 2px 2px #5577a0, 2px 2px 1px #000000; column-count: 3;">

    <span style="color: #000000; font-family: 'monotype corsiva';"><span style="font-family: monotype corsiva;">Texto</span></span></span>

    </div></div></center></td></tr></tbody></table></center>