.scene
.light
.shadow
.window
.glass
View Compiled
body {
width: 100vw;
height: 100vh;
margin: 0;
overflow: hidden;
}
.scene {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: radial-gradient(circle, #2c1f5f 300px, #0e0b29);
}
.window {
position: absolute;
width: 460px;
height: 460px;
border: 20px solid #2c1f5f;
border-radius: 50%;
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%;
}
}
}
.light {
position: absolute;
width: 580px;
height: 600px;
border-radius: 50%;
background: linear-gradient(#2c1f5f 40%, #524eb0);
// Décommentes la ligne ci-dessous pour avoir une idée du résultat final
// overflow: hidden;
}
// Ombre des supports de la fenêtre
.shadow {
// Ombre basse
&::after {
// La bordure rouge ne sert qu'à mieux te faire distinguer les formes
border: 3px solid red;
// Code du carré
content: "";
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
border-top: 8px solid #342b76;
border-right: 8px solid #342b76;
width: 200px;
height: 200px;
}
// Ombre haute
&::before {
// La bordure jaune ne sert qu'à mieux te faire distinguer les formes
border: 3px solid yellow;
// Code du carré
content: "";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%) rotate(-45deg) skew(15deg, 15deg);
border-top: 8px solid #332772;
border-right: 8px solid #332772;
width: 300px;
height: 300px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.