140 lines
6.8 KiB
HTML
140 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>CSS Element Offsets</title>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="hint"></div>
|
||
|
|
<div class="example-wrapper">
|
||
|
|
<div class="margin offsets-vert">
|
||
|
|
<span class="description">margin</span>
|
||
|
|
<span data-for="margin-top">10</span>
|
||
|
|
<div class="offsets-horiz">
|
||
|
|
<span data-for="margin-left">10</span>
|
||
|
|
<div class="border offsets-vert">
|
||
|
|
<span class="description">border</span>
|
||
|
|
<span data-for="border-top">2</span>
|
||
|
|
<div class="offsets-horiz">
|
||
|
|
<span data-for="border-left">2</span>
|
||
|
|
<div class="padding offsets-vert">
|
||
|
|
<span class="description">padding</span>
|
||
|
|
<span data-for="padding-top">5</span>
|
||
|
|
<div class="offsets-horiz">
|
||
|
|
<span data-for="padding-left">5</span>
|
||
|
|
<div class="element">
|
||
|
|
<div class="content">
|
||
|
|
<span data-for="width">130</span>
|
||
|
|
x
|
||
|
|
<span data-for="height">50</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span data-for="padding-right">5</span>
|
||
|
|
</div>
|
||
|
|
<span data-for="padding-bottom">5</span>
|
||
|
|
</div>
|
||
|
|
<span data-for="border-right">2</span>
|
||
|
|
</div>
|
||
|
|
<span data-for="border-bottom">2</span>
|
||
|
|
</div>
|
||
|
|
<span data-for="margin-right">10</span>
|
||
|
|
</div>
|
||
|
|
<span data-for="margin-bottom">10</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="controls-wrapper">
|
||
|
|
<div class="switches">
|
||
|
|
<div class="controls-column">
|
||
|
|
<div class="control">
|
||
|
|
<input type="checkbox" id="dark-mode">
|
||
|
|
<label for="dark-mode">
|
||
|
|
<span>Dark mode</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<input type="checkbox" id="show-element">
|
||
|
|
<label for="show-element">
|
||
|
|
<span>Show element</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<input type="checkbox" id="show-css">
|
||
|
|
<label for="show-css">
|
||
|
|
<span>Show CSS code</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<textarea class="css-code"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="controls">
|
||
|
|
<div class="controls-column">
|
||
|
|
<div class="control">
|
||
|
|
<label for="margin-top">margin-top</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="10" id="margin-top">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="margin-left">margin-left</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="10" id="margin-left">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="margin-right">margin-right</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="10" id="margin-right">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="margin-bottom">margin-bottom</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="10" id="margin-bottom">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="controls-column">
|
||
|
|
<div class="control">
|
||
|
|
<label for="border-top">border-top</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="2" id="border-top">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="border-left">border-left</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="2" id="border-left">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="border-right">border-right</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="2" id="border-right">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="border-bottom">border-bottom</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="2" id="border-bottom">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="controls-column">
|
||
|
|
<div class="control">
|
||
|
|
<label for="padding-top">padding-top</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="5" id="padding-top">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="padding-left">padding-left</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="5" id="padding-left">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="padding-right">padding-right</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="5" id="padding-right">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="padding-bottom">padding-bottom</label>
|
||
|
|
<input type="range" min="0" max="50" step="1" value="5" id="padding-bottom">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="controls-column">
|
||
|
|
<div class="control">
|
||
|
|
<label for="width">width</label>
|
||
|
|
<input type="range" min="0" max="500" step="1" value="130" id="width">
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<label for="height">height</label>
|
||
|
|
<input type="range" min="0" max="500" step="1" value="50" id="height">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="script.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|