From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/sandbox/index.html | 212 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 files/ru/sandbox/index.html (limited to 'files/ru/sandbox') 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 +--- +

 

+ +

Привет мир 1

+ +

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

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);
+   }
+
+
+ +

JavaScript контент

+ +
console.log("HI !!");
+
+ +

Вот результат

+ +

{{EmbedLiveSample('Привет_мир', '100%', 400)}}

+ +

 

+ +

Песочница: 

+ +

Произвольные примеры

+ +

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

 

+ +

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);
+}
+
+
+ +

JavaScript контент

+ +
/* 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();
+  }       )
+
+ +

{{EmbedLiveSample('Произвольные_примеры', '100%', 400)}}

+ +

Возможности

+ + + + + +

 

+ +

 

-- cgit v1.2.3-54-g00ecf