diff options
Diffstat (limited to 'files/ru/sandbox/index.html')
| -rw-r--r-- | files/ru/sandbox/index.html | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/files/ru/sandbox/index.html b/files/ru/sandbox/index.html new file mode 100644 index 0000000000..72f71274f1 --- /dev/null +++ b/files/ru/sandbox/index.html @@ -0,0 +1,212 @@ +--- +title: Песочница +slug: Sandbox +tags: + - Песочница + - Практика +translation_of: Sandbox +--- +<p> </p> + +<h2 id="Привет_Мир" name="Привет_Мир">Привет мир 1</h2> + +<h3 id="HTML_контент">HTML контент</h3> + +<pre class="brush: html"><p id='test_code'>Пример HTML. <br>Ещё пример... </p> + +<section id="text" class="vidim" contenteditable="true"> + <h3>Внеси изменения в стиль...</h3> + <style scoped> +.vidim style { + display:block; + padding:10px; + white-space:pre; + background:rgba(200,200,200,.8); + } +.vidim[contenteditable="true"] { + top:1px; + left:10px; + display:block; + position: fixed; padding:10px; + width: auto; + height: auto; + margin-top: calc(5vmax + -10px); + margin-left: calc(60vw + -40%); + font-family:Consolas, Monaco, monospace; + transform: scale(1); + } +.vidim[contenteditable="true"] { + outline:2px dashed #ccc; + background-color:rgba(100,200,200,.2); + } +.vidim[contenteditable="true"]:hover{ + z-index: 10; + outline:3px solid #28a; + background-color:rgba(100,200,200,1); + } +p[contenteditable="true"] {color:red;} + </style> +</section> + +</pre> + +<h3 id="CSS_контент" name="CSS_контент">CSS контент</h3> + +<pre class="brush: css">body {background: +radial-gradient(black 15%, transparent 16%) 0 0, +radial-gradient(black 15%, transparent 16%) 8px 8px, +radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, +radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; +background-color:#243844; +background-size:16px 16px; +} +#test_code {background-color: #ccc;} +.vidim { + top:1px; + left:10px; + display:block; + position: fixed; + padding:10px; + width: auto; + height: auto; + margin-top: calc(5vmax + -10px); + margin-left: calc(60vw + -40%); + transform: scale(1); + font-family:Consolas, Monaco, monospace; + background-color:rgba(100,200,200,.2); + } + +</pre> + +<h3 id="JavaScript_контент" name="JavaScript_контент">JavaScript контент</h3> + +<pre class="brush: js">console.log("HI !!"); +</pre> + +<h2 id="Вот_результат">Вот результат</h2> + +<p>{{EmbedLiveSample('Привет_мир', '100%', 400)}}</p> + +<p> </p> + +<h4 id="Песочница">Песочница: </h4> + +<h2 id="Произвольные_примеры" name="Произвольные_примеры">Произвольные примеры</h2> + +<h3 id="HTML_контент_2" name="HTML_контент_2">HTML контент</h3> + +<pre class="brush: html"><!-- HTML контент примера --> +<main class="vid"> +<div><h1>- Наведи мыша на квадрат...</h1> + <p>Это будет чёрным.</p> +<section id="text" class="vidim" contenteditable="true"> + <h1>Масштабируй это окно колесом мыши</h1> + <h3>Внеси изменения в стиль...</h3> + <style scoped> +.vidim style { + display:block; + padding:10px; + white-space:pre; + background:rgba(200,200,200,.6); + } +.vidim { + display:block; + position: fixed; + top:1px; + left:10px; + width: auto; + height: auto; + margin-top: calc(5vmax + -10px); + margin-left: calc(60vw + -40%); + padding:10px; + font-family:Consolas, Monaco, monospace; + transform: scale(1); + } + +.vidim[contenteditable="true"] { + outline:2px dashed #ccc; + background-color:rgba(100,200,200,.4); + } +.vidim[contenteditable="true"]:hover { + z-index: 10; + outline:3px solid #28a; + background-color:rgba(100,200,200,1); + } +p[contenteditable="true"] {color:red;} + </style> +</section> + <p contenteditable="true">Это будет красным. <br>Ещё и редактируемым... </p> + <p>Это будет чёрным.</p> +</div> +</main></pre> + +<p> </p> + +<h3 id="CSS_контент_2" name="CSS_контент_2">CSS контент</h3> + +<pre class="brush: css">/* CSS контент примера */ +body {background: +radial-gradient(black 15%, transparent 16%) 0 0, +radial-gradient(black 15%, transparent 16%) 8px 8px, +radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, +radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; +background-color:#243844; +background-size:16px 16px;} +.vid { + margin: 5px; + padding: 5px; + border: 1px solid white; + background-color: rgba(220,220,220,.9); +} + +</pre> + +<h3 id="JavaScript_контент_2" name="JavaScript_контент_2">JavaScript контент</h3> + +<pre class="brush: js">/* JavaScript контент примера */ +function addOnWheel(elem, handler) + {if (elem.addEventListener) + {if ('onwheel' in document) + {elem.addEventListener("wheel", handler);} + else if ('onmousewheel' in document) + {elem.addEventListener("mousewheel", handler);} + else + {elem.addEventListener("MozMousePixelScroll", handler);} + } + else + {text.attachEvent("onmousewheel", handler);} + } + +var scale = 1; + +addOnWheel(text, function(e) + { + var delta = e.deltaY || e.detail || e.wheelDelta; + if (delta > 0) scale += 0.05; + else scale = Math.max(scale -0.05, 0.05); + + text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')'; + e.preventDefault(); + } ) +</pre> + +<p>{{EmbedLiveSample('Произвольные_примеры', '100%', 400)}}</p> + +<p>Возможности</p> + +<ul> + <li>Масштабирование окошечка div</li> + <li>Демонстрация <code>contenteditable="true"</code></li> + <li>Редактирование <code>style scoped</code> </li> + <li>Пользовательские шаблоны</li> +</ul> + +<ul class="htmlelt"> + <li><dfn>Допустимое содержимое</dfn> Нет, так как это {{Glossary("empty element", "bla")}}.</li> + <li> </li> + <li><dfn>Допустимое содержимое</dfn> Нет, так как это {{Glossary("bla", "empty element")}}.</li> +</ul> + +<p> </p> + +<p> </p> |