An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
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.
 
 
 
fsckcss/src/demos/GridOverGraphic.svelte

98 lines
1.8 KiB

<script>
import CodeView from '../components/CodeView.svelte';
</script>
<style>
content {
display: flex;
flex-direction: column;
}
icecream {
position: relative;
}
icecream background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
icecream background img {
width: 100vh;
}
overlay {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: auto;
grid-template-areas:
"topleft topright"
"middle middle"
"bottomleft bottomright";
height: 100vh;
}
one {
grid-area: topright;
background-color: var(--color-accent);
border-radius: 50% 0 0;
font-size: 2em;
color: #fff;
text-align: right;
}
two {
grid-area: middle;
background-color: var(--color-accent);
opacity: 80%;
font-size: 2em;
color: #fff;
text-align: center;
border-radius: 20% 0 20% 0;
}
three {
grid-area: bottomleft;
background-color: var(--color-accent);
opacity: 90%;
font-size: 2em;
color: #fff;
border-radius: 0 0 10% 40%;
padding: 1rem;
}
</style>
<content>
<h1>Grid Over Graphic</h1>
<icecream>
<background>
<img src="/ice_cream_graphic.svg" />
</background>
<overlay>
<one>
<h1>Do You Like Icecream?</h1>
<p>This square is placed over this image using a
CSS Grid.
</p>
</one>
<two>
<h1>Icecream Rules</h1>
<p>Sometimes you want to put a graphic behind some creatively
organize text and panels. You can dot that with CSS grids.
</two>
<three>
<h1>Bottom Right</h1>
<p>I don't know why I put that sphere there.</p>
</three>
</overlay>
</icecream>
</content>
<CodeView source="/code/GridOverGraphic" />