This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/admin/bando/demos/StackLayer.svelte.md

1.0 KiB

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