diff options
Diffstat (limited to 'files/ru/sandbox/index.html')
| -rw-r--r-- | files/ru/sandbox/index.html | 212 |
1 files changed, 0 insertions, 212 deletions
diff --git a/files/ru/sandbox/index.html b/files/ru/sandbox/index.html deleted file mode 100644 index 72f71274f1..0000000000 --- a/files/ru/sandbox/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -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> |