Sandbox

Песочница: 

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

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>
<svg viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg"> 
  <style> 
    #mal {font: italic 16px sans-serif; transform: skewX(-30deg);} 
    #hey {font: bold 26px sans-serif; fill: #6de;} 
  </style>   
  <text id="mal" x="0" y="68" transform="rotate(180, 50, 50)"> 
    Пример</text>   
  <text id="hey" x="110" y="40" transform="skewY(20)">ротации SVG-текста.</text> 
</svg>

 

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

Возможности

  • Масштабирование окошечка div
  • Демонстрация contenteditable="true"
  • Редактирование style scoped 
  • Пользовательские шаблоны

Метки документа и участники

Внесли вклад в эту страницу: warsan, ururuu
Обновлялась последний раз: warsan,