.scene
.window
.glass
//-
Sur Codepen, j'utilise Pug pour simplifier l'HTML de mon code.
https://blog.ippon.fr/2018/07/03/introduction-a-pug/
View Compiled
body {
width: 100vw;
height: 100vh;
margin: 0;
overflow: hidden;
}
.scene {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
// On défini ici le fond de notre scène
background: radial-gradient(circle, #2c1f5f 300px, #0e0b29);
}
.window {
position: absolute;
width: 460px; height: 460px;
border: 20px solid #2c1f5f;
border-radius: 50%;
// Couleur temporaire pour distinguer la fenetre
background-color: #d7e8ff;
.glass {
position: absolute;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
box-shadow: inset 0px 5px 36px 8px rgba(72,148,247,1);
&::after {
content: "";
position: absolute;
border-top: 5px solid #2c1f5f;
border-bottom: 5px solid #2c1f5f;
width: 100%; height: 180px;
}
&::before {
content: "";
position: absolute;
border-left: 5px solid #2c1f5f;
border-right: 5px solid #2c1f5f;
width: 180px; height: 100%;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.