gamerdonkey
/
pet-computer-css-art
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Building out the chassis and made the screen more CRT-tube-shaped.

master
gamerdonkey 2021-02-08 05:35:08 +00:00
parent 4c1b56c9d8
commit 971a993195
2 changed files with 98 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -21,11 +21,19 @@
<div class="monitor-stand">
</div>
<div class="chassis-top">
<div class="chassis-top-gradient">
<div class="chassis-top-labels">
<div class="chassis-top-gradient">
</div>
</div>
</div>
<div class="chassis-keyboard">
<div class="chassis-keyboard-gradient">
</div>
</div>
<div class="chassis-base">
<div class="chassis-base-gradient">
</div>
</div>
</body>
</html>

107
style.css
View File

@ -29,7 +29,7 @@ body {
width: 550px;
top: 0px;
left: -80px;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24));
background: linear-gradient(145deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24));
}
.border {
@ -58,23 +58,46 @@ body {
position: absolute;
display: block;
height: 220px;
width: 320px;
width: 280px;
top: 40px;
left: 115px;
border-radius: 20px;
left: 135px;
border-radius: 50% / 10%;
background: linear-gradient(#202020, #262626);
}
.screen-cutout:before {
content: '';
position: absolute;
top: 9%;
bottom: 9%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
.screen {
position: absolute;
display: block;
height: 210px;
width: 310px;
width: 270px;
top: 5px;
left: 5px;
border-radius: 18px;
background: radial-gradient(#808080, #666666);
box-shadow: 0 0 20px 10px #2B3030 inset;
border-radius: 50% / 10%;
background: radial-gradient(#808080, #666666, #2B3030);
background-size: 105% 100%;
background-position: center;
}
.screen:before {
content: '';
position: absolute;
top: 9%;
bottom: 9%;
right: -5%;
left: -5%;
background: inherit;
background-size: 100% 120%;
background-position: center;
border-radius: 5% / 50%;
}
.monitor-stand {
@ -91,6 +114,7 @@ body {
/* Chassis */
.chassis-top {
z-index: 2;
position: relative;
display: block;
margin: 0 auto;
@ -99,16 +123,7 @@ body {
border-right: 30px solid transparent;
height: 0;
width: 700px;
}
.chassis-top-gradient {
position: absolute;
display: block;
height: 100px;
width: 760px;
top: 0px;
left: -30px;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24));
box-shadow: 0px 0px 3px;
}
.chassis-top-labels {
@ -119,6 +134,60 @@ body {
border-right: 20px solid transparent;
height: 0;
top: 15px;
left: 40px;
left: 10px;
width: 640px;
}
.chassis-top-gradient {
position: absolute;
display: block;
height: 100px;
width: 760px;
top: -15px;
left: -60px;
background: linear-gradient(165deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24));
}
.chassis-keyboard {
z-index: 2;
position: relative;
display: block;
margin: 0 auto;
border-bottom: 110px solid beige;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 760px;
}
.chassis-keyboard-gradient {
position: absolute;
display: block;
height: 110px;
width: 880px;
top: 0px;
left: -60px;
background: linear-gradient(145deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.15));
}
.chassis-base {
position: relative;
display: block;
margin: 0 auto;
border-bottom: 35px solid beige;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
width: 880px;
}
.chassis-base-gradient {
position: absolute;
display: block;
height: 35px;
width: 894px;
top: 0px;
left: -7px;
background: linear-gradient(177deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.30));
}