Added some css examples
This commit is contained in:
60
css-examples/insets.css
Normal file
60
css-examples/insets.css
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #111;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Generic overlay base */
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corners */
|
||||||
|
.top-left {
|
||||||
|
top: 1em; left: 1em;
|
||||||
|
}
|
||||||
|
.top-right {
|
||||||
|
top: 1em; right: 1em;
|
||||||
|
}
|
||||||
|
.bottom-left {
|
||||||
|
bottom: 1em; left: 1em;
|
||||||
|
}
|
||||||
|
.bottom-right {
|
||||||
|
bottom: 1em; right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edges */
|
||||||
|
.top-center {
|
||||||
|
top: 1em; left: 50%; transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.bottom-center {
|
||||||
|
bottom: 1em; left: 50%; transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.left-center {
|
||||||
|
left: 1em; top: 50%; transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.right-center {
|
||||||
|
right: 1em; top: 50%; transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center */
|
||||||
|
.center {
|
||||||
|
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
27
css-examples/insets.html
Normal file
27
css-examples/insets.html
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Insets</title>
|
||||||
|
<link rel="stylesheet" href="insets.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="viewport">
|
||||||
|
|
||||||
|
<div class="overlay top-left">Corner</div>
|
||||||
|
<div class="overlay top-right">Corner</div>
|
||||||
|
<div class="overlay bottom-left">Corner</div>
|
||||||
|
<div class="overlay bottom-right">Corner</div>
|
||||||
|
|
||||||
|
<div class="overlay top-center">Edge</div>
|
||||||
|
<div class="overlay bottom-center">Edge</div>
|
||||||
|
<div class="overlay left-center">Edge</div>
|
||||||
|
<div class="overlay right-center">Edge</div>
|
||||||
|
|
||||||
|
<div class="overlay center">Center</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
css-examples/panels.css
Normal file
25
css-examples/panels.css
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
.panel-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0em 1fr 0em;
|
||||||
|
transition: grid-template-columns 0.3s ease;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.side-panel {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel {
|
||||||
|
border-right: 1px solid #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-panel {
|
||||||
|
border-left: 1px solid #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-panel {
|
||||||
|
background: #222;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
67
css-examples/panels.html
Normal file
67
css-examples/panels.html
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Insets</title>
|
||||||
|
<link rel="stylesheet" href="insets.css">
|
||||||
|
<link rel="stylesheet" href="panels.css">
|
||||||
|
<style>
|
||||||
|
.ccw-rotated {
|
||||||
|
transform: rotate(-0.25turn) translate(0,-3.5em);
|
||||||
|
}
|
||||||
|
.cw-rotated {
|
||||||
|
transform: rotate(0.25turn) translate(0,-3.0em); /* I don't like that I have to do an translation here, especially not assymetrically like this */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const pc = document.getElementById('pc');
|
||||||
|
const lp = document.getElementById('lp');
|
||||||
|
const rp = document.getElementById('rp');
|
||||||
|
let lp_open = false;
|
||||||
|
let rp_open = false;
|
||||||
|
document.getElementById('mm').addEventListener('click', (e) => {
|
||||||
|
lp_open = !lp_open;
|
||||||
|
|
||||||
|
const left = lp_open ? '20' : '0';
|
||||||
|
const right = rp_open ? '20' : '0';
|
||||||
|
pc.style.gridTemplateColumns = `${left}em 1fr ${right}em`;
|
||||||
|
|
||||||
|
});
|
||||||
|
document.getElementById('tb').addEventListener('click', (e) => {
|
||||||
|
rp_open = !rp_open;
|
||||||
|
|
||||||
|
const left = lp_open ? '20' : '0';
|
||||||
|
const right = rp_open ? '20' : '0';
|
||||||
|
pc.style.gridTemplateColumns = `${left}em 1fr ${right}em`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="viewport">
|
||||||
|
<div class="panel-container" id="pc">
|
||||||
|
<div class="side-panel left-panel" id="lp">
|
||||||
|
<div style="width: 20em;">Left panel</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewport">
|
||||||
|
<div class="center-panel">
|
||||||
|
Here be the main content
|
||||||
|
</div>
|
||||||
|
<div class="overlay left-center ccw-rotated" id="mm">Main Menu</div>
|
||||||
|
<div class="overlay right-center cw-rotated" id="tb">Tool Box</div>
|
||||||
|
</div>
|
||||||
|
<div class="side-panel right-panel" id="rp">
|
||||||
|
<div style="width: 20em;">Right panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
index.html
10
index.html
@@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Simple tools</title>
|
<title>Tools and experiments</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<ul>
|
<ul>
|
||||||
@@ -23,6 +23,14 @@
|
|||||||
<li><a href="image/test1.html">Default configuration</a></li>
|
<li><a href="image/test1.html">Default configuration</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<h2>CSS-Examples</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="css-examples/insets.html">Insets</a></li>
|
||||||
|
<li><a href="css-examples/panels.html">Panels</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
Source: <a href="https://github.com/Mikael-Lovqvist/websperiments">https://github.com/Mikael-Lovqvist/websperiments</a>
|
Source: <a href="https://github.com/Mikael-Lovqvist/websperiments">https://github.com/Mikael-Lovqvist/websperiments</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user