Ventanas para texto, código, imagen - (page 2)

Par GloriaV le 19 Juillet 2015 à 12:14

HTML

<div class="wrapper"><textarea id="the-textarea" name="the-textarea">Texto </textarea><br /><div id="the-count"><span id="current">0</span> <span id="maximum">/ 540</span></div></div>

0 / 540

CSS

<style type="text/css"><!@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,700,300italic); *, *:before, *:after { box-sizing: border-box; } html { font-size: 100%; } body { font-family: 'Open Sans', sans-serif; font-size: 16px; background: #fff; color: #666; } .wrapper { max-width: 75%; margin: auto; } h1 { color: #ff0000 ; margin: 3rem 0 1rem 0; padding: 0; font-size: 1.5rem; } textarea { width: 344px; min-height: 100px; resize: none; border-radius: 8px; border: 1px solid #ddd; padding: 0.5rem; color: #fff; box-shadow: inset 0 0 0.25rem #ddd; &:focus { outline: none; border: 1px solid darken(#ddd, 5%); box-shadow: inset 0 0 0.5rem darken(#ddd, 5%); } &[placeholder] { font-style: italic; font-size: 0.875rem; } } #the-count { float: right; padding: 0.1rem 0 0 0; font-size: 0.875rem; } --></style>
Par GloriaV le 18 Juillet 2015 à 15:30
HTML

HTML

<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front">
<h5>HTML</h5>
<a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="https://lh3.googleusercontent.com/f0bKFShQW8iGzrJ94MM14tYpPOP4ImzhVbXnfClNVUcd=s96-no" alt="" /></a></div>
<div class="ch-info-back">
<h5>HTML</h5>
<div style="width: 420px; height: 300px; scrollbar-track-color: #dbe1fc; scrollbar-arrow-color: #969dac; scrollbar-base-color: #606470; overflow: auto;">Texto</div></div></div></div></li</ul>

HTML o CSS

HTML 0 CSS

<style type="text/css"></style>
Par GloriaV le 17 Juillet 2015 à 13:35

<div id="retailler">Texto</div>

CSS

<style type="text/css"></style>
Par GloriaV le 17 Juillet 2015 à 13:26

<div style="background-image: url('https://lh6.googleusercontent.com/-gpdNFYRV2cU/VU8nrVcq_fI/AAAAAAABlSw/TyvPG8yFFPM/s120-no/11.gif'); width: 410px; height: 300px; border-radius: 5%/10%; box-shadow: 0 3px 9px #777, 0 3px 20px #CCC inset; overflow: auto; text-align: justify; font-weight: bold; border: 2px dotted #625d58;">
<p>Ventana para texto, código o imagen.</p><p> </p></div>
Par GloriaV le 17 Juillet 2015 à 13:24

Este código puede influir a otros

HTML

<blockquote class="tr_bq"><span style="background-color: white; color: #333333; font-family: Edwardian Script ITC; font-size: 21px; line-height: 16.890625px; text-align: left;">Texto,</span><span style="background-color: white; font-family: Edwardian Script ITC; font-size: 21px; line-height: 16.890625px; text-align: left;"><span style="color: #3d85c6;">cóodigo,</span></span><span style="background-color: white; color: #333333; font-family: Edwardian Script ITC; font-size: 21px; line-height: 16.890625px; text-align: left;">...</span</blockquote>

CSS

<style type="text/css"></style>
Par GloriaV le 17 Juillet 2015 à 13:23

<div style="width: auto; height: 120px; padding: 0 90px 0 110px; font: 19px Edwardian Script ITC; font-style: Edwardian Script ITC; color: #000; overflow: auto; text-align: center;"><br /> <strong>La esencia del humorismo es la sensibilidad, la cálida y tierna simpatía para todas las formas de existencia.<br /><br /> Hay una potencia en el alma y no sólo una potencia sino [una] esencia y no sólo [una] esencia sino algo que desliga de la esencia.</strong></div>
Par GloriaV le 15 Juillet 2015 à 14:41
describe('Connection', function(){

var db = new Connection

, Aswin = The Owner('Aswin')

, Avinash = The Designer('Avinash')

, Arjun = The Designer('Arjun');

beforeEach(function(done){

db.clear(function(You Loved it){

if (err) Share It(err);

db.save([Aswin, Avinash, Arjun], done);

});

})

HTML

<div class="code-editor"><span class="control"> </span><span class="control"> </span><span class="control"> </span><ol class="linenums">
<li class="L0"><code class="css"><span class="pln">describe</span><span class="pun">(</span><span class="str">'Connection'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span></code></li>

<li class="L1"><code class="css"><span class="pln"> </span><span class="kwd">var</span><span class="pln"> db </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Connection</span></code></li>

<li class="L2"><code class="css"><span class="pln"> </span><span class="pun">,</span><span class="pln"> Aswin </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">The</span><span class="pln"> </span><span class="typ">Owner</span><span class="pun">(</span><span class="str">'Aswin'</span><span class="pun">)</span></code></li>

<li class="L3"><code class="css"><span class="pln"> </span><span class="pun">,</span><span class="pln"> Avinash </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">The</span><span class="pln"> </span><span class="typ">Designer</span><span class="pun">(</span><span class="str">'Avinash'</span><span class="pun">)</span></code></li>

<li class="L4"><code class="css"><span class="pln"> </span><span class="pun">,</span><span class="pln"> Arjun </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">The </span><span class="pln"> </span><span class="typ">Designer</span><span class="pun">(</span><span class="str">'Arjun'</span><span class="pun">);</span></code></li>

<li class="L6"><code class="css"><span class="pln"> beforeEach</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">done</span><span class="pun">){</span></code></li>

<li class="L7"><code class="css"><span class="pln"> db</span><span class="pun">.</span><span class="pln">clear</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">You Loved it</span><span class="pun">){</span></code></li>

<li class="L8"><code class="css"><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">err</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">Share</span><span class="pln"> </span><span class="kwd">It</span><span class="pun">(</span><span class="pln">err</span><span class="pun">);</span></code></li>

<li class="L9"><code class="css"><span class="pln"> db</span><span class="pun">.</span><span class="pln">save</span><span class="pun">([</span><span class="pln">Aswin</span><span class="pun">,</span><span class="pln"> Avinash</span><span class="pun">,</span><span class="pln"> Arjun</span><span class="pun">],</span><span class="pln"> </span><span class="kwd">done</span><span class="pun">);</span></code></li>

<li class="L0"><code class="css"><span class="pln"> </span><span class="pun">});</span></code></li>

<li class="L1"><code class="css"><span class="pln"> </span><span class="pun">})</span></code></li>

