I got a problem with cutted div because of absolute position and webkitMask.
The concept is easy, the app is composed with 4 parts, the top one with meteo (background of part 1 should be under it bottom half) and 3 parts each one with a different background. The app must be mobile & responsive, each part have different content so different height.
I'm trying to do something like this :
I want to blur the background between each parts so i use relative position and webkitMask. The probleme is with the CSS , cutting top or bottom of some part and i cannot put margin between part as i want.
A working sandbox here ( but bugged in CSS ) : https://codesandbox.io/s/blissful-sutherland-towre?file=/src/App.js:0-5448
The div f is complety hidden for example, how to show it fully and put a margin/padding before it for example ? Same think with div h cutted in bottom ( from where come the white at bottom ?)
import React from "react";
import "./styles.css";
const BACKGROUNDCOLOR = "rgba(13,53,78, 0.6)";
const relativeBox = {
width: "100%",
height: "100vh",
position: "relative"
};
const overlay = {
backgroundColor: BACKGROUNDCOLOR,
color: "white",
position: "relative",
height: "100%"
};
const container = {
height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
};
const margin30 = {
marginTop: 30,
marginBottom: 30
};
function Meteo() {
return (
<div
style={{
height: 450,
backgroundColor: "green",
zIndex: 10
}}
>
top
</div>
);
}
export default function App() {
return (
<div className="App">
<header className="App-header">
<Meteo />
<div style={relativeBox}>
<div
style={{
width: "100%",
position: "absolute",
left: 0,
right: 0,
top: "-350px",
bottom: "-270px",
webkitMask:
"linear-gradient(transparent ,#fff 200px calc(100% - 50px),transparent)",
mask:
"linear-gradient(transparent ,#fff 200px calc(100% - 50px),transparent)",
background:
"url('https://poc-b-i-o-meteo.netlify.com/photos/air.jpg') bottom/cover"
}}
>
<div style={overlay}>
<div style={container}>
<div style={margin30}>
<div
style={{
height: 450,
width: 600,
backgroundColor: "grey",
border: "3px solid red"
}}
>
a
</div>
<div
style={{
height: 200,
width: 600,
backgroundColor: "grey",
border: "3px solid red"
}}
>
b
</div>
</div>
</div>
</div>
</div>
</div>
<div style={relativeBox}>
<div
style={{
width: "100%",
position: "absolute",
left: 0,
right: 0,
top: "-100px",
bottom: "-100px",
zIndex: 1,
webkitMask:
"linear-gradient(transparent ,#fff 200px calc(100% - 50px),transparent)",
mask:
"linear-gradient(transparent ,#fff 200px calc(100% - 50px),transparent)",
background:
"url('https://poc-b-i-o-meteo.netlify.com/photos/sol.jpg') bottom/cover"
}}
>
<div style={overlay}>
<div style={container}>
<div
style={{
height: 100,
width: 600,
backgroundColor: "grey",
border: "3px solid red"
}}
>
c
</div>
<div
style={{
height: 400,
width: 600,
backgroundColor: "grey",
border: "3px solid red"
}}
>
d
</div>
<div
style={{
height: 100,
width: 600,
backgroundColor: "grey",
border: "3px solid red"
}}
>
e
</div>
</div>
</div>
</div>
</div>
<div style={relativeBox}>
<div
style={{
width: "100%",
position: "absolute",
left: 0,
right: 0,
top: "-50px",
bottom: "-50px",
webkitMask:
"linear-gradient(transparent ,#fff 70px calc(100% - 50px),transparent)",
mask:
"linear-gradient(transparent ,#fff 70px calc(100% - 50px),transparent)",
background:
"url('https://poc-b-i-o-meteo.netlify.com/photos/eau.jpg') bottom/cover"
}}
>
<div style={overlay}>
<div style={container}>
<div
style={{
height: 100,
width: 600,
border: "3px solid red",
backgroundColor: "grey"
}}
>f
</div>
<div
style={{
height: 500,
width: 600,
border: "3px solid red",
backgroundColor: "grey"
}}
>
g
</div>
<div
style={{
height: 200,
width: 600,
border: "3px solid red",
backgroundColor: "grey"
}}
>h
</div>
</div>
</div>
</div>
</div>
</header>
</div>
);
}
