Bring the digital world into 3D! In this blog, we’ll create a visually striking 3D computer using only HTML and CSS. From the sleek monitor and sturdy keyboard to intricate design details like vents and buttons, we’ll use CSS 3D transforms, box shadows, and gradients to give our computer depth and realism. This hands-on project will help you push your CSS skills to the next level while exploring the exciting world of 3D web design. Whether you’re a tech enthusiast or a front-end developer looking for inspiration, it’s time to turn your screen into a creative masterpiece. Let’s power up and get coding!
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen Minitel – Type something by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>Paste the below code in your <body> tag.
doctype html
html(lang="es", dir="ltr")
head
meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0")
meta(charset="utf-8")
link(rel="stylesheet", type="text/css", href="main.css")
body#main
a.button#button OPEN KEYBOARD
div.main
div.minitel#base
div.minitel__b
div.mt#mt
div.mt__front.face
div.mta
div.mta__front.face
div.mta__back.face
div.mta__right.face
div.mta__left.face
div.mta__top.face
div.mta__bottom.face
div.mt__back.face
div.mt__right.face
div.mt__left.face
div.mt__top.face
div.key-numbers
div.key-column
div.key-nb#9.key
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 9
div.key-nb__bottom.face
div.key-nb#8.key
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 8
div.key-nb__bottom.face
div.key-nb#7
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 7
div.key-nb__bottom.face
div.key-column
div.key-nb#6
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 6
div.key-nb__bottom.face
div.key-nb#5
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 5
div.key-nb__bottom.face
div.key-nb#4
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 4
div.key-nb__bottom.face
div.key-column
div.key-nb#3
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 3
div.key-nb__bottom.face
div.key-nb#2
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 2
div.key-nb__bottom.face
div.key-nb#1
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 1
div.key-nb__bottom.face
div.key-column
div.key-nb
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face *
div.key-nb__bottom.face
div.key-nb#0
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face 0
div.key-nb__bottom.face
div.key-nb
div.key-nb__front.face
div.key-nb__back.face
div.key-nb__right.face
div.key-nb__left.face
div.key-nb__top.face #
div.key-nb__bottom.face
div.keys
div.key-column
div.key-b
div.key-b__front.face
div.key-b__back.face
div.key-b__right.face
div.key-b__left.face
div.key-b__top.face
div.key-b__bottom.face
div.key-b
div.key-b__front.face
div.key-b__back.face
div.key-b__right.face
div.key-b__left.face
div.key-b__top.face
div.key-b__bottom.face
div.key-b
div.key-b__front.face
div.key-b__back.face
div.key-b__right.face
div.key-b__left.face
div.key-b__top.face
div.key-b__bottom.face
div.key-b
div.key-b__front.face
div.key-b__back.face
div.key-b__right.face
div.key-b__left.face
div.key-b__top.face
div.key-b__bottom.face
div.key-b
div.key-b__front.key-b__front--g.face
div.key-b__back.key-b__back--g.face
div.key-b__right.key-b__right--g.face
div.key-b__left.key-b__left--g.face
div.key-b__top.key-b__top--g.face
div.key-b__bottom.key-b__bottom--g.face
div.key-column
div.key#a
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face A
div.key__bottom.face
div.key#z
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face Z
div.key__bottom.face
div.key#e
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face E
div.key__bottom.face
div.key#r
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face R
div.key__bottom.face
div.key#t
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face T
div.key__bottom.face
div.key#y
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face Y
div.key__bottom.face
div.key#u
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face U
div.key__bottom.face
div.key#i
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face I
div.key__bottom.face
div.key#o
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face O
div.key__bottom.face
div.key#p
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face P
div.key__bottom.face
div.key#Backspace
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.key-column
div.key#q
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face Q
div.key__bottom.face
div.key#s
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face S
div.key__bottom.face
div.key#d
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face D
div.key__bottom.face
div.key#f
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face F
div.key__bottom.face
div.key#g
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face G
div.key__bottom.face
div.key#h
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face H
div.key__bottom.face
div.key#j
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face J
div.key__bottom.face
div.key#k
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face K
div.key__bottom.face
div.key#l
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face L
div.key__bottom.face
div.key#m
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face M
div.key__bottom.face
div.key-column
div.key#w
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face W
div.key__bottom.face
div.key#x
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face X
div.key__bottom.face
div.key#c
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face C
div.key__bottom.face
div.key#v
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face V
div.key__bottom.face
div.key-s.key#espace
div.key-s__front.face
div.key-s__back.face
div.key-s__right.face
div.key-s__left.face
div.key-s__top.key__top.face ESPACE
div.key-s__bottom.face
div.key#b
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face B
div.key__bottom.face
div.key#n
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face N
div.key__bottom.face
div.mt__bottom.face
//------------
div.mfb
div.mfb__front.face #[span MINITEL]
div.mfb__back.face
div.mfb__right.face
div.mfb__left.face
div.mfb__top.face
div.mfb__bottom.face
div.mft
div.mft__front.face
div.mft__back.face
div.mft__right.face
div.mft__left.face
div.mft__top.face
div.mft__bottom.face
div.mfl
div.mfl__front.face
div.mfl__back.face
div.mfl__right.face
div.mfl__left.face
div.mfl__top.face
div.mfl__bottom.face
div.mfr
div.mfl__front.face
div.led#led
div.mfl__back.face
div.mfl__right.face
div.mfl__left.face
div.mfl__top.face
div.mfl__bottom.face
//------------
- var br = '<br>'
div.mb
div.mb__front.face
div.screen #[div.screen__shadow#screen-s] GOOGLE: 3615 !{br}!{br} #[span.text#screen]#[span.cursor ]
div.mb__back.face
div.mb__right.face
div.mb__left.face
div.mb__top.face
div.mb__bottom.face
div.ml
div.ml__front.face
div.ml__back.face
div.ml__right.face
div.ml__left.face
div.ml__top.face
div.ml__bottom.face
div.mr
div.mr__front.face
div.mr__back.face
div.mr__right.face
div.mr__left.face
div.mr__top.face
div.mr__bottom.face
div.mc
div.mc__front.face
div.mc__back.face
div.mc__right.face
div.mc__left.face
div.mc__top.face
div.mc__bottom.face
div.mbl
div.mbl__front.face
div.mbl__back.face
div.mbl__right-1.face
div.mbl__right-2.face
div.mbl__left-1.face
div.mbl__left-2.face
div.mbl__top.face
div.mbl__bottom.face
div.mbl-2
div.mbl__front.face
div.mbl__back.face
div.mbl__right-1.face
div.mbl__right-2.face
div.mbl__left-1.face
div.mbl__left-2.face
div.mbl__top.face
div.mbl__bottom.face
script(src="main.js")
CSS Code
Create a file style.css and paste the code below.
$blue-1: #1CB5BE;
$blue-2: #006E85;
$blue-3: #175373;
$beige-1: #FAF5EB;
$beige-2: #F7EFE4;
$beige-3: #A0A1A3;
$beige-a: #e4ddd2;
$brown-1: #B69992;
$brown-2: #7F6C78;
$brown-3: #574C65;
/***********************/
/***********************/
@mixin cube($width, $height, $depth) {
&__front{ @include cube-front($width, $height, $depth); }
&__back{ @include cube-back($width, $height, $depth); }
&__right{ @include cube-right($width, $height, $depth); }
&__left{ @include cube-left($width, $height, $depth); }
&__top{ @include cube-top($width, $height, $depth);}
&__bottom{ @include cube-bottom($width, $height, $depth); }
}
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
@mixin cube-front($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: rotateY(180deg) translateX(-$width);
}
/**/
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
}
/* Generic */
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: $blue-1;
overflow: hidden;
min-height: 300px;
min-width: 400px;
font-family: monospace;
color: white;
font-size: .6vmax;
}
.face{ position: absolute; }
/***************/
.main{
width: 30vmax;
height: 30vmax;
}
.minitel{
position: relative;
width: 26vmax;
height: 30vmax;
transform:
perspective(10000px)
rotateX(52deg)
rotateZ(-46deg)
scale(.8)
translateZ(-10vmax)
;
transition: transform .5s ease;
background-color: $blue-3;
box-shadow:
-5vmax -5vmax 0 $blue-3,
-5vmax 0vmax 0 $blue-3,
0vmax -5vmax 0 $blue-3
;
&__b{
width: 100%;
height: 100%;
background-color: $blue-3;
position: relative;
transform: translateZ(-1px) ;
}
&::before,
&::after{
content: '';
position: absolute;
left: -30%;
bottom: 5%;
width: 40%;
height: 115%;
transform: translateZ(-1px) skewY(10deg);
background-color: $blue-3;
}
&::after{
height: 60%;
width: 40%;
top: -30%;
transform: skewY(10deg);
border-top-left-radius: 10%;
border-bottom-left-radius: 10%;
}
}
/******************/
.button{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
bottom: 50px;
width: 130px;
height: 30px;
z-index: 10000;
transform: translateX(-50%) translateZ(10000px);
font-size: 12px;
letter-spacing: .5px;
background-color: $blue-2;
color: white;
cursor: pointer;
transition: hover .35s ease;
@media (min-width: 830px){
left: calc(100% - 180px);
transform:translateZ(10000px);
}
&:hover{
background-color: $blue-3;
transition: .35s ease;
}
}
.text{ word-break: break-all; }
.cursor{
display: inline-block;
width: .75vmax;
margin-left: .25vmax;
border-bottom: .2vmax solid white;
animation: cursor 1s ease infinite;
}
.led{
position: absolute;
bottom: 0;
left: 50%;
height: .5vmax;
width: .5vmax;
transform: translateX(-50%);
background-color: $brown-3;
border-radius: 50%;
transition: 2s ease;
}
.screen{
position: absolute;
top: 2vmax;
left: 2vmax;
width: 22vmax;
height: 14vmax;
transform: translateZ(2vmax);
overflow: hidden;
padding: 3.2vmax 3vmax;
font-size: 1vmax;
text-transform: uppercase;
color: rgba(white, .75);
letter-spacing: .2vmax;
background-color: $blue-2;
box-shadow:
inset .5vmax .5vmax .5vmax $blue-3,
inset -.5vmax -.5vmax .5vmax $blue-3;
&::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 180%;
height: 24%;
transform: translateX(-50%);
background-image: linear-gradient(to bottom, $blue-3, rgba($blue-3, .3) );
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
&::after{
content: '';
position: absolute;
top: 26%;
left: 12%;
width: 25%;
height: 65%;
border-radius: .4vmax;
background-image: linear-gradient(120deg, rgba(white, .045), transparent );
}
&__shadow{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background-image: linear-gradient(to top, rgba($brown-3, .2) ,rgba($brown-2, .5), rgba($brown-2, .3) );
border-top-left-radius: 50%;
border-top-right-radius: 50%;
filter: blur(.3vmax);
transition: 2s ease;
}
}
/*********************/
.keys{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
top: 7%;
left: 5%;
width: 90%;
height: 86%;
transform: translateZ(-.25vmax);
transition: transform .1s ease;
.key-column{
&:nth-of-type(1){ width: 75%; }
&:nth-of-type(3){ margin-left: 1vmax; }
&:nth-of-type(4){ margin-left: .5vmax; }
}
}
$width-mt: 1.2vmax;
$height-mt: .5vmax;
$depth-mt: .4vmax;
.key{
@include cube($width-mt, $height-mt, $depth-mt);
width: $width-mt;
height: $depth-mt;
position: relative;
bottom: 0;
&-column{
display: flex;
justify-content: space-between;
position: relative;
width: 70%;
height: 1vmax;
margin-top: .4vmax;
}
&-numbers{
position: absolute;
bottom: 8%;
right: 7%;
height: 27%;
width: 15%;
transform: translateZ(-.25vmax);
.key-column{
width: 100%;
margin-top: 0vmax;
align-items: flex-end;
}
}
&__front{ background-color: darken($brown-2, 5); }
&__back{ background-color: darken($brown-2, 5); }
&__right{ background-color: darken($brown-1, 5); }
&__left{ background-color: darken($brown-3, 5); }
&__top{
display: flex;
justify-content: center;
align-items: center;
background-color: darken($brown-1, 5);
}
&__bottom{ background-color: darken($brown-3, 5); }
}
$width-mtsp: 1vmax;
$height-mtsp: .5vmax;
$depth-mtsp: .3vmax;
.key-nb{
@include cube($width-mtsp, $height-mtsp, $depth-mtsp);
width: $width-mtsp;
height: $depth-mtsp;
position: relative;
bottom: 0;
&__front{ background-color: lighten($brown-3, 10); }
&__back{ background-color: darken($brown-2, 5); }
&__right{ background-color: darken($brown-1, 5); }
&__left{ background-color: darken($brown-3, 5); }
&__top{
display: flex;
justify-content: center;
align-items: center;
background-color: lighten($brown-3, 25);
color: white;
font-size: .7vmax;
}
&__bottom{ background-color: darken($brown-3, 5); }
}
$width-mtsp: 5vmax;
$height-mtsp: .5vmax;
$depth-mtsp: .4vmax;
.key-s{
@include cube($width-mtsp, $height-mtsp, $depth-mtsp);
width: $width-mtsp;
height: $depth-mtsp;
position: relative;
bottom: 0;
&__front{ background-color: darken($brown-2, 5); }
&__back{ background-color: darken($brown-2, 5); }
&__right{ background-color: darken($brown-1, 5); }
&__left{ background-color: darken($brown-3, 5); }
&__top{
display: flex;
justify-content: center;
align-items: center;
background-color: darken($brown-1, 5);
}
&__bottom{ background-color: darken($brown-3, 5); }
}
$width-mtsp: 3vmax;
$height-mtsp: .4vmax;
$depth-mtsp: .3vmax;
.key-b{
@include cube($width-mtsp, $height-mtsp, $depth-mtsp);
width: $width-mtsp;
height: $depth-mtsp;
position: relative;
bottom: 0;
&__front{
background-color: lighten($beige-3, 10);
&--g{ background-color: darken($blue-2, 5); }
}
&__back{
background-color: darken($beige-2, 5);
&--g{ background-color: darken($blue-2, 5); }
}
&__right{
background-color: darken($beige-1, 5);
&--g{ background-color: darken($blue-1, 5); }
}
&__left{
background-color: darken($beige-3, 5);
&--g{ background-color: darken($blue-3, 5); }
}
&__top{
display: flex;
justify-content: center;
align-items: center;
background-color: lighten($beige-3, 25);
color: $brown-3;
font-size: .7vmax;
&--g{
background-color: darken($blue-1, 5);
color: white;
}
}
&__bottom{
background-color: darken($beige-3, 5);
&--g{ background-color: darken($blue-3, 5); }
}
}
$width-mt: 24vmax;
$height-mt: 1vmax;
$depth-mt: 8vmax;
.mt{
@include cube($width-mt, $height-mt, $depth-mt);
width: $width-mt;
height: $depth-mt;
position: absolute;
bottom: 9vmax;
left: 1vmax;
transform: translateZ(.5vmax);
transition: bottom 2s;
&__front{
width: $width-mt;
height: $height-mt * 1.5;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ( -($height-mt - ($depth-mt * 1.95)) ) translateY(.25vmax);
}
&__back{ background-color: $brown-1; }
&__right{ background-color: $brown-1; }
&__left{ background-color: $brown-3; }
&__top{ background-image: linear-gradient(to bottom, $brown-3 50% , darken($brown-1, 5) 50%); }
&__bottom{ background-color: $brown-3; }
}
.mt-is-open{
bottom: 0vmax;
transition: bottom 2s;
}
$width-mta: 26vmax;
$height-mta: .75vmax;
$depth-mta: .75vmax;
.mta{
@include cube($width-mta, $height-mta, $depth-mta);
width: $width-mta;
height: $depth-mta;
position: absolute;
left: -1vmax;
&__front{ background-color: $brown-3; }
&__back{ background-color: $brown-1; }
&__right{ background-color: $brown-1; }
&__left{ background-color: $brown-3; }
&__top{ background-color: $brown-2; }
&__bottom{ background-color: $brown-3; }
}
$width-mfb: 26vmax;
$height-mfb: 2vmax;
$depth-mfb: 2vmax;
.mfb,
.mft{
@include cube($width-mfb, $height-mfb, $depth-mfb);
width: $width-mfb;
height: $depth-mfb;
position: absolute;
bottom: 2vmax;
transform: translateZ(2vmax);
&__front{
display: flex;
align-items: center;
background-color: $brown-2;
padding-left: 2vmax;
> span{
padding: .075vmax .4vmax;
letter-spacing: .1vmax;
font-size: .7vmax;
font-style: italic;
color: $beige-2;
line-height: 1;
border: .1vmax solid $beige-2;
}
}
&__back{ background-color: transparent; }
&__right{ background-color: $brown-2; }
&__left{ background-color: $brown-3; }
&__top{ background-color: $brown-1; }
&__bottom{ background-color: $brown-3; }
}
.mfb{
&__top{
background-image: linear-gradient(to bottom, lighten($brown-3, 2) 60%, $brown-1 65%);
overflow: hidden;
&::before{
content: '';
position: absolute;
top: 0;
right: 2vmax;
width: 5%;
height: 120%;
transform: rotateZ(-20deg);
background-color: lighten($brown-3, 2);
}
}
}
.mft{ transform: translateZ(18vmax); }
$width-mfl: 2vmax;
$height-mfl: 14vmax;
$depth-mfl: 2vmax;
.mfl,
.mfr{
@include cube($width-mfl, $height-mfl, $depth-mfl);
width: $width-mfl;
height: $depth-mfl;
position: absolute;
bottom: 2vmax;
transform: translateZ(4vmax);
&__front{ background-color: $brown-2; }
&__back{ background-color: transparent; }
&__right{ background-color: $brown-2; }
&__left{ background-color: $brown-3; }
&__top{ background-color: transparent; }
&__bottom{ background-color: transparent; }
}
.mfr{ right: 0; }
$width-mb: 26vmax;
$height-mb: 20vmax;
$depth-mb: 3vmax;
.mb{
@include cube($width-mb, $height-mb, $depth-mb);
width: $width-mb;
height: $depth-mb;
position: absolute;
bottom: 7vmax;
&__front{ background-color: $beige-3; }
&__back{ background-color: $beige-1; }
&__right{ background-color: $beige-1; }
&__left{ background-color: $beige-3; }
&__top{ background-color: $beige-1; }
&__bottom{ background-color: $beige-3; }
}
$width-ml: 7vmax;
$height-ml: 20vmax;
$depth-ml: 7vmax;
.ml{
@include cube($width-ml, $height-ml, $depth-ml);
width: $width-ml;
height: $depth-ml;
position: absolute;
bottom: 17vmax;
&__front{ background-color: transparent; }
&__back{ background-color: $beige-1; }
&__right{ background-color: $beige-1; }
&__left{ background-color: $beige-3; }
&__top{ background-color: $beige-1; }
&__bottom{background-color: $beige-3; }
}
$width-mr: 7vmax;
$height-mr: 20vmax;
$depth-mr: 7vmax;
.mr{
@include cube($width-mr, $height-mr, $depth-mr);
width: $width-mr;
height: $depth-mr;
position: absolute;
bottom: 17vmax;
right: 0vmax;
&__front{ background-color: transparent; }
&__back{ background-color: $beige-2; }
&__right{ background-color: $beige-1; }
&__left{ background-color: $beige-a; }
&__top{ background-color: $beige-1; }
&__bottom{ background-color: $beige-3; }
}
$width-mc: 12vmax;
$height-mc: 16vmax;
$depth-mc: 10vmax;
.mc{
@include cube($width-mc, $height-mc, $depth-mc);
width: $width-mc;
height: $depth-mc;
position: absolute;
bottom: 20vmax;
left: 7vmax;
&__front{ background-color: $beige-1; }
&__back{ background-color: $beige-a; }
&__right{ background-color: $beige-1; }
&__left{ background-color: $beige-2; }
&__top{ background-color: $beige-2; }
&__bottom{ background-color: $beige-2; }
}
$width-ml: 7vmax;
$height-ml: 20vmax;
$depth-ml: 3vmax;
.mbl,
.mbl-2{
width: $width-ml;
height: $depth-ml;
position: absolute;
top: 0;
&__front{
width: $width-ml;
height: $height-ml;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ( -($height-ml - ($depth-ml * 2) ) );
background-color: transparent;
}
&__back{
width: $width-ml;
height: #{ $height-ml - 2.2vmax } ;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-$width-ml) translateY(- #{ $height-ml - 1.2vmax }) ;
background-color: $beige-a;
}
&__right-1{
width: $depth-ml * 2;
height: #{$height-ml / 2 };
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ($width-ml) translateX(-$depth-ml * 2) translateY(-#{$height-ml / 2 });
background-image: linear-gradient(-10deg, transparent 1vmax, $beige-1 1vmax);
}
&__right-2{
width: $depth-ml * 2;
height: #{$height-ml / 2 };
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ($width-ml) translateX(-$depth-ml * 2) translateY(-#{$height-ml});
background-image: linear-gradient(11deg, $beige-1 9.8vmax, transparent 9.8vmax );
}
&__left-1{
width: $depth-ml * 2;
height: #{$height-ml / 2 };
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-#{$height-ml / 2 });
background-image: linear-gradient(10deg, transparent 1vmax, $beige-3 1vmax );
}
&__left-2{
width: $depth-ml * 2;
height: #{$height-ml / 2 };
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-#{$height-ml });
background-image: linear-gradient(
-11deg,
$beige-3 5vmax,
darken($beige-3, 10) 5vmax,
darken($beige-3, 10) 5.5vmax,
$beige-3 5.5vmax,
$beige-3 6.5vmax,
darken($beige-3, 10) 6.5vmax,
darken($beige-3, 10) 7vmax,
$beige-3 7vmax,
$beige-3 9.8vmax,
transparent 9.8vmax
);
}
&__top{
width: $width-ml;
height: #{$depth-ml * 2.05};
transform-origin: bottom left;
transform: translateZ(#{$height-ml - .1vmax }) translateY(-.085vmax) rotateX(11deg);
background-color: $beige-2;
}
&__bottom{
width: $width-ml;
height: $depth-ml * 2;
transform-origin: bottom left;
transform: rotateY(180deg) translateX(-$width-ml) rotateX(10deg);
background-color: $beige-3;
}
}
.mbl-2{
right: 0;
.mbl__left-1{ background-image: linear-gradient(10deg, transparent 1vmax, $beige-a 1vmax ); }
.mbl__left-2{ background-image: linear-gradient(-11deg, $beige-a 9.8vmax, transparent 9.8vmax );}
}
/***********/
.is-led-on{
background-color: #e31b4e;
transition: 2s ease;
animation: cursor 2s infinite;
}
.is-key-pressed{
transform: translateZ(-.1vmax);
transition: transform .1s ease;
.key__top{
&::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba($blue-1, .5);
}
}
}
.is-shadow-big{
height: 30%;
transition: 2s ease;
}
@keyframes cursor {
0%{opacity: .75}
100%{opacity: .25}
}
Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/ricardoolivaalonso/pen/NWGdxmd
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
