CRT монитор (HTML код)
<div class="monitor">
<div class="monitor-panel">
</div>
<!-- <div class="monitor-stand"></div> -->
</div>
CRT монитор (CSS код)
*{
margin:0;
}
body{
height:100vh;
width:100vw;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
position:relative;
}
.monitor{
width:18.6vw;
height:14.4vw;
display:flex;
align-items:center;
justify-content:center;
background: linear-gradient(121.79deg, #E7DFD0 0%, #DCD1BB 3.75%);
border-radius: 3px 3px 0px 0px;
position:relative;
perspective:-10000px;
}
.monitor::after{
content:'';
position: absolute;
width: 13.8vw;
height: 9.876vw;
background: linear-gradient(119.8deg, #83868C 0%, #292D36 69.96%);
box-shadow: inset 0px 0px 4px 4px rgba(0, 0, 0, 0.42);
border-radius: 2px;
}
.monitor::before{
content:'';
position: absolute;
width: 15vw;
height: 10.8vw;
background: #DCD1BB;
box-shadow: inset 0px 267px 4px -8px rgba(0, 0, 0, 0.25), inset 0px 0px 10px 6px #A29E96;
filter: blur(0.9px);
}
.monitor-panel{
position:absolute;
top:100%;
width:100%;
height:10%;
background:#DCD1BB;
box-shadow:0px 10px 22px rgba(0, 0, 0, 0.25), inset 0px 4px 2px -2px rgba(0, 0, 0, 0.15);
display:flex;
justify-content:center;
align-items:center;
}
.monitor-panel::before{
content:'';
position:absolute;
width:50%;
height:100%;
background:#DCD1BB;
box-shadow: inset 0px 0px 1px #000000;
}
/*
.monitor-panel::after{
content:'';
position:absolute;
width:8vw;
height:5vw;
top:-250%;
border-radius:50%;
background:#DCD1BB;
box-shadow: inset 0px 3px 3px 1px #000000;
z-index:-1;
}
.monitor-stand{
position: absolute;
top:110%;
width: 50%;
height: 20%;
perspective:10000px;
background: #DCD1BB;
transform:rotateX(130deg);
z-index:-2;
}*/
CRT монитор (Результат кода)
Comments