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

12
index.html
View File

@ -21,11 +21,19 @@
<div class="monitor-stand"> <div class="monitor-stand">
</div> </div>
<div class="chassis-top"> <div class="chassis-top">
<div class="chassis-top-gradient"> <div class="chassis-top-labels">
<div class="chassis-top-labels"> <div class="chassis-top-gradient">
</div> </div>
</div> </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> </body>
</html> </html>

107
style.css
View File

@ -29,7 +29,7 @@ body {
width: 550px; width: 550px;
top: 0px; top: 0px;
left: -80px; 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 { .border {
@ -58,23 +58,46 @@ body {
position: absolute; position: absolute;
display: block; display: block;
height: 220px; height: 220px;
width: 320px; width: 280px;
top: 40px; top: 40px;
left: 115px; left: 135px;
border-radius: 20px; border-radius: 50% / 10%;
background: linear-gradient(#202020, #262626); 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 { .screen {
position: absolute; position: absolute;
display: block; display: block;
height: 210px; height: 210px;
width: 310px; width: 270px;
top: 5px; top: 5px;
left: 5px; left: 5px;
border-radius: 18px; border-radius: 50% / 10%;
background: radial-gradient(#808080, #666666); background: radial-gradient(#808080, #666666, #2B3030);
box-shadow: 0 0 20px 10px #2B3030 inset; 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 { .monitor-stand {
@ -91,6 +114,7 @@ body {
/* Chassis */ /* Chassis */
.chassis-top { .chassis-top {
z-index: 2;
position: relative; position: relative;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
@ -99,16 +123,7 @@ body {
border-right: 30px solid transparent; border-right: 30px solid transparent;
height: 0; height: 0;
width: 700px; width: 700px;
} box-shadow: 0px 0px 3px;
.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));
} }
.chassis-top-labels { .chassis-top-labels {
@ -119,6 +134,60 @@ body {
border-right: 20px solid transparent; border-right: 20px solid transparent;
height: 0; height: 0;
top: 15px; top: 15px;
left: 40px; left: 10px;
width: 640px; 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));
}