From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/ru/sandbox/index.html | 212 -------------------------------------------- 1 file changed, 212 deletions(-) delete mode 100644 files/ru/sandbox/index.html (limited to 'files/ru/sandbox/index.html') 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 ---- -

 

- -

Привет мир 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