From 186f9c036a074e387fd5a00fb8b8591d2a735103 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikael=20L=C3=B6vqvist?= Date: Tue, 5 Aug 2025 22:54:26 +0200 Subject: [PATCH] Added some css examples --- css-examples/insets.css | 60 +++++++++++++++++++++++++++++++++++ css-examples/insets.html | 27 ++++++++++++++++ css-examples/panels.css | 25 +++++++++++++++ css-examples/panels.html | 67 ++++++++++++++++++++++++++++++++++++++++ index.html | 10 +++++- 5 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 css-examples/insets.css create mode 100644 css-examples/insets.html create mode 100644 css-examples/panels.css create mode 100644 css-examples/panels.html diff --git a/css-examples/insets.css b/css-examples/insets.css new file mode 100644 index 0000000..71a2694 --- /dev/null +++ b/css-examples/insets.css @@ -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%); +} diff --git a/css-examples/insets.html b/css-examples/insets.html new file mode 100644 index 0000000..c3bb2f1 --- /dev/null +++ b/css-examples/insets.html @@ -0,0 +1,27 @@ + + + + Insets + + + + + +
+ +
Corner
+
Corner
+
Corner
+
Corner
+ +
Edge
+
Edge
+
Edge
+
Edge
+ +
Center
+ +
+ + + \ No newline at end of file diff --git a/css-examples/panels.css b/css-examples/panels.css new file mode 100644 index 0000000..477ff48 --- /dev/null +++ b/css-examples/panels.css @@ -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; +} diff --git a/css-examples/panels.html b/css-examples/panels.html new file mode 100644 index 0000000..ae9be6d --- /dev/null +++ b/css-examples/panels.html @@ -0,0 +1,67 @@ + + + + Insets + + + + + + + + + + +
+
+
+
Left panel
+
+
+
+ Here be the main content +
+
Main Menu
+
Tool Box
+
+
+
Right panel
+
+
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 9bdc6ce..32f25ed 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Simple tools + Tools and experiments + +
  • +

    CSS-Examples

    + +
    • Source: https://github.com/Mikael-Lovqvist/websperiments