Skip to content

Instantly share code, notes, and snippets.

@osde8info

osde8info/css-art-polariod-camera.markdown

Created January 14, 2022 22:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save osde8info/b4c6641ea577108445b6552160c58201 to your computer and use it in GitHub Desktop.
Save osde8info/b4c6641ea577108445b6552160c58201 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Art Polariod Camera
Raw
index.html
<div class="camera">
<div class="back"></div>
<div class="top_middle">
<div class="top_left">
<div class="body">
<div class="border"></div>
<div class="middle"></div>
</div>
</div>
<div class="plus_button">
<div class="inner">
<h1>
<i class="fas fa-plus"></i></h1>
</div>
</div>
<div class="under_plus">
<div class="inner"></div>
</div>
<div class="red_button_container">
<div class="red_button"></div>
</div>
<div class="lens">
<div class="lens_1">
<div class="lens_2">
<div class="lens_3">
<div class="lens_4">
<!-- green goes here -->
<div class="lens_5">
<div class="lens_6">
<div class="lens_7"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="under_lens">
<div class="inner"></div>
</div>
<div class="rainbow"></div>
<div class="top_right">
<div class="viewfinder">
<div class="inner_1">
<div class="inner_2">
<div class="inner_3">
<div class="hole"></div>
</div>
</div>
</div>
</div>
<div class="shadows_middle"></div>
<div class="shadows_left"></div>
<div class="shadows_left_corner"></div>
<div class="shadows_right"></div>
<div class="shadows_right_corner"></div>
</div>
<div class="middle_right">
<div class="middle">
<div class="circle"></div>
</div>
<p class="minus">
<i class="fas fa-minus"></i>
</p>
<p class="plus">
<i class="fas fa-plus"></i>
</p>
</div>
<div class="text">
<h1>One</h1>
<h1>Step</h1>
<h1><i class="fas fa-plus"></i></h1>
</div>
</div>
<div class="bottom">
<div class="top">
<div class="left"></div>
<div class="middle">
<div class="switch">
<div class="switch_btn"></div>
</div>
</div>
<div class="right"></div>
</div>
<div class="btm">
<h1>Polaroid</h1>
<h1>I-TYPE CAMERA</h1>
<div class="logo"></div>
</div>
</div>
<div class="under_btm"></div>
<div class="corners">
<div class="corner_left"></div>
<div class="corner_right"></div>
</div>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Raw
style.scss
$t: transparent;
$bk: #B0C8C1;
$pink:#F60C46;
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
*{
box-sizing: border-box;
}
body{
background:$bk;
font-size: 1vmin;
}
.camera {
font-size: 1.15vmin;
width: 66em;
height: 55em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.back{
border-top-left-radius: 5em;
border-top-right-radius: 5em;
width: 63.3em;
height: 39.5em;
position:absolute;
content: '';
top:-.6em;
left: 50.1%;
transform:translate(-50%,0%);
background:
linear-gradient(
to bottom,
rgba(#626265,1),
rgba(#222126,.4)
)
100% 6% / 100% 2em,
linear-gradient(
to left,
rgba(#222126,1),
rgba(#8D8D90,1)
)
100% 0% / .8em 100%,
linear-gradient(
to right,
rgba(#222126,1),
rgba(#8D8D90,1)
)
0% 0% / .8em 100%,
linear-gradient(
to right,
rgba(#000,.3) 5%,
rgba(#8D8D90,1),
rgba(#8D8D90,1),
rgba(#000,.3) 95%,
)
10.8% 0% / 100% 3.5em,
linear-gradient(
to bottom,
rgba(#8D8D90,1),
rgba(#8D8D90,1)
)
10.8% 0% / 100% 100%,
#222126
;
background-repeat: no-repeat;
}
.top_middle{
position: absolute;
width: 62em;
height: 34.8em;
border-top:2px solid #363838;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
top: 0%;
left: 50%;
transform:translate(-50%,0%);
background:
linear-gradient(
to top,
rgba(#fff,.08) 1%,
rgba(#fff,.0) 5%,
)
100% 100% / 100% 100%,
rgba(#28272B,1);
background-repeat: no-repeat;
.top_left{
width: 11.3em;
height: 19.4em;
border-right: 2px solid #A6A89E;
border-bottom: 2px solid #A6A89E;
border-left: 2px solid #A6A89E;
border-top: 2px solid #5B5D5C;
box-shadow:
0 0 0 1px rgba(#282828, .7),
0 0 0 2px rgba(#000, .5)
;
border-radius: 1.4em;
position: absolute;
top: 2.7em;
left: 2.8em;
background:
linear-gradient(
to top,
rgba(#000,1),
rgba(#232323,0),
)
0% 0% /100% .3em,
linear-gradient(
to right,
rgba(#000,1),
rgba(#232323,0),
)
0% 100% /.5em 100%,
#565656;
background-repeat: no-repeat;
.body{
overflow: hidden;
width: 10.1em;
height: 18.1em;
border-radius: inherit;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
to bottom,
rgba(#fff,1)60%,
rgba(gray,.5)
)
;
background-size: 100% .2em;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
&:before{
content: '';
width: 100%;
height: 11.7em;
position: absolute;
top:52%;
left:50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
to bottom,
rgba(#232323,1)55%,
rgba(#fff,.5)
);
background-size: 100% .3em;
}
&:after{
content: '';
width: 60%;
height: 120%;
position: absolute;
top:52%;
left:50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
#E0E0E0 49%,
$t 51%,
)
50% 0% / 95% 5em,
linear-gradient(
to top,
#E0E0E0 49%,
$t 51%,
)
50% 100% / 95% 5.5em,
#fff
;
background-repeat: no-repeat;
}
}
.middle{
z-index: 5;
width: 50%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
background:
linear-gradient(
to right,
#DFDFDF 20%,
#fff 45%,
#DFDFDF 50%,
)
,
// #fff
;
background-size: .5em 100%;
&:before{
content: '';
width: 100%;
height: 100%;
position: absolute;
top:52%;
left:50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
#c7c7c7 48%,
#232323,
$t 53%,
)
50% 5% / 95% .5em,
linear-gradient(
#E0E0E0 49%,
$t 51%,
)
50% 0% / 95% 2.5em,
linear-gradient(
to top,
#bababa 29%,
$t 31%,
)
50% 100% / 95% 3em,
;
background-repeat: no-repeat;
}
&:after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top:52%;
left:50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
#888888,
#888888 53%,
)
50% 50% / .15em 88%,
linear-gradient(
#888888,
#888888 53%,
)
50% 50% / .4em 88%,
;
background-repeat: no-repeat;
}
}
}
.red_button_container{
width: 8.3em;
height: 8.3em;
position: absolute;
top: 73.7%;
left: 9.7%;
transform:translate(-50%,0%);
border-radius: 50%;
border: 10px solid #2D292B;
border: 4px solid #3A3537;
// border:5px solid orange;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow:
4px 5px 4px rgba(0,0,0,0.9),
5px 5px 15px rgba(0,0,0,0.9),
0 6px 6px rgba(0,0,0,0.33),
;
.red_button{
width: 90%;
height: 90%;
position: absolute;
border:2px solid #000;
border-top: .2em solid #000;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
border-radius:50%;
background:
#000;
background-repeat: no-repeat;
&:after{
content: '';
width: 100%;
height: 100%;
position: absolute;
border:1px solid #000;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#D10F00,1) 50%,
rgba($t,.0) 51%
)
65% 50% / 90% 95%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.5) 50%,
rgba($t,.0) 51%
)
90% 50% / 90% 90%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#D10F00,1) 50%,
rgba($t,.0) 51%
)
50% 50% / 90% 95%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.5) 50%,
rgba($t,.0) 51%
)
0% 50% / 90% 90%,
#D10F00;
background-repeat: no-repeat;
}
}
}
.lens{
overflow: hidden;
width: 25.2em;
height:25.2em;
border-top:2px solid #ADACB1;
border-bottom: 2px solid #211100;
position: absolute;
z-index: 1;
top:40.5%;
left:52.8%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow:
0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
4px 5px 4px rgba(0,0,0,0.9),
5px 5px 15px rgba(0,0,0,0.9),
0 6px 6px rgba(0,0,0,0.33),
0 6px 6px rgba(0,0,0,0.33),
0px -4px 3px rgba(50, 50, 50, 0.55),
-2px -2px 3px 5px rgba(#000, 0.15)
;
background:
// full round shading
radial-gradient(
100% 100% at 50% 50%,
$t 42%,
rgba(#f2f2f2,.02) 44%,
rgba(#f2f2f2,.01) 47%,
rgba(#000,.2) 48%,
rgba(blue,.0) 51%,
rgba(red,0)
)
50% 50% / 100% 100%,
// right shading
radial-gradient(
100% 100% at 0% 50%,
$t 42%,
rgba(#f2f2f2,.08) 44%,
rgba(#f2f2f2,.05) 47%,
rgba(#000,.6) 48%,
rgba(blue,.0) 51%,
rgba(red,0)
)
12.8em 50% / 100% 110%,
// left shading
radial-gradient(
100% 100% at 100% 50%,
$t 45%,
rgba(#000,.3) 47%,
rgba(#f2f2f2,.2) 48%,
rgba(blue,.0) 50%,
rgba(red,0)
)
-15.5em 50% / 120% 120%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#2C2C30,.08) 10%,
rgba(#2C2C30,.05) 40%,
rgba(#2C2C30,1)70%,
// red
// rgba($t,.0)
)
50% 50% / 100% 100%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.08) 10%,
rgba(#fff,.05) 40%,
rgba(#fff,.02)70%,
)
50% 50% / 100% 100%,
#353438;
background-repeat: no-repeat;
.lens_1{
width: 22em;
height:22em;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
#111316;
background-repeat: no-repeat;
&:before{
@include center;
z-index: 15;
position: absolute;
content: '';
width: 150%;
border:1px solid red;
height:120%;
background:
// top:
-webkit-radial-gradient(
50% 0%,
28% 50%,
rgba(#222427, 0.5) 0%,
rgba(255, 255, 255, 0) 100%
),
// left
-webkit-radial-gradient(
0% 50%, 50% 27%,
rgba(#222427, 0.6) 0%,
rgba(255,255,255,0)100%),
// right
-webkit-radial-gradient(
100% 50%, 50% 45%,
rgba(#535558, 0.25) 0%,
rgba(255, 255,255,0)100%),
// btm
-webkit-radial-gradient(
50% 100%, 32% 50%,
rgba(#535558, 0.32) 0%,
rgba(255,255,255,0)
100%),
;
}
.lens_2{
width: 93%;
height:93%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border-radius: 50%; border-bottom:2px solid rgba(#ADACB1,.7);
border-left:2px solid rgba(#ADACB1,.5);
border-right:2px solid rgba(#ADACB1,.5);
background:
repeating-radial-gradient(
circle at 50%,
#3F3F43 3px,
#1E1D22 2px,
#414145 7px)
;
.lens_3{
width: 64%;
height:64%;
border: 5px solid #232323;
position: absolute;
top:52%;
left:50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#232323,1) 10%,
rgba(#232323,.7) 40%,
rgba(#232323,.8)70%,
)
50% 50% / 100% 100%;
background-repeat: no-repeat;
}
.lens_4{
width: 99%;
height: 97%;
background:#1C1B20;
border-radius: inherit;
position: absolute;
top:51%;
left:50%;
transform: translate(-50%,-50%);
.lens_5{
width: 95%;
height: 95%;
border:0px solid #1C1B20;
border-radius: inherit;
border-left:2px solid #7C897C;
border-right: 2px solid #7C897C;
position: absolute;
top:51%;
left:50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
-20deg,
#28272E 49%,
$t 51%,
)
50% 100% / 100% 5.5em,
radial-gradient(
100% 110% at 100% 50%,
// $t 30%,
rgba(#396440,0) 49%,
rgba(#396440,.6) 50%
)
-2.5em 50% / 70% 95%,
radial-gradient(
100% 110% at 00% 50%,
rgba($pink,.0) 45%,
rgba(#396440,.6) 47%
)
6em 50% / 70% 95%,
rgba(#28272E,1)
;
background-repeat: no-repeat;
.lens_6{
width: 82%;
height: 82%;
border:1px solid #1C1B20;
border-radius: inherit;
position: absolute;
top:51%;
left:50%;
transform: translate(-50%,-50%);
background:
rgba(#1C1B20,1)
;
background-repeat: no-repeat;
.lens_7{
width: 75%;
height: 75%;
border:4px solid #070E10;
// border:5px solid red;
border-right: 1px solid #3D3B42;
border-left: 1px solid #3D3B42;
border-radius: inherit;
position: absolute;
top:51%;
left:50%;
transform: translate(-50%,-50%);
background:
radial-gradient(
130% 100% at 50% 0%,
rgba(#070E10,0),
rgba(red,0) 28%,
rgba(#070E10,1) 40%,
rgba($t,.0) 50%
)
50% 3em / 100% 100%,
linear-gradient(
to right,
$t,
#070E10,
#070E10,
$t
)
50% 53% / 3em 56%,
radial-gradient(
180% 100% at 50% 50%,
rgba(#396440,0),
rgba(#0A2220,.2) 25%,
rgba(#070E10,1),
rgba($t,.0) 50%
)
50% -3.2em / 100% 100%,
radial-gradient(
130% 100% at 50% 50%,
rgba(#070E10,1),
rgba(#070E10,1) 25%,
rgba(#0A2220,0) 30%,
rgba($t,.0) 50%
)
50% 3em / 100% 100%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#131313,.2) 45%,
rgba(#fff,1) 49%,
rgba(#131313,.2) 50%
)
50% 50% / 105% 115%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#131313,.7),
rgba(#030305,.5) 49%,
rgba(#3D3B42,.5) 50%
)
50% 50% / 90% 100%,
#396440
;
background-repeat: no-repeat;
}
}
}
}
}
}
}
.under_lens{
border-radius: 50%;
width: 4.2em;
height: 4.2em;
border-bottom: 3px solid #000;
border-right: 1px solid rgba(#B5B4B8,.6);
box-shadow:
-10px 10px 20px rgba(0,0,0,0.33),
0 6px 6px rgba(0,0,0,0.33),
0 6px 6px rgba(0,0,0,0.33),
0px -4px 3px rgba(50, 50, 50, 0.55),
-5px -4px 3px 3px rgba(#000, 0.55)
;
position: absolute;
top:72%;
left:72%;
transform: translate(-50%,-50%);
background:
#27282C,
#232227;
background-repeat: no-repeat;
.inner{
width: 72%;
height:72%;
@include center;
border-radius: inherit;
background:#060606;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#060606,1) 48%,
rgba(#B5B4B8,.2) 55%
)
50% 50% / 90% 95%,
#B5B4B8;
background-repeat: no-repeat;
}
}
.rainbow{
width: 6.5em;
height:9em;
position: absolute;
top: 87%;
left: 52.5%;
transform: translate(-50%,-50%);
z-index: 0;
background:
linear-gradient(
#E4341F 49%,
#E4341F 51%,
)
0% 0% / 20% 100%,
linear-gradient(
#FF9501 49%,
#FF9501 51%,
)
20% 0% / 25% 100%,
linear-gradient(
#FFC904 49%,
#FFC904 51%,
)
45% 0% / 25% 100%,
linear-gradient(
#1EB465 49%,
#1EB465 51%,
)
68% 0% / 30% 100%,
linear-gradient(
#03BCFF 49%,
#03BCFF 51%,
)
100% 0% / 25% 100%,
;
background-repeat: no-repeat;
}
.plus_button{
width: 3.5em;
height:3.5em;
border: 2px solid #000004;
position: absolute;
top: 14.5%;
left:29%;
border-radius: 5px;
transform: translate(-50%,-50%);
.inner{
text-align:center;
background:#0B0A0E;
width: 100%;
height: 100%;
border-left: 1px solid rgba(#fff,.3);
border-right: 1px solid rgba(#fff,.2);
h1{
color:#96A2B1;
font-size: 2.3em;
font-weight: 600;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
}
}
.under_plus{
width:3em;
height:3em;
position: absolute;
top: 30%;
left:29%;
border-radius: 50%;
transform: translate(-50%,-50%);
border-left:2px solid rgba(#fff,.5);
border-top:2px solid rgba(#fff,.4);
.inner{
width:2.7em;
height:2.7em;
border-radius: inherit;
position: absolute;
@include center;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.55) 10%,
rgba(#fff,.1) 12%,
rgba(#000,.0) 21%
)
50% 0% / 100% 100%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#000,.3),
rgba(#000,.4) 50%,
rgba(red,.8) 51%
)
50% 0% / 100% 100%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#3f363f,.5),
rgba(#161316,1) 50%,
rgba(red,.0) 51%
)
50% 50% / 85% 85%,
radial-gradient(
100% 100% at 50% 50%,
rgba(#3f363f,.5),
rgba(#161316,1) 50%,
rgba(red,.0) 51%
)
50% 50% / 85% 85%,
#4E4E50;
background-repeat: no-repeat;
}
}
.top_right{
width: 13em;
height: 13.4em;
border-top: 1px solid #858488;
border-left: 1px solid #858488;
border-right: 2px solid #181818;
border-bottom: 1px solid #858488;
position: absolute;
top: 25%;
left:87%;
transform: translate(-50%,-50%);
border-radius: 1.5em;
box-shadow: 0px -3px 1px rgba(#181818, 0.75),
inset 0px 0px 15px 0px rgba(#181818,.4),
inset 0px 0px 6px 0px rgba(#fff,.4)
;
.viewfinder{
width: 97%;
height:97%;
border-radius: inherit;
@include center;
background:
#262628;
background-repeat: no-repeat;
border: 1px solid #3E3E3E;
.inner_1{
width: 83%;
height:81%;
border-radius: inherit;
position: absolute;
top: 55%;
left:47%;
transform: translate(-50%,-50%);
border: 2px solid #D2D2D2;
background:
linear-gradient(
-30deg,
#3D3C40,
#A4A4A4,
#CACACA,
);
&:before{
content: '';
width: 95%;
height:98%;
@include center;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#131313,1) 50%,
rgba($t,.0) 51%
)
50% -2.4em / 140% 95%,
#1C1C1C;
background-repeat: no-repeat;
border-radius: inherit;
}
.inner_2{
width: 80%;
height: 80%;
border:1px solid white;
border-radius: inherit;
position: absolute;
top:53%;
left:50%;
transform:translate(-50%,-50%);
background:
linear-gradient(
-30deg,
#3D3C40,
#A4A4A4,
#CACACA,
)50% 100% / 100% 100%;
background-repeat: no-repeat;
&:before{
border-radius: inherit;
content: '';
width: 90%;
height: 90%;
border:2px solid #1C1C1C;
@include center;
}
.inner_3{
width: 85%;
height:85%;
border-radius: inherit;
@include center;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#131313,1) 50%,
rgba($t,.0) 51%
)
50% -1.3em / 140% 95%,
#1C1C1C;
background-repeat: no-repeat;
.hole{
width: 1.7em;
height:1.7em;
background:$pink;
border-radius: 2px;
position: absolute;
top: 57%;
left: 47%;
transform: translate(-50%,-50%);
background: #DDDDDB;
&:before{
z-index: 3;
width: 87%;
height:50%;
content: '';
position: absolute;
top: -1.8em;
left: .15em;
background:
linear-gradient(
to right,
$t,
rgba(#fff,.1) 20%,
rgba(#fff,.15),
rgba(#fff,.1),
$t
)
50% 100% / 95% 100%,
;
background-repeat: no-repeat;
}
}
}
}
}
&:before{
z-index: 3;
width: 100%;
height: 100%;
content: '';
position: absolute;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#000,.5) 48%,
rgba($t,.0) 55%
)
50% -7em / 100% 95%,
linear-gradient(
to right,
rgba(#000,.4) 49%,
rgba(#000,.4) 51%,
)
100% 50% / 12% 95%,
;
background-repeat: no-repeat;
}
}
.shadows_middle{
z-index: 8;
position: absolute;
width: 59%;
height: 30%;
top: 25%;
left:47%;
transform:translate(-50%,-50%);
background:
radial-gradient(
105% 80% at 50% 100%,
rgba($pink,.0) 25%,
rgba(#fff,.3),
rgba(#fff,.3),
rgba(#fff,.0) 55%
)
50% -2em / 105% 100%,
;
background-repeat: no-repeat;
}
.shadows_left{
z-index: 8;
position: absolute;
width: 3em;
height: 4.5em;
top: 45%;
left:70%;
transform:translate(-50%,-50%) rotate(-10deg);
background:
radial-gradient(
100% 120% at 00% 50%,
rgba($pink,.0) 45%,
rgba(#1F1F1F,1) 47%
)
2em 50% / 70% 95%,
radial-gradient(
100% 120% at 00% 50%,
rgba(#1F1F1F,.7) 50%,
rgba($t,.0) 51%
)
-.4em 50% / 90% 95%,
linear-gradient(
65deg,
$t,
rgba(#E0E0E0,.2) ,
rgba(#E0E0E0,.3),
rgba(#E0E0E0,.2),
$t
)
50% 100% / 100% 5.5em,
;
background-repeat: no-repeat;
}
.shadows_left_corner{
z-index: 8;
position: absolute;
width: 50%;
height:50%;
top: 70%;
left:65%;
transform:translate(-50%,-50%) rotate(45deg);
background:
-webkit-radial-gradient(100% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(
255,
255,
255,
0
)
100%),
;
background-repeat: no-repeat;
}
.shadows_right{
z-index: 8;
position: absolute;
width: 3em;
height: 4.5em;
top: 45%;
left:20%;
transform:translate(-50%,-50%) rotate(10deg);
background:
radial-gradient(
100% 120% at 50% 50%,
rgba(#1F1F1F,.7) 45%,
rgba($t,.0) 47%
)
2.4em 50% / 70% 95%,
radial-gradient(
100% 120% at 00% 50%,
rgba(#1F1F1F,.7) 50%,
rgba($t,.0) 51%
)
-.4em 50% / 90% 95%,
linear-gradient(
65deg,
$t,
rgba(#E0E0E0,.2) ,
rgba(#E0E0E0,.3),
rgba(#E0E0E0,.2),
$t
)
50% 100% / 100% 5.5em,
;
background-repeat: no-repeat;
}
.shadows_right_corner{
z-index: 8;
position: absolute;
width: 50%;
height:50%;
top: 72%;
left:30%;
transform:translate(-50%,-50%) rotate(-45deg);
background:
-webkit-radial-gradient(0% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(
255,
255,
255,
0
)
100%),
;
background-repeat: no-repeat;
}
}
.middle_right{
width: 12em;
height:3em;
position: absolute;
left: 86.5%;
top:51%;
transform:translate(-50%,-50%);
p{
text-shadow:
-.04em -.04em -0px #535259,
.04em .04em 0px #090809
;
color:#28272B;
font-size: 1.8em;
font-weight: 200;
position: absolute;
width: 1.5em;
top:50%;
transform:translate(-50%,-50%); text-align:center;
}
.plus{
width: 1.5em;
left: 90%;
}
.minus{
left: 12%;
}
.middle{
width: 5.5em;
height: 2.2em;
@include center;
background:
linear-gradient(
to right,
rgba(#323135,.5) 49%,
rgba(#323135,.7) 51%,
rgba(#2F2F33,.5),
)
50% 5% / 3.5em .1em,
linear-gradient(
to right,
#050507 49%,
#050507 51%,
)
50% 100% / 2.7em 2.2em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#050507,1) 50%,
rgba($t,.0) 51%
)
.7% 50% /2.2em 2.2em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.2) 50%,
rgba($t,.0) 51%
)
0% 50% /2.2em 2.2em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#050507,1) 50%,
rgba($t,.0) 51%
)
98% 50% /2.2em 2.2em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.2) 50%,
rgba($t,.0) 51%
)
100% 50% /2.2em 2.2em,
;
background-repeat: no-repeat;
&:before{
width: 75%;
height:1em;
content: '';
position: absolute;
box-shadow: 0 1px 1px -1px gray;
top:75%;
left:50%;
transform:translate(-50%,-50%);
}
.circle{
width: 2em;
height:2em;
@include center;
border-radius: 50%;
background:#C0BFC3;
&:before{
content: '';
width: 1.8em;
height:1.85em;
@include center;
border-radius: 50%;
background:
linear-gradient(
to bottom,
#111015,
rgba(#2F2F33,.2) 51%,
),
#111015
;
background-repeat: no-repeat;
}
}
}
}
.text{
width: 10em;
height: 7em;
position: absolute;
top:85%;
left:87%;
transform: translate(-50%,-50%);
h1{
font-family: Arial;
font-size:4em;
color: #77767B;
position:absolute;
letter-spacing: -1px;
}
h1:nth-of-type(1){
left: .3em;
}
h1:nth-of-type(2){
top: .7em;
}
h1:nth-of-type(3){
color:#C14633;
top: .8em;
left:2.4em;
font-size:3.3em;
}
}
}
.bottom{
width: 101%;
height: 20.5em;
position: absolute;
top: 82%;
left:50%;
transform: translate(-50%,-50%);
background:#25262A;
&:before{
position: absolute;
content: '';
width: 100%;
height: inherit;
z-index: 7;
background:
// shading
// right
linear-gradient(
to left,
rgba($t,.2) 11%,
rgba(#929095,.15),
rgba(#929095,.15),
rgba($t,.0) 91%
)
99.5% 0% / 3em 20%,
linear-gradient(
to left,
rgba($t,.2) 11%,
rgba(#929095,.4),
rgba(#929095,.4),
rgba($t,.0) 91%
)
99.5% 100% / 3em 80%,
// left
linear-gradient(
to right,
rgba($t,.2) 11%,
rgba(#929095,.15),
rgba(#929095,.15),
rgba($t,.0) 91%
)
.5% 0% / 3em 20%,
linear-gradient(
to right,
rgba($t,.2) 11%,
rgba(#929095,.4),
rgba(#929095,.4),
rgba($t,.0) 91%
)
.5% 100% / 3em 80%,
;
background-repeat: no-repeat;
}
.top{
width: 100%;
height:4.2em;
// border:1px solid yellow;
background:#2E2D31;
.left{
position: absolute;
z-index:1;
width: 37.6%;
height: inherit;
// border:1px solid $pink;
border-bottom-right-radius: 30px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
box-shadow: 0 2px 2px -2px #8C8C90;
background:
linear-gradient(
-45deg,
$t 45%,
rgba(#000,.4) 49%,
$bk 51%,
)
0% -2.8em / 2em 5.5em,
linear-gradient(
to bottom,
#9A9BA1,
rgba(#9A9BA1,.4),
rgba(#000,.2)70%,
$t
)
50% 0% / 100% 1em,
#2E2D31;
;
background-repeat: no-repeat;
}
.right{
z-index:0;
top:0%;
left: 67.5%;
position: absolute;
width: 32.5%;
height: 4.2em;
// border:1px solid $pink;
border-bottom-left-radius: 30px;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
box-shadow: 0 2px 2px -2px #8C8C90;
background:
linear-gradient(
45deg,
$t 45%,
rgba(red,.0) 49%,
$bk 51%,
)
100% -2.8em / 2em 5.5em,
linear-gradient(
to bottom,
#9A9BA1,
rgba(#9A9BA1,.4),
rgba(#000,.2)70%,
$t
)
50% 0% / 100% 1em,
#2E2D31;
;
background-repeat: no-repeat;
}
.middle{
z-index:0;
width: 21em;
height: 4.6em;
position: absolute;
top:0;
left:52.5%;
transform: translate(-50%, 0%);
background:
// left angle
// black
linear-gradient(
80deg,
$t 30%,
rgba(#000,.5) 35%,
rgba(#2E2D31,.2) 72%,
$t 78%,
)
5.5% 0% / 3.5em 95%,
// white
linear-gradient(
80deg,
#2E2D31 40%,
rgba(#9A9BA1,.4),
rgba(#9A9BA1,.4) 52%,
$t 65%,
)
3% 100% / 3em 88%,
// white 2 (right)
linear-gradient(
-79deg,
$t 40%,
rgba(#9A9BA1,.3),
rgba(#9A9BA1,.3) 52%,
rgba(#000,.2),
#2E2D31 65%,
)
11% 100% / 2.7em 88%,
// right angle
// black
linear-gradient(
-80deg,
$t 30%,
rgba(#000,.5) 35%,
rgba(#2E2D31,.2) 72%,
$t 78%,
)
94.5% 0% / 3.5em 95%,
// white
linear-gradient(
-80deg,
#2E2D31 40%,
rgba(#9A9BA1,.4),
rgba(#9A9BA1,.4) 52%,
$t 65%,
)
97.3% 100% / 3em 88%,
// white 2 (right)
linear-gradient(
79deg,
$t 40%,
rgba(#000,.2),
rgba(#9A9BA1,.3),
rgba(#9A9BA1,.3) 52%,
#2E2D31 65%,
)
91% 100% / 2.7em 88%,
linear-gradient(
to right,
$t,
rgba(#000,.4),
rgba(#000,.2)70%,
// red
)
95% 0% / 1.5em .7em,
linear-gradient(
to right,
$t,
rgba(#000,.4),
rgba(#000,.2)70%,
// red
)
5% 0% / 1.5em .7em,
linear-gradient(
to bottom,
rgba(#9A9BA1,.3),
rgba(#9A9BA1,.4),
rgba(#000,.06)90%,
$t
)
50% 0% / 17em .6em,
linear-gradient(
to left,
rgba(#9A9BA1,.2),
rgba(#9A9BA1,.5),
rgba(#000,.2)
)
96% 0% / 2em .5em,
linear-gradient(
to bottom,
#9A9BA1,
rgba(#9A9BA1,.4),
rgba(#000,.2)70%,
$t
)
100% 0% / 1.5em 1em,
linear-gradient(
to right,
rgba(#9A9BA1,.0),
rgba(#9A9BA1,.3),
rgba(#000,.3)
)
4% 0% / 2em .6em,
linear-gradient(
to bottom,
#9A9BA1,
rgba(#9A9BA1,.4),
rgba(#000,.2)70%,
$t
)
0% 0% / 2em 1em,
linear-gradient(
to top,
rgba(#9A9BA1,.4) 5%,
rgba(#9A9BA1,.1),
rgba(#000,.07),
$t
)
50% 0% / 83% 100%,
#2E2D31
;
background-repeat: no-repeat;
.switch{
width: 12.7em;
height: 3em;
// border:1px solid yellow;
position: absolute;
@include center;
left:54%;
background:
linear-gradient(
to right,
rgba(#d2d2d2,.05),
rgba(#000,.1),
rgba(#000,.7)
)
39% 50% / 89% 2.7em,
linear-gradient(
to right,
rgba(#06050A,1),
rgba(#06050A,1),
rgba(#06050A,1)
)
86% 50% / 2.3em 2.8em,
linear-gradient(
to bottom,
rgba(#000,.1),
rgba(#000,.1),
rgba(#000,.3)
)
45% 93% / 90% .2em,
linear-gradient(
to bottom,
#000 1%,
#444348 2%,
#444348 98%,
#000 99%
)
45% 5% / 70% .2em,
linear-gradient(
to bottom,
#000 1%,
#444348 2%,
#444348 98%,
#000 99%
)
43% 50% / 70% 2.8em,
radial-gradient(
100% 100% at 50% 50%,
#0B0A0F 46%,
rgba(#000,1) 50%,
rgba($t,.0) 51%
)
100% 50% / 3em 2.8em,
radial-gradient(
100% 100% at 50% 50%,
#444348 43%,
rgba(#fff,.3),
rgba(#000,1) 50%,
rgba($t,.0) 51%
)
0% 50% / 3em 2.8em,
;
background-repeat: no-repeat;
.switch_btn{
width: 2.8em;
height: 2.8em;
@include center;
border-radius: 50%;
border-bottom:none;
left: 75%;
top: 37%;
background:
radial-gradient(
100% 100% at 50% 50%,
#2D2C31 44%,
rgba(#06050A,.6) 48%,
rgba($t,.0) 55%
)
50% 50% / 98% 100%,
#39383D;
background-repeat: no-repeat;
box-shadow: 0 2em 4em rgba(0,0,0,0.19), 0 .3em .3em rgba(0,0,0,0.23),
-.15em .2em 0 .2em rgba(#000, .8),
.04em .1em 0 .1em rgba(#d2d2d2, .5),
0 .38em .28em rgba(0,0,0,0.50), 0 15px 5px rgba(0,0,0,0.42);
;
}
}
}
}
.btm{
width: 100%;
height: 16.3em;
position: absolute;
background-repeat: no-repeat;
background:
// btm shading
linear-gradient(
to bottom,
$t,
rgba(#37383C,1),
rgba(#37383C,1)
)
10.8% 100% / 100% .8em,
linear-gradient(
to right,
#000,
rgba(#6C6D71,.8)
)
10.8% 0% / .3em 3.75em,
linear-gradient(
to right,
#000,
rgba(#6C6D71,.8)
)
94% 0% / .3em 3.75em,
// right end
linear-gradient(
to left,
#797A7F 5%,
#797A7F,
rgba(#242328,1) 8%,
rgba(#2F3034,1) 41%
)
95% 32% / .8em 4.5em,
linear-gradient(
to left,
rgba(#797A7F,.4) 5%,
rgba(#1B1C20,1) 8%,
rgba(#1B1C20,1) 41%
)
95% 32% / 1em 4.5em,
// left end
linear-gradient(
to right,
#797A7F 5%,
#797A7F,
rgba(#242328,1) 8%,
rgba(#2F3034,1) 41%
)
9% 32% / .8em 4.5em,
linear-gradient(
to right,
#797A7F 5%,
rgba(#1B1C20,1) 8%,
rgba(#1B1C20,1) 41%
)
9% 32% / 1em 4.5em,
// l&r side blocks
linear-gradient(
-80deg,
#05060A 38%,
rgba(pink,.0) 41%
)
93.5% 28% / 2em 2em,
linear-gradient(
80deg,
#05060A 38%,
rgba(pink,.0) 41%
)
10% 28% / 2em 2em,
// middle large rectangle
linear-gradient(
to bottom,
#0F0E13 40%,
#323136 60%,
#323136,
)
60% 28% / 55em 2em,
linear-gradient(
to right,
rgba(#000,.3),
rgba(#000,.0),
rgba(#000,.3)
)
60% 38% / 53em 1em,
linear-gradient(
to bottom,
#05060A 40%,
#05060A 60%,
rgba(#323136,.5),
)
60% 35% / 53em 2em,
// main large rectangle
linear-gradient(
to bottom,
#27282C 1%,
#05060A 2%,
#05060A 98%,
#797A7F 99%
)
65.5% 32% / 57.4em 4.5em,
;
background-repeat: no-repeat;
h1{
font-family: Arial;
font-size:4.4em;
color: #77767B;
color:#909291;
position:absolute;
letter-spacing: -1px;
font-weight: 600;
@include center;
top: 75%;
left:53%;
text-shadow:
.04em .04em 0px rgba(#000,.3);
&:nth-of-type(2){
width:10em;
text-align:right;
left: 81.3%;
font-size:1.8em;
letter-spacing: 0px;
top:79%;
}
}
.logo{
width: 4.7em;
height: 5.4em;
@include center;
left: 17.5%;
top: 70.5%;
background:
linear-gradient(
to bottom,
#898A8B,
#898A8B,
)
60% 5% / 100% .7em,
linear-gradient(
to bottom,
#898A8B,
#898A8B,
)
60% 25% / 100% .7em,
linear-gradient(
to bottom,
#898A8B,
#898A8B,
)
60% 45% / 100% .7em,
linear-gradient(
to bottom,
#898A8B,
#898A8B,
)
60% 65% / 100% .7em,
linear-gradient(
to bottom,
#898A8B,
#898A8B,
)
60% 100% / 100% 1.28em,
;
background-repeat: no-repeat;
}
}
}
.under_btm{
width:100%;
height: 1.5em;
@include center;
background:#1F2024;
top:99.5%;
&:before{
content: '';
position: absolute;
width: 3em;
height:4em;
top: -65%;
left:-1%;
transform:rotate(-70deg);
background:
// btm left corner
radial-gradient(
100% 160% at 100% 50%,
rgba($t,0) 48%,
rgba($bk,1) 51%
)
.2em 0% / 100% 150%,
;
background-repeat: no-repeat;
}
&:after{
content: '';
position: absolute;
width: 3em;
height:4em;
top: -90%;
left:96%;
transform:rotate(70deg);
background:
// btm left corner
radial-gradient(
100% 160% at 0% 50%,
rgba($t,.0) 48%,
rgba($bk,1) 51%
)
.2em 0% / 100% 150%,
;
background-repeat: no-repeat;
}
}
.corners{
.corner_left{
width:1.5em;
height: 1.5em;
position: absolute;
top: 62.5%;
left:-.4em;
background:
linear-gradient(
-45deg,
$t 49%,
rgba($bk,1) 51%,
)
50% 100% / 100% 100%,
;
background-repeat: no-repeat;
}
.corner_right{
width:1.5em;
height: 1.5em;
position: absolute;
top: 62.5%;
left:98.5%;
background:
linear-gradient(
45deg,
$t 49%,
rgba($bk,1) 51%,
)
50% 100% / 100% 100%,
;
background-repeat: no-repeat;
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment