This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
1.0 KiB
26 lines
1.0 KiB
2 years ago
|
|
||
|
|
Layers with different opacity are a staple of digital compositing systems but weirdly CSS is terrible at it. The stack/layer CSS in `static/global.csS` implements a simple method using `display: grid` to place elements into a single cell. The CSS grid system will then correctly layer each element in a stack. The elements also are set to `position:relative` so you can change their `z-index` to shuffle them around. Alternatively, you can simply set one of the children to `class="top"` and that one element will be on top.
|
||
|
|
|
||
|
|
|
||
|
|
If you don't set a `background-color` color then the layers will be transparent. You can also use `opacity` to hide or fade the layers in the stack.
|
||
|
|
|
||
|
|
|
||
|
|
The CSS that is making this work is below (but look in `static/global.css` to confirm it's still done this way.
|
||
|
|
|
||
|
|
```
|
||
|
|
.stacked {
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: 1fr;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
grid-template-areas: "cover";
|
||
|
|
}
|
||
|
|
.stacked .layer {
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
grid-area: cover;
|
||
|
|
}
|
||
|
|
.stacked .top {
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
```
|