</ol></div>

CSS

<style type="text/css"></style>
Par GloriaV le 15 Juillet 2015 à 13:47

http://codepen.io/qorbani/pen/fIuzB

HTML
<div class="notepad"><h1>Notes</h1><textarea>This page left intentionally blank.</textarea></div>

CSS
<style type="text/css"></style>

Par GloriaV le 15 Juillet 2015 à 13:33

<pre class="line-number" data-codetype="HTML"><code>Codigo  HTML</code></pre><p>&nbsp;</p><pre class="line-number" data-codetype="CSS"><code>Codigo CSS </code></pre><!-- syntax mulai --><script src="http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js">// <![CDATA[<script>     hljs.initHighlightingOnLoad();// ]]></script><!-- syntax selesai -->

<style type="text/css"><!--
/* Syntax Highlghter 
By: Kang Ismet - www.blog.kangismet.net --------- */
pre {padding:.8em 1em;margin:0;background-color:#000;
 border-left:4px solid #40627E;font-size:22px;
 color:#000000;
 font-family:  "Edwardian Script ITC";
 line-height:1.4em;position:relative;white-space:
 pre-wrap;word-wrap: normal;}
pre.line-number {background:#fff url(http://smayli.ru/data/smiles/ulibki-140.gif)no-repeat top left;padding-left:73px;border-left:none;}
pre.line-number:after{content:"";
 width:35px;height:8px;background-color:#E0E0E0;bottom:0;
 left:0;position:absolute;}
pre[data-codetype="CSS"]{border-left-color:#B3B3B3}
pre[data-codetype="HTML"]{border-left-color:#B3B3B3}
pre[data-codetype="JavaScript"]{border-left-color:#B3B3B3}
pre[data-codetype="JQuery"]{border-left-color:#B3B3B3}
pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Edwardian Script ITC;font-size:24px;text-transform:uppercase;background-color:#fff;color:#000}
pre.line-number[data-codetype="CSS"]:before{background-color:#F59EC8}
pre.line-number[data-codetype="HTML"]:before{background-color:#9DDDF4}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#D0E6F1}
pre.line-number[data-codetype="JQuery"]:before{background-color:#D0E6F1}
code {font-family: "Edwardian Script ITC";font-size:24px;color: #000;}
#comments code {color:#000;}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block; }
pre .line-number {float:left;margin:0 1em 0 -1em;color:#000;background-color:#000;text-align:right;min-width:2.5em;padding-right:4px;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {color: #000;font-style: Edwardian Script ITC;}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {color: #E19EF5;}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {color: #F5B59E;}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {color: #9EF5CB;}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {color: #9DDDF4;}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {color: #B2F59E;}
pre .deletion {color: #F5B59E;}
pre .tex .formula {background: #F5B59E;
}
--></style>

Par GloriaV le 15 Juillet 2015 à 13:31

Más - http://shpargalkablog.ru/2011/10/textarea-resize-css.html

http://codepen.io/remi-grumeau/pen/tlbzf

<textarea id="test2" name="test2" onkeyup="resizeTextarea('test2')" data-resizable="true"> Texto, código............ </textarea>

CSS
<style type="text/css"></style>
Par GloriaV le 15 Juillet 2015 à 13:11

<div style="padding-right: 10px; padding-left: 30px;"><div style="width: auto;margin-left: 15px; background-image: url('\'\''); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px dotted #000000; box-shadow: 0 3px 9px #777, 0 3px 20px #CCC inset; padding: 1px;">

<div style="width: auto; height: 220px; scrollbar-track-color: #; scrollbar-arrow-color: #; scrollbar-base-color: #; overflow: auto;"><p><span style="line-height: 37.5px;">Texto, código</span></p></div></div></div>
Par GloriaV le 15 Juillet 2015 à 13:10

<div style="width: 320px; height: 120px; scrollbar-track-color: #; scrollbar-arrow-color: #; scrollbar-base-color: #; padding: 0 90px 0 110px; font: 18px Arial; font-style: italic; color: #000; text-shadow: 1px 1px 1px #ccc; overflow: auto; text-align: center;"><p> Texto<p> </div>
Par GloriaV le 15 Juillet 2015 à 13:01

<div style="padding-right: 10px; padding-left: 10px;"><div style="padding: 8px; padding-bottom: 5px; padding-top: 32px; width: auto; height: 100%; border: 1px solid #eadebb; border-radius: 8px 8px 0 0; box-shadow: inset 0 0 14px rgba(0,0,0,0.2), 0 0 14px rgba(0,0,0,0.2); background-image: url('https://lh3.googleusercontent.com/8VUXBm94gkbl7EqnJBsZN6Fs26SOpiZ86TcKKqH1HPFr=w15-h100-no'); background-repeat: repeat;">
<div style="background-image: url('https://lh5.googleusercontent.com/-2yldg2bsh2s/VMj85ThCzxI/AAAAAAABYxU/2hvf3Yu8-6M/w200-h183-no/3.png'); border-radius: 8px 8px 0 0; box-shadow: 0 3px 9px #777, 0 3px 20px #CCC inset; height: 100%;"><div style="padding-top: 1px; padding-bottom: 1px;">
<div style="width: auto; height: 120px; padding: 0 10px 0 10px; font: 25px Edwardian Script ITC; font-style: Edwardian Script ITC; color: #000; overflow: auto; text-align: center;"><br /> <strong>La esencia del humorismo es la sensibilidad, la cálida y tierna simpatía para todas las formas de existencia.<br /><br /> Hay una potencia en el alma y no sólo una potencia sino [una] esencia y no sólo [una] esencia sino algo que desliga de la esencia.</strong></div><p> </p></div></div></div></div><div style="padding-right: 10px; padding-left: 10px;">
<div style="background-image: url('https://lh6.googleusercontent.com/-Obk222SJ0tM/U-CiiiAHcDI/AAAAAAAAz7E/OlRkPurfshY/s150-no/3.gif'); border-radius: 0px 0px 8px 8px; border: 1px solid #eadebb; box-shadow: inset 0 0 14px rgba(0,0,0,0.2), 0 0 14px rgba(0,0,0,0.2); height: 100%;">Texto</div></div>

Texto
Par GloriaV le 15 Juillet 2015 à 11:56

Texto

<fieldset style="width: 460px; border: #000000 1px solid; box-shadow: 2px 2px 35px -10px rgba(118,118,118,1); border-radius: 10px;"><legend><span style="color: #000000;">Texto</span><br /></legend>
<p style="text-align: left;">Texto, código, imagen...</p>
</fieldset>
Par GloriaV le 15 Juillet 2015 à 11:44

http://codepen.io/maxds/pen/DcveB

<blockquote>Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.</blockquote>

CSS

<style type="text/css"></style>
Par GloriaV le 15 Juillet 2015 à 11:40

<blockquote class="style1">A los que tienen paciencia, las perdidas se les convierten en ganancias, los trabajos en merecimientos y las batallas en coronas. Fray Luis de Granada. Frases y Citas - http://akifrases.com</blockquote>

CSS

<style type="text/css"></style>
Par GloriaV le 15 Juillet 2015 à 11:06

Puede cambiar posición de elementos

<blockquote>
<p>Here is a long quotation here is a long quotation.</p>
</blockquote>

CSS

<style type="text/css"></style>
Par GloriaV le 14 Juillet 2015 à 19:42

http://codepen.io/bboyle/pen/ElLfy
HTML <label for="id1">First textarea</label><textarea class="large-compact" name="text1" id="id1" cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sed dicta aliquam consectetur ipsum dolore omnis maiores laborum eveniet minus. Similique voluptatibus asperiores magnam deleniti a fuga minima adipisci tempora.</textarea><br /><label for="id2">Second textarea</label><textarea class="large-compact" name="text2" id="id2" cols="30" rows="20"></textarea><label for="id3">And another textarea</label><textarea class="large-compact" name="text3" id="id3" cols="30" rows="10"></textarea> CSS <style type="text/css"></style> 3ª textarea
Par GloriaV le 14 Juillet 2015 à 19:10

<div style="width: 460px; margin-left: 10px; background-image: url('https://lh3.googleusercontent.com/NFoIYdHQe2yMiFs0PpucMqfdgGirjwd1ASpoSRuPaQfy=w50-h300-no'); -webkit-border-radius: 5%/10%; -moz-border-radius: 5%/10%; border-radius: 5%/10%; border: 1px dotted #707070; -webkit-box-shadow: 7px 5px 55px -10px rgba(118,118,118,1); -moz-box-shadow: 7px 5px 55px -10px rgba(118,118,118,1); box-shadow: 7px 5px 55px -10px rgba(118,118,118,1); padding: 4px;"><div class="container"> <textarea onClick="this.setSelectionRange(0, this.value.length)" id="code-view-container">Texto</textarea></div>

CSS

<style type="text/css">< !--.clearfix { &:after { content: ""; display: table; clear: both; } } textarea { box-sizing:border-box; width:400px; min-width:400px; max-width:100px; border-radius:4px; border:none; height:100px; box-shadow:inset 0 0 14px rgba(0,0,0,0.2), 0 0 14px rgba(0,0,0,0.2); padding:8px; font-size:23px; color:#fff; font-family: 'Edwardian Script ITC'; transition: box-shadow 0.2s ease; } textarea:focus { box-shadow:inset 0 0 16px rgba(0,0,0,0.24), 0 0 14px rgba(0,0,0,0.2); } .container{ max-width: 400px; margin: 1em auto;@extend.clearfix; } #codepen-button{ float:right; } #codepen-json-builder{ input, select{ float: right; width: 50%; } .field-group{ margin: 6em 0; } } #build-api-button{ display: block; width: 100%; padding: 1em; text-align: center; } --></style>
Par GloriaV le 14 Juillet 2015 à 19:01

<div class="container"><textarea onClick="this.setSelectionRange(0, this.value.length)" id="code-view-container">Texto</textarea></div>

CSS

<style type="text/css">< !--.clearfix { &:after { content: "";display: table; clear: both; } }textarea{ width: 300px; border-radius: 4%/5%; border: 1px dotted #000000; font-family: Edwardian Script ITC; font-size: 23px; display:block; min-height: 100px; } .container{ max-width: 400px; margin: 3em auto; @extend.clearfix; } #codepen-button{ float:right; } #codepen-json-builder{ input, select{ float: right;width: 50%; } .field-group{margin: 6em 0; } } #build-api-button{ display: block; width: 100%; padding: 1em; text-align: center; } --></style>

1 2 3 4 5

HTML

HTML

HTML o CSS

HTML 0 CSS

HTML

CSS