Ever thought of designing your favorite gaming console in 3D for the web? In this blog, we’ll take on the exciting challenge of building a 3D model of the iconic Nintendo Switch using HTML, CSS, and JavaScript. From constructing the console’s sleek frame and Joy-Con controllers with CSS 3D transforms to adding interactivity with JavaScript, we’ll create a web-based replica that’s not only visually stunning but also interactive. Whether you’re a gaming enthusiast or a web developer eager to elevate your 3D design skills, this guide is your gateway to merging creativity with code. Let’s build something truly playful!
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 3D Nintendo Switch – CSS Art 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.
mixin link()
div(class!=attributes.class)
div(class!=attributes.class+'__front face')
div(class!=attributes.class+'__back face')
div(class!=attributes.class+'__right face')
div(class!=attributes.class+'__left face')
div(class!=attributes.class+'__top face')
div(class!=attributes.class+'__bottom face')
//- =========================
div.main#h
div.shadows-wrapper
div.shadow.sh01
div.shadow.sh02
div.shadows
//-
div.a
div.a__front.face
div.curve.c01
div.curve.c02
div.curve.c03
div.curve.c04
div.curve.c05
div.a__back.face
div.curve.c01
div.curve.c02
div.curve.c03
div.curve.c04
div.curve.c05
div.a__right.face
div.a__left.face
div.a__top.face
div.a__bottom.face
//-
div.at
div.at__front.face
div.at__back.face
div.curve.c01
div.curve.c02
div.curve.c03
div.curve.c04
div.curve.c05
div.at__right.face
div.at__top.face
div.at__bottom.face
//- ================================
div.b
div.b__front.face
div.curve.c01
div.curve.c02
div.curve.c03
div.curve.c04
div.curve.c05
div.b__back.face
div.curve.c01
div.curve.c02
div.curve.c03
div.curve.c04
div.curve.c05
div.b__right.face
div.b__left.face
div.b__top.face
div.b__bottom.face
//-
div.bt
div.bt__front.face
div.bt__back.face
div.curve.c01
div.curve.c02
div.curve.c03
div.curve.c04
div.curve.c05
div.bt__left.face
div.bt__top.face
div.bt__bottom.face
//- ===========================
.buttons
div.btn-b01.btn
div.circle.flex
div.circle-a
- var n = 0
while n < 20
div.circle-a__side
- n++
div.circle-a__bottom
div.btn-b02.btn
div.circle.flex
div.circle-a
- var n = 0
while n < 20
div.circle-a__side
- n++
div.circle-a__bottom
//- ===========================
- var m = 1
while m < 10
div(class=`btn-0${m} btn`)
div.circle.flex
div.circle-a
- var n = 0
while n < 14
div.circle-a__side
- n++
div.circle-a__bottom
- m++
//- ============================
+link(class="c")
.screen
+link(class="sa")
+link(class="sb")
+link(class="sc")
+link(class="sd")CSS Code
Create a file style.css and paste the code below.
@use "sass:math";
$unit: 4vmin;
//
$bg-01: #aed4c3;
$bg-02: #7da49b;
$bg-03: #376957;
$blue-01: #4bb3bf;
$blue-02: #46b0bd;
$blue-03: #3ea5b4;
$blue-04: #3b9bad;
$blue-05: #3c99ab;
$blue-06: #3291a4;
$red-01: #dca39f;
$red-02: #d08d8b;
$red-03: #ce8785;
$red-04: #c98280;
$red-05: #ae6f6d;
$red-06: #b36d6b;
$black-01: #817980;
$black-02: #434c49;
$black-03: #0e1b21;
/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
&__side{
position: absolute;
height: ( 2 * $pi * ($base / 2) ) / $sides ;
width: $width;
@for $var from 1 to ($sides + 1) {
&:nth-of-type(#{$var}){ transform: rotateX( $var * $degree / $sides ) translateZ($base / 2); }
}
&::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to left, rgba($red-01, .2), transparent 90%);
}
}
&__bottom{
position: absolute;
width: $base;
height: $base;
border-radius: 50%;
transform: rotateY(90deg) translateZ( $width / -2 );
background-image: linear-gradient(-45deg, rgba($red-01, .25), rgba($red-01, .1) );
border-left: .05 * $unit solid rgba(white, .1);
}
}
@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 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;
user-select: none;
-webkit-tap-highlight-color: transparent;
appearance: none;
}
/***********************/
/***********************/
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
cursor: pointer;
background-color: $bg-01;
}
.face{ position: absolute; }
.flex{
display: flex;
justify-content: center;
align-items: center;
}
/***********************/
/***********************/
.main{
position: absolute;
width: 24 * $unit;
height: 10 * $unit;
transform:
perspective(500 * $unit)
rotateX(66deg)
rotateZ(30deg)
translateZ(-2 * $unit)
;
transition: transform 550ms ease-out;
}
.shadows,
.shadows-wrapper{
width: 100%;
height: 100%;
position: absolute;
border-radius: 2.4 * $unit;
transform: translateZ(-.01 * $unit);
}
.shadows{
box-shadow:
0 0 .15 * $unit darken($bg-03, 15),
0 0 .25 * $unit darken($bg-03, 5),
0 0 .75 * $unit rgba($bg-03, .75),
0 0 2 * $unit rgba(lighten($bg-03, 10), .75)
;
background-color: $bg-02;
}
.shadow{
position: absolute;
&.sh01{
right: -2 * $unit;
bottom: -.05 * $unit;
width: 4 * $unit;
height: 11.2 * $unit;
background-image: linear-gradient(to top, $bg-02, lighten($bg-02, 6));
transform-origin: bottom left;
transform: skewY(-20deg);
border-top-right-radius: 2 * $unit;
border-bottom-right-radius: 2.3 * $unit;
}
&.sh02{
left: 0;
bottom: 80%;
width: 25.25 * $unit;
height: 4 * $unit;
background-image:
linear-gradient(to right, transparent, lighten($bg-02, 5)),
linear-gradient(to top, lighten($bg-02, 5), lighten($bg-02, 10)),
;
transform: skewX(-20deg);
transform-origin: bottom left;
border-top-right-radius: 2.3 * $unit;
border-top-left-radius: 2.3 * $unit;
}
}
// ==========================
.a{
$width-el: 4 * $unit;
$height-el: 1.2 * $unit;
$depth-el: 5 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
left: 0;
&__front{
width: 2 * $unit;
right: 0;
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 20), transparent 12%),
linear-gradient(to left, $red-06, $red-05),
;
.curve{
height: 100%;
width: .75 * $unit;
background-color: $red-01;
position: absolute;
right: 100%;
top: 0;
transform: rotateY(-18deg);
transform-origin: bottom right;
}
.c01{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 18), transparent 12%),
linear-gradient(to left, $red-05, $red-04)
;
}
.c02{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 16), transparent 12%),
linear-gradient(to left, $red-04, $red-03)
;
}
.c03{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 14), transparent 12%),
linear-gradient(to left, $red-03, $red-02)
;
}
.c04{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 12), transparent 12%),
linear-gradient(to left, $red-02, $red-01)
;
}
.c05{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 10), transparent 12%),
linear-gradient(to left, $red-01, $red-01)
;
}
}
&__back{
background-color: $red-05;
width: 2 * $unit;
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 10), transparent 15%),
linear-gradient(to right, $red-05, $red-05)
;
.curve{
height: 100%;
width: .75 * $unit;
background-color: $red-01;
position: absolute;
left: 100%;
top: 0;
transform: rotateY(18deg);
transform-origin: bottom left;
}
.c01{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 18), transparent 12%),
linear-gradient(to right, $red-05, $red-04)
;
}
.c02{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 16), transparent 12%),
linear-gradient(to right, $red-04, $red-03)
;
}
.c03{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 14), transparent 12%),
linear-gradient(to right, $red-03, $red-02)
;
}
.c04{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 12), transparent 12%),
linear-gradient(to right, $red-02, $red-01)
;
}
.c05{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 10), transparent 12%),
linear-gradient(to right, $red-01, $red-01)
;
}
}
&__left{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba($red-01, .95)),
linear-gradient(to top, darken($red-05, 10), transparent 12%),
linear-gradient(to left, $red-01, $red-01)
;
width: 4.75 * $unit;
// top: calc(50% - (4.75 * $unit / 2));
top: calc(50% - 9.5vmin); // Solo para CodePen
}
&__right{ background-color: $black-03; }
&__top{
background-color: $red-01;
background-image: linear-gradient(to top,darken($red-01, 6), darken($red-01, 3) 5%, transparent 20% 70%, lighten($red-01, 2));
border-top-left-radius: 2.3 * $unit;
border-bottom-left-radius: 2.3 * $unit;
}
&__bottom{
background-color: $red-05;
border-top-right-radius: 2.3 * $unit;
border-bottom-right-radius: 2.3 * $unit;
}
}
.at{
$width-el: 3.5 * $unit;
$height-el: .75 * $unit;
$depth-el: 1 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
left: -.075 * $unit;
top: -.2 * $unit;
transform: translateZ(.25 * $unit);
&__front{ background-color: darken($black-02, 10); }
&__back{
background-color: darken($black-02, 20);
width: 1.85 * $unit;
.curve{
position: absolute;
height: .75 * $unit;
width: .6 * $unit;
left: 98%;
top: 0;
transform: rotateY(17deg);
transform-origin: bottom left;
}
.c01{ background-image: linear-gradient(to right, darken($black-02, 20), darken($black-02, 18)); }
.c02{ background-image: linear-gradient(to right, darken($black-02, 18), darken($black-02, 16)); }
.c03{ background-image: linear-gradient(to right, darken($black-02, 16), darken($black-02, 14)); }
.c04{ background-image: linear-gradient(to right, darken($black-02, 14), darken($black-02, 12)); }
.c05{ background-image: linear-gradient(to right, darken($black-02, 12), darken($black-02, 10)); }
}
&__top{
background-color: darken($black-02, 20);
border-top-left-radius: 2 * $unit;
}
&__bottom{
background-color: darken($black-02, 20);
border-top-right-radius: 2 * $unit;
}
&__right{ background-color: darken($black-02, 20); }
}
.bt{
$width-el: 3.5 * $unit;
$height-el: .75 * $unit;
$depth-el: 1 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
right: -.075 * $unit;
top: -.2 * $unit;
transform: translateZ(.25 * $unit);
&__front{ background-color: darken($black-02, 10); }
&__back{
background-color: darken($black-02, 20);
width: 1.85 * $unit;
left: -46%;
.curve{
position: absolute;
top: 0;
right: 98%;
height: .75 * $unit;
width: .6 * $unit;
transform: rotateY(-17deg);
transform-origin: bottom right;
}
.c01{ background-image: linear-gradient(to right, darken($black-02, 18), darken($black-02, 20)); }
.c02{ background-image: linear-gradient(to right, darken($black-02, 16), darken($black-02, 18)); }
.c03{ background-image: linear-gradient(to right, darken($black-02, 14), darken($black-02, 16)); }
.c04{ background-image: linear-gradient(to right, darken($black-02, 12), darken($black-02, 14)); }
.c05{ background-image: linear-gradient(to right, darken($black-02, 10), darken($black-02, 12)); }
}
&__top{
background-color: darken($black-02, 20);
border-top-right-radius: 2 * $unit;
}
&__bottom{
background-color: darken($black-02, 20);
border-top-left-radius: 2 * $unit;
}
&__left{ background-color: darken($black-02, 20); }
}
.b{
$width-el: 4 * $unit;
$height-el: 1.2 * $unit;
$depth-el: 5 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
right: 0;
&__front{
width: 2 * $unit;
left: 0;
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 10), transparent 12%),
linear-gradient(to right, $blue-01, $blue-02),
;
.curve{
height: 100%;
width: .75 * $unit;
position: absolute;
left: 100%;
top: 0;
transform: rotateY(18deg);
transform-origin: bottom left;
}
.c01{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 16), transparent 12%),
linear-gradient(to right, $blue-01, $blue-02)
;
}
.c02{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 15), transparent 12%),
linear-gradient(to right, $blue-02, $blue-03)
;
}
.c03{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 14), transparent 12%),
linear-gradient(to right, $blue-03, $blue-04)
;
}
.c04{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 13), transparent 12%),
linear-gradient(to right, $blue-04, $blue-05)
;
}
.c05{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 12), transparent 12%),
linear-gradient(to right, $blue-05, $blue-06)
;
}
}
&__back{
width: 2 * $unit;
left: -50%;
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 16), transparent 12%),
linear-gradient(to left, $blue-06, $blue-05)
;
.curve{
height: 100%;
width: .75 * $unit;
background-color: $red-01;
position: absolute;
right: 100%;
top: 0;
transform: rotateY(-18deg);
transform-origin: bottom right;
}
.c01{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 16), transparent 12%),
linear-gradient(to left, $blue-05, $blue-05)
;
}
.c02{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 15), transparent 12%),
linear-gradient(to left, $blue-05, $blue-04)
;
}
.c03{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06,14), transparent 12%),
linear-gradient(to left, $blue-04, $blue-04)
;
}
.c04{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 13), transparent 12%),
linear-gradient(to left, $blue-05, $blue-04)
;
}
.c05{
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 12), transparent 12%),
linear-gradient(to right, $blue-06, $blue-05)
;
}
}
&__left{
background-color: $black-03;
}
&__right{
width: 4.75 * $unit;
// top: calc(-50% + (4.75 * $unit) / 2);
top: calc(-50% + 9.5vmin); // Solo para Codepen
background-image:
linear-gradient(to top, rgba($bg-01, .2), transparent 85%, rgba(lighten($blue-01, 10), .95)),
linear-gradient(to top, darken($blue-06, 12), transparent 12%),
linear-gradient(to right, $blue-06, $blue-06)
;
}
&__top{
background-color: $blue-01;
background-image:
linear-gradient(to top, rgba($red-01, .25), rgba($red-01, .3) 80%, lighten(rgba($blue-01, .1), 10)),
linear-gradient(to top, darken($blue-01, 6), darken($blue-01, 3) 5%, transparent 20% 70%, lighten($blue-01, 5))
;
border-top-right-radius: 2.3 * $unit;
border-bottom-right-radius: 2.3 * $unit;
}
&__bottom{
background-color: $blue-06;
border-top-left-radius: 2.3 * $unit;
border-bottom-left-radius: 2.3 * $unit;
}
}
.c{
$width-el: 15.9 * $unit;
$height-el: 1.2 * $unit;
$depth-el: 5 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
left: 4.05 * $unit;
&__front{
background-color: $black-02;
background-image:
linear-gradient(to top, rgba($black-03, .6), transparent ),
linear-gradient(to top, rgba($black-03, .75), transparent 15%),
linear-gradient(to top, rgba($bg-01, .5), $black-02 85%, rgba($black-01, .95))
;
&::after{
content: '';
position: absolute;
top: 30%;
left: 50%;
height: 40%;
width: 1 * $unit;
transform: translateX(-50%);
background-color: $black-03;
border-radius: 1 * $unit;
}
&::before{
content: '';
position: absolute;
top: 30%;
left: 41%;
height: .5 * $unit;
width: .5 * $unit;
border-radius: 50%;
transform: translateX(-50%);
background-color: $black-03;
box-shadow: 2.9 * $unit 0 0 0 $black-03;
}
}
&__back{
background-color: $black-02;
background-image:
radial-gradient(circle, darken($black-03, 5) .15 * $unit, transparent .15 * $unit),
linear-gradient(to top, rgba($black-03, .6), transparent ),
linear-gradient(to top, rgba($black-03, .75), transparent 15%),
linear-gradient(to top, rgba($bg-01, .5), $black-02 85%, rgba($black-01, .95))
;
&::after{
content: '';
position: absolute;
top: 25%;
left: 2 * $unit;
height: 50%;
width: 4.75 * $unit;
border-radius: 1 * $unit;
background-image: repeating-linear-gradient(to right, darken($black-03, 5) 0 .8 * $unit, transparent .8 * $unit 1 * $unit);
}
}
&__left{ background-color: $black-03;}
&__right{ background-color: $black-03; }
&__top{
background-color: $black-01;
background-image: linear-gradient(rgba($red-01, .1), rgba($red-01, .1));
}
&__bottom{ background-color: $bg-03; }
}
// =============
.btn{
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 110%;
height: 110%;
border-radius: 50%;
transform: skewX(-20deg);
transform-origin: bottom left;
}
&::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 110%;
height: 110%;
border-radius: 50%;
transform: skewY(20deg);
transform-origin: top left;
}
}
.btn-b01,
.btn-b02{
position: absolute;
width: 1.8 * $unit;
height: 1.8 * $unit;
transform: translateZ(1.2 * $unit);
background-color: $black-03;
border-radius: 50%;
box-shadow: 0 0 .5 * $unit rgba($black-03, .5);
.circle{
$sides: 20;
$degree: 360deg;
$width: .4 * $unit;
width: 1.8 * $unit;
height: 1.8 * $unit;
position: absolute;
&-a{
$base: 1.8 * $unit;
$pi: 3.5;
position: absolute;
width: $width;
height: $base;
transform: rotateY(90deg) translateX(-50%);
@include cylinder($base, $sides, $degree, $pi, $width, $black-02);
&__bottom{ background-color: $black-02; }
&__side{
&:nth-of-type(1){ background-image: linear-gradient(to top, darken($black-02, 25), darken($black-02, 25)) }
&:nth-of-type(2){ background-image: linear-gradient(to top, darken($black-02, 25), darken($black-02, 25)) }
&:nth-of-type(3){ background-image: linear-gradient(to top, darken($black-02, 25), darken($black-02, 20)) }
&:nth-of-type(4){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 20)) }
&:nth-of-type(5){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 20)) }
&:nth-of-type(6){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 14)) }
&:nth-of-type(7){ background-image: linear-gradient(to top, darken($black-02, 14), darken($black-02, 14)) }
&:nth-of-type(8){ background-image: linear-gradient(to top, darken($black-02, 14), darken($black-02, 14)) }
&:nth-of-type(9){ background-image: linear-gradient(to top, darken($black-02, 14), darken($black-02, 10)) }
&:nth-of-type(10){ background-image: linear-gradient(to top, darken($black-02, 10), darken($black-02, 10)) }
&:nth-of-type(11){ background-image: linear-gradient(to top, darken($black-02, 10), darken($black-02, 4)) }
&:nth-of-type(12){ background-image: linear-gradient(to top, darken($black-02, 4), darken($black-02, 0)) }
&:nth-of-type(13){ background-image: linear-gradient(to top, darken($black-02, 0), darken($black-02, 0)) }
&:nth-of-type(14){ background-image: linear-gradient(to top, darken($black-02, 0), darken($black-02, 4)) }
&:nth-of-type(15){ background-image: linear-gradient(to top, darken($black-02, 4), darken($black-02, 14)) }
&:nth-of-type(16){ background-image: linear-gradient(to top, darken($black-02, 14), darken($black-02, 20)) }
&:nth-of-type(17){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 25)) }
&:nth-of-type(18){ background-image: linear-gradient(to top, darken($black-02, 25), darken($black-02, 25)) }
&:nth-of-type(19){ background-image: linear-gradient(to top, darken($black-02, 25), darken($black-02, 25)) }
&:nth-of-type(20){ background-image: linear-gradient(to top, darken($black-02, 25), darken($black-02, 25)) }
}
}
}
}
.btn-b01{
top: 1.5 * $unit;
left: 1.1 * $unit;
}
.btn-b02{
top: 4.9 * $unit;
right: 1.1 * $unit;
}
.btn-01,
.btn-02,
.btn-03,
.btn-04,
.btn-05,
.btn-06,
.btn-07,
.btn-09,
.btn-08{
position: absolute;
width: .9 * $unit;
height: .9 * $unit;
background-color: $black-03;
border-radius: 50%;
transform: translateZ(1.2 * $unit);
box-shadow: 0 0 .25 * $unit rgba($black-03, .5);
.circle{
$sides: 14;
$degree: 360deg;
$width: .175 * $unit;
width: .9 * $unit;
height: .9 * $unit;
position: absolute;
&-a{
$base: .9 * $unit;
$pi: 3.5;
position: absolute;
width: $width;
height: $base;
transform: rotateY(90deg) translateX(-50%);
@include cylinder($base, $sides, $degree, $pi, $width, $black-02);
&__bottom{ background-color: $black-02; }
&__side{
&:nth-of-type(1){ background-image: linear-gradient(to top, darken($black-02, 24), darken($black-02, 24)) }
&:nth-of-type(2){ background-image: linear-gradient(to top, darken($black-02, 24), darken($black-02, 20)) }
&:nth-of-type(3){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 16)) }
&:nth-of-type(4){ background-image: linear-gradient(to top, darken($black-02, 16), darken($black-02, 12)) }
&:nth-of-type(5){ background-image: linear-gradient(to top, darken($black-02, 12), darken($black-02, 8)) }
&:nth-of-type(6){ background-image: linear-gradient(to top, darken($black-02, 8), darken($black-02, 4)) }
&:nth-of-type(7){ background-image: linear-gradient(to top, darken($black-02, 4), darken($black-02, 0)) }
&:nth-of-type(8){ background-image: linear-gradient(to top, darken($black-02, 0), darken($black-02, 0)) }
&:nth-of-type(9){ background-image: linear-gradient(to top, darken($black-02, 0), darken($black-02, 0)) }
&:nth-of-type(10){ background-image: linear-gradient(to top, darken($black-02, 0), darken($black-02, 16)) }
&:nth-of-type(11){ background-image: linear-gradient(to top, darken($black-02, 16), darken($black-02, 20)) }
&:nth-of-type(12){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 24)) }
&:nth-of-type(13){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 24)) }
&:nth-of-type(14){ background-image: linear-gradient(to top, darken($black-02, 20), darken($black-02, 24)) }
}
}
}
}
.btn-01{ top: 4.5 * $unit; left: 1.5 * $unit; }
.btn-02{ top: 6.25 * $unit; left: 1.5 * $unit; }
.btn-03{ top: 5.375 * $unit; left: .6 * $unit; }
.btn-04{ top: 5.375 * $unit; left: 2.4 * $unit; }
// ===============
.btn-05{ top: 1.5 * $unit; right: 1.5 * $unit; }
.btn-06{ top: 3.25 * $unit; right: 1.5 * $unit; }
.btn-07{ top: 2.375 * $unit; right: 2.4 * $unit; }
.btn-08{ top: 2.375 * $unit; right: .6 * $unit; }
.btn-09{ top: 7.5 * $unit; right: 2.1 * $unit; }
.btn-b01,
.btn-01,
.btn-02,
.btn-03,
.btn-04{
&::before{
background-image:
linear-gradient( rgba($red-01, .1), rgba($red-01, .1)),
linear-gradient(20deg, darken(rgba($red-06, .5), 10), rgba($red-04, .5) 70%, transparent)
;
}
&::after{
background-image:
linear-gradient(20deg, rgba($red-06, .25), transparent)
;
}
}
.btn-b02,
.btn-05,
.btn-06,
.btn-07,
.btn-08,
.btn-09{
&::before{
background-image:
linear-gradient( rgba($blue-03, .2), rgba($blue-01, .1)),
linear-gradient(20deg, darken(rgba($blue-06, .75), 20), rgba($blue-03, .85) 70%, transparent)
;
}
&::after{
background-image:
linear-gradient(20deg, rgba($blue-06, .25), transparent)
;
}
}
// ================================
.screen{
position: absolute;
width: 15 * $unit;
height: 9 * $unit;
top: .5 * $unit;
left: 4.5 * $unit;
transform: translateZ(1.2 * $unit);
background-color: darken($black-01, 2);
background-image:
radial-gradient(circle, $black-02, transparent 60%, darken($black-02, 3)),
linear-gradient( -35deg, darken($black-02, 5), darken($black-01, 15) )
;
}
.sa,
.sb{
$width-el: 1 * $unit;
$height-el: .1 * $unit;
$depth-el: 4.5 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
}
.sa{
left: 0 * $unit;
bottom: 0 * $unit;
&__front{ background-color: lighten($black-03, 6)}
&__back{ background-color: $black-02; }
&__left{ background-color: $black-02;}
&__right{ background-color: lighten($black-03, 6); }
&__top{ background-color: darken($black-01, 5); }
&__bottom{ background-color: $bg-03; }
}
.sb{
right: 0 * $unit;
bottom: 0 * $unit;
&__front{ background-color: lighten($black-03, 6)}
&__back{ background-color: $black-02; }
&__left{ background-color: lighten($black-03, 6);}
&__right{ background-color: $black-03; }
&__top{ background-color: darken($black-01, 5); }
&__bottom{ background-color: $bg-03; }
}
.sc,
.sd{
$width-el: 13 * $unit;
$height-el: .1 * $unit;
$depth-el: .35 * $unit;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
}
.sc{
left: 1 * $unit;
top: 0 * $unit;
&__front{ background-color: lighten($black-03, 6);}
&__back{ background-color: $black-02; }
&__top{ background-color: darken($black-01, 5); }
&__bottom{ background-color: $bg-03; }
}
.sd{
left: 1 * $unit;
bottom: 0 * $unit;
&__front{ background-color: lighten($black-03, 6)}
&__back{ background-color: lighten($black-03, 6); }
&__top{ background-color: darken($black-01, 5); }
&__bottom{ background-color: $bg-03; }
}Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/ricardoolivaalonso/pen/QWJxYXE
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
