A Pen by Ricardo Oliva Alonso on CodePen.
Created
August 16, 2023 11:34
-
-
Save sajjad-salam/b0bbdbe3fa2663406b87c15aeac05d96 to your computer and use it in GitHub Desktop.
3D Room - Pure CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div.house#h | |
| div.h-lights | |
| div.h-light | |
| div.h-light | |
| div.h-light | |
| div.h-light | |
| div.h-light | |
| div.h-light | |
| div.h-shadow | |
| //--------------------- | |
| div.alt | |
| div.alt__front.face | |
| div.alt__back.face | |
| div.alt__right.face | |
| div.alt__left.face | |
| div.alt__top.face | |
| div.light | |
| div.light | |
| div.light | |
| div.light | |
| div.light | |
| div.light | |
| div.light | |
| div.light | |
| div.light | |
| div.alt__bottom.face | |
| div.alb | |
| div.alb__front.face | |
| div.alb__back.face | |
| div.alb__right.face | |
| div.alb__left.face | |
| div.alb__top.face | |
| div.alb__bottom.face | |
| div.arb | |
| div.arb__front.face | |
| div.arb__back.face | |
| div.arb__right.face | |
| div.arb__left.face | |
| div.arb__top.face | |
| div.arb__bottom.face | |
| //--------------------- | |
| div.blt | |
| div.blt__front.face | |
| div.blt__back.face | |
| div.blt__right.face | |
| div.blt__left.face | |
| div.blt__top.face | |
| div.blt__bottom.face | |
| div.blt2 | |
| div.blt2__front.face | |
| div.blt2__back.face | |
| div.blt2__right.face | |
| div.blt2__left.face | |
| div.blt2__top.face | |
| div.blt2__bottom.face | |
| div.blb | |
| div.blb__front.face | |
| div.blb__back.face | |
| div.blb__right.face | |
| div.blb__left.face | |
| div.blb__top.face | |
| div.blb__bottom.face | |
| div.blb2 | |
| div.blb2__front.face | |
| div.blb2__back.face | |
| div.blb2__right.face | |
| div.blb2__left.face | |
| div.blb2__top.face | |
| div.blb2__bottom.face | |
| //--------------------- | |
| div.puerta-c | |
| div.puerta | |
| div.puerta__front.face | |
| div.puerta__back.face | |
| div.puerta__right.face | |
| div.puerta__left.face | |
| div.puerta__top.face | |
| div.puerta__bottom.face | |
| div.puerta-l | |
| div.puerta-l__front.face | |
| div.puerta-l__back.face | |
| div.puerta-l__right.face | |
| div.puerta-l__left.face | |
| div.puerta-l__top.face | |
| div.puerta-l__bottom.face | |
| div.puerta-r | |
| div.puerta-r__front.face | |
| div.puerta-r__back.face | |
| div.puerta-r__right.face | |
| div.puerta-r__left.face | |
| div.puerta-r__top.face | |
| div.puerta-r__bottom.face | |
| div.puerta-t | |
| div.puerta-t__front.face | |
| div.puerta-t__back.face | |
| div.puerta-t__right.face | |
| div.puerta-t__left.face | |
| div.puerta-t__top.face | |
| div.puerta-t__bottom.face | |
| div.cuadro-l | |
| div.cuadro-l__front.face | |
| div.cuadro-l__back.face | |
| div.cuadro-l__right.face | |
| div.cuadro-l__left.face | |
| div.cuadro-l__top.face | |
| div.cuadro-l__bottom.face | |
| div.cuadro-r | |
| div.cuadro-r__front.face | |
| div.cuadro-r__back.face | |
| div.cuadro-r__right.face | |
| div.cuadro-r__left.face | |
| div.cuadro-r__top.face | |
| div.cuadro-r__bottom.face | |
| div.librero | |
| div.librero__front.face | |
| div.librero__back.face | |
| div.librero__right.face | |
| div.librero__left.face | |
| div.librero__top.face | |
| div.librero__bottom.face | |
| div.libros | |
| - let lb = 0 | |
| while lb < 6 | |
| div.libro | |
| div.libro__front.face | |
| div.libro__back.face | |
| div.libro__right.face | |
| div.libro__left.face | |
| div.libro__top.face | |
| div.libro__bottom.face | |
| - lb++ | |
| div.fotos | |
| - let ft = 0 | |
| while ft < 2 | |
| div.foto | |
| div.foto__front.face | |
| div.foto__back.face | |
| div.foto__right.face | |
| div.foto__left.face | |
| div.foto__top.face | |
| div.foto__bottom.face | |
| - ft++ | |
| div.cajas | |
| - let cj = 0 | |
| while cj < 3 | |
| div.caja | |
| div.caja__front.face | |
| div.caja__back.face | |
| div.caja__right.face | |
| div.caja__left.face | |
| div.caja__top.face | |
| div.caja__bottom.face | |
| - cj++ | |
| div.tv | |
| div.tv__front.face | |
| div.tv__back.face | |
| div.tv__right.face | |
| div.tv__left.face | |
| div.tv__top.face | |
| div.tv__bottom.face | |
| div.repisa-t | |
| div.repisa-t__front.face | |
| div.repisa-t__back.face | |
| div.repisa-t__right.face | |
| div.repisa-t__left.face | |
| div.repisa-t__top.face | |
| div.repisa-t__bottom.face | |
| div.repisa-b | |
| div.repisa-b__front.face | |
| div.repisa-b__back.face | |
| div.repisa-b__right.face | |
| div.repisa-b__left.face | |
| div.repisa-b__top.face | |
| div.repisa-b__bottom.face | |
| div.bocina-l | |
| div.bocina-l__front.face | |
| div.bocina-l__back.face | |
| div.bocina-l__right.face | |
| div.bocina-l__left.face | |
| div.bocina-l__top.face | |
| div.bocina-l__bottom.face | |
| div.bocina-r | |
| div.bocina-r__front.face | |
| div.bocina-r__back.face | |
| div.bocina-r__right.face | |
| div.bocina-r__left.face | |
| div.bocina-r__top.face | |
| div.bocina-r__bottom.face | |
| div.muro | |
| div.muro__front.face | |
| div.muro__back.face | |
| div.muro__right.face | |
| div.muro__left.face | |
| div.muro__top.face | |
| div.muro__bottom.face | |
| div.sillon-c | |
| div.sillon-b | |
| div.sillon-b__front.face | |
| div.sillon-b__back.face | |
| div.sillon-b__right.face | |
| div.sillon-b__left.face | |
| div.sillon-b__top.face | |
| div.sillon-b__bottom.face | |
| div.sillon-t | |
| div.sillon-t__front.face | |
| div.sillon-t__back.face | |
| div.sillon-t__right.face | |
| div.sillon-t__left.face | |
| div.sillon-t__top.face | |
| div.sillon-t__bottom.face | |
| div.sillon-l | |
| div.sillon-l__front.face | |
| div.sillon-l__back.face | |
| div.sillon-l__right.face | |
| div.sillon-l__left.face | |
| div.sillon-l__top.face | |
| div.sillon-l__bottom.face | |
| div.sillon-r | |
| div.sillon-r__front.face | |
| div.sillon-r__back.face | |
| div.sillon-r__right.face | |
| div.sillon-r__left.face | |
| div.sillon-r__top.face | |
| div.sillon-r__bottom.face | |
| div.mesa-c | |
| div.mesa | |
| div.mesa__front.face | |
| div.mesa__back.face | |
| div.mesa__right.face | |
| div.mesa__left.face | |
| div.mesa__top.face | |
| div.mesa__bottom.face | |
| - let np = 0 | |
| while np < 4 | |
| div.mesa-p | |
| div.mesa-p__front.face | |
| div.mesa-p__back.face | |
| div.mesa-p__right.face | |
| div.mesa-p__left.face | |
| div.mesa-p__top.face | |
| div.mesa-p__bottom.face | |
| - np++ | |
| div.mesa-shadow | |
| div.tablet | |
| div.tablet__front.face | |
| div.tablet__back.face | |
| div.tablet__right.face | |
| div.tablet__left.face | |
| div.tablet__top.face | |
| div.tablet__bottom.face |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Designed by: Jarlan Perez | |
| Original image: https://www.artstation.com/artwork/VdBllN | |
| */ | |
| const h = document.querySelector("#h"); | |
| const b = document.body; | |
| let base = (e) => { | |
| var x = e.pageX / window.innerWidth - 0.5; | |
| var y = e.pageY / window.innerHeight - 0.5; | |
| h.style.transform = ` | |
| perspective(90vw) | |
| rotateX(${ y * 4 + 75}deg) | |
| rotateZ(${ -x * 12 + 45}deg) | |
| translateZ(-9vw) | |
| `; | |
| } | |
| b.addEventListener("pointermove", base); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // $bg-1: #322e4a; | |
| $bg-1: hsl(250, 28%, 11%); | |
| $bg-2: darken($bg-1, 15); | |
| $white-1: #FBFAFE; | |
| $white-2: #9E99C1; | |
| $white-3: #383358; | |
| $white-4: #282347; | |
| $black-1: #1f2158; | |
| $black-2: darken($black-1, 10); | |
| $black-3: darken($black-2, 5); | |
| // $neon-1: #5474FB; | |
| // $neon-2: #283CD2; | |
| $neon-1: hsl(220, 95%, 65%); | |
| $neon-2: hsl(210, 68%, 49%); | |
| $cuadro-1: #D51E24; | |
| $cuadro-2: #0F1110; | |
| /***********************/ | |
| /***********************/ | |
| @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); | |
| } | |
| /***********************/ | |
| /***********************/ | |
| @mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) { | |
| animation: #{$animation} #{$time} infinite ease; | |
| @keyframes #{$animation} { | |
| 0%, 15%, 45%, 60%, 62%, 68%{ | |
| @if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); } | |
| @else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); } | |
| @else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); } | |
| @else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); } | |
| @else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); } | |
| } | |
| 20%, 40%, 58%, 64%, 70%, 100%{ | |
| @if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); } | |
| @else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); } | |
| @else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); } | |
| @else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); } | |
| @else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); } | |
| } | |
| } | |
| } | |
| /**/ | |
| *, *::after, *::before { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| user-select: none; | |
| transform-style: preserve-3d; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| /* Generic */ | |
| body{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| cursor: pointer; | |
| background-image: radial-gradient(circle, $bg-1, darken($bg-1, 20) ); | |
| } | |
| .face{ position: absolute; } | |
| /***************/ | |
| .house{ | |
| position: absolute; | |
| width: 28vw; | |
| height: 28vw; | |
| transform: | |
| perspective(90vw) | |
| rotateX(75deg) | |
| rotateZ(45deg) | |
| translateZ(-9vw) | |
| ; | |
| } | |
| .h-shadow{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| box-shadow: | |
| 1.5vw -3vw 3vw $bg-2, | |
| 1.5vw .5vw 1.5vw $bg-2 | |
| ; | |
| } | |
| .h-lights{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-50%); | |
| width: 45vw; | |
| height: 45vw; | |
| } | |
| .h-light{ | |
| position: absolute; | |
| &:nth-of-type(1){ | |
| bottom: 5vw; | |
| right: 0; | |
| width: 14vw; | |
| height: 14vw; | |
| border-radius: 50%; | |
| background-image: radial-gradient( lighten($bg-1, 2) , transparent); | |
| filter: blur(1vw); | |
| } | |
| &:nth-of-type(2){ | |
| bottom: 18vw; | |
| right: -1vw; | |
| width: 2vw; | |
| height: 12vw; | |
| border-radius: 50%; | |
| transform: rotateZ(-50deg); | |
| background-image: radial-gradient( rgba($neon-1, .45) 50%, rgba($neon-2, .45), transparent); | |
| box-shadow: -1vw -1vw 2vw 1vw rgba(lighten($neon-1, 10), .1); | |
| filter: blur(1vw); | |
| } | |
| &:nth-of-type(3){ | |
| bottom: -2vw; | |
| right: 17vw; | |
| width: 5vw; | |
| height: 12vw; | |
| border-radius: 50%; | |
| transform: rotateZ(-50deg); | |
| background-image: radial-gradient( rgba($neon-1, .5) 50%, rgba($neon-2, .5), transparent); | |
| filter: blur(2vw); | |
| &::before, | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| width: 200%; | |
| top: -6vw; | |
| height: 400%; | |
| background-image: linear-gradient(to bottom, rgba($neon-2, .1), rgba($neon-1, .1), transparent); | |
| border-top-left-radius: 10vw; | |
| border-top-right-radius: 10vw; | |
| filter: blur(1.5vw); | |
| } | |
| &::before{ | |
| right: -50%; | |
| transform-origin: top right; | |
| transform: rotateZ(15deg); | |
| box-shadow: -2vw -2vw 0 rgba($neon-1, .075); | |
| } | |
| &::after{ | |
| left: -50%; | |
| transform-origin: top left; | |
| transform: rotateZ(-15deg); | |
| box-shadow: 2vw -2vw 0 rgba($neon-1, .075); | |
| } | |
| } | |
| &:nth-of-type(4){ | |
| bottom: 5vw; | |
| left: 8vw; | |
| width: 28vw; | |
| height: 4vw; | |
| transform-origin: top left; | |
| transform: skewX(58deg); | |
| background-image: linear-gradient(to right, rgba($neon-1, .075) 10%, transparent 25%, transparent, rgba($bg-2, .15)); | |
| filter: blur(.25vw); | |
| } | |
| &:nth-of-type(6){ | |
| bottom: 14vw; | |
| right: 2vw; | |
| width: 8vw; | |
| height: 16vw; | |
| transform-origin: bottom left; | |
| transform: skewY(49deg); | |
| background-image: linear-gradient(to left, rgba(darken(red, 50), .1), rgba(darken(red, 50), .7) ); | |
| filter: blur(.35vw); | |
| } | |
| } | |
| /***************/ | |
| /***************/ | |
| .alt{ | |
| $width-el: 27vw; | |
| $height-el: .5vw; | |
| $depth-el: 13.5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 27vw; | |
| height: 27vw; | |
| &__front{ background-color: $white-2; } | |
| &__back{ background-color: $white-3; } | |
| &__right{ background-color: $white-3; } | |
| &__left{ background-color: $white-1; } | |
| &__top{ | |
| background-image: linear-gradient(to bottom, $black-3, $white-3 , $white-2); | |
| .light:nth-of-type(1){ | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| background-image: linear-gradient(to bottom, rgba( darken($neon-2, 25), .75), rgba($neon-1, .75), transparent); | |
| } | |
| .light:nth-of-type(2){ | |
| position: absolute; | |
| left: 4vw; | |
| height: 100%; | |
| width: 6vw; | |
| background-image: linear-gradient(to bottom, transparent 20%, rgba($neon-2, .75) , rgba($neon-1, .25) 80%); | |
| filter: blur(.1vw); | |
| } | |
| .light:nth-of-type(3){ | |
| position: absolute; | |
| bottom: 10vw; | |
| left: 5vw; | |
| width: 6vw; | |
| height: 3vw; | |
| border-radius: 50%; | |
| transform: rotateZ(42deg); | |
| background-image: radial-gradient( rgba( lighten($neon-1, 10), .75) 50%, rgba( darken($neon-2, 10), .75)); | |
| filter: blur(.55vw); | |
| } | |
| .light:nth-of-type(4){ | |
| position: absolute; | |
| bottom: 7vw; | |
| left: 4vw; | |
| width: 8.5vw; | |
| height: 2vw; | |
| border-radius: 50%; | |
| transform: rotateZ(40deg); | |
| background-image: radial-gradient( rgba( lighten($neon-1, 10), .75) 50%, rgba( darken($neon-2, 10), .75)); | |
| filter: blur(.55vw); | |
| } | |
| .light:nth-of-type(5){ | |
| position: absolute; | |
| bottom: 3.5vw; | |
| left: 4.5vw; | |
| width: 6vw; | |
| height: 2vw; | |
| border-radius: 50%; | |
| transform: rotateZ(40deg); | |
| background-image: radial-gradient( rgba( lighten($neon-1, 12), .75) 50%, rgba( darken($neon-2, 10), .75)); | |
| filter: blur(.75vw); | |
| } | |
| .light:nth-of-type(6){ | |
| position: absolute; | |
| bottom: 3vw; | |
| left: .5vw; | |
| width: 4vw; | |
| height: 2vw; | |
| border-radius: 50%; | |
| transform: rotateZ(40deg); | |
| background-image: radial-gradient( rgba( lighten($neon-1, 12), .75) 50%, rgba( darken($neon-2, 10), .75)); | |
| filter: blur(.35vw); | |
| } | |
| .light:nth-of-type(7){ | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, darken($black-3, 10), $neon-1 10%, transparent 20%); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 20%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba(darken($neon-1, 25), .6), transparent 60%); | |
| } | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 20%; | |
| background-image: linear-gradient(to bottom, rgba(darken($neon-1, 20), .5), transparent 60%); | |
| } | |
| } | |
| .light:nth-of-type(8){ | |
| position: absolute; | |
| bottom: 5vw; | |
| left: 10vw; | |
| width: 6vw; | |
| height: 4vw; | |
| border-radius: 50%; | |
| transform: rotateZ(40deg); | |
| background-image: radial-gradient( rgba( lighten($white-1, 12), .1) 50%, rgba( darken($white-2, 10), .1)); | |
| filter: blur(.8vw); | |
| } | |
| } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .alb{ | |
| $width-el: 27vw; | |
| $height-el: 2vw; | |
| $depth-el: .5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 27vw; | |
| height: 1vw; | |
| &__front{ background-image: linear-gradient(to right, $white-2 40%, darken($white-2, 5) ); } | |
| &__back{ background-color: $white-3; } | |
| &__right{ background-color: $white-3; } | |
| &__left{ background-color: $white-1; } | |
| &__top{ background-image: linear-gradient(to right, $white-1 40%, darken($white-1, 5) );} | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .arb{ | |
| $width-el: 1vw; | |
| $height-el: 2vw; | |
| $depth-el: 14vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| width: 1vw; | |
| height: 28vw; | |
| &__front{ background-color: darken($white-2, 5); } | |
| &__back{ background-color: $white-3; } | |
| &__right{ background-image: linear-gradient(to right, $white-4 40%, darken($white-3, 20) ); } | |
| &__left{ background-color: $white-2; } | |
| &__top{ | |
| background-image: linear-gradient(to top, $white-1, lighten($white-4, 10) 25%, darken($white-3, 5) 75%, $white-2 ); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 30%; | |
| top: 0; | |
| background-image: linear-gradient(to bottom, transparent, rgba($neon-1, .85), transparent); | |
| } | |
| } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| /***************/ | |
| /***************/ | |
| .blt{ | |
| $width-el: 1vw; | |
| $height-el: 20vw; | |
| $depth-el: 13.5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 1vw; | |
| height: 27vw; | |
| transform: translateZ(.5vw); | |
| &__front{ background-image: linear-gradient(to bottom, $white-3, $white-2); } | |
| &__back{ background-color: $white-3; } | |
| &__right{ | |
| background-image: linear-gradient(to bottom, darken($white-4, 10), $white-3, $white-3 90%, darken($white-4, 2)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| height: .75vw; | |
| background-image: linear-gradient(to bottom, darken($white-2, 5), $neon-2 ); | |
| border-top: .1vw solid $white-4; | |
| border-bottom: .1vw solid $white-4; | |
| } | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba(darken($neon-1, 20), .35), transparent 30%, transparent 70%, rgba($neon-2, .35) ); | |
| } | |
| } | |
| &__left{ background-color: $white-1; } | |
| // &__top{ background-color: $white-1; } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .blt2{ | |
| $width-el: 2vw; | |
| $height-el: .75vw; | |
| $depth-el: 13.5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 2vw; | |
| height: 27vw; | |
| transform: translateZ(20.5vw); | |
| &__front{ background-color: $white-3; } | |
| &__back{ background-color: $white-3; } | |
| &__right{ | |
| background-image: linear-gradient(to right, darken($white-2, 5), $white-2, darken($white-2, 15) ); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| bottom: 0; | |
| border-bottom: .1vw solid rgba($white-1, .75); | |
| background-image: linear-gradient(to top, rgba($neon-1, .35) , transparent); | |
| } | |
| } | |
| &__left{ background-color: $white-1; } | |
| &__top{ background-image: linear-gradient(to top, $white-2, $white-1); } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .blb{ | |
| $width-el: 26vw; | |
| $height-el: 20vw; | |
| $depth-el: .5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 1vw; | |
| top: 0; | |
| width: 26vw; | |
| height: 1vw; | |
| transform: translateZ(.5vw); | |
| &__front{ | |
| background-image: linear-gradient(to bottom, darken($white-2, 32), darken($white-2, 25) 20%, darken($white-2, 32)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(to bottom, rgba($neon-2, .25), transparent 20%, transparent 80%, rgba($neon-2, .5)), | |
| linear-gradient(to right, rgba($black-1, .35), transparent ), | |
| linear-gradient(to bottom, rgba($black-1, .35), transparent ), | |
| linear-gradient(to bottom, rgba( darken($neon-2, 50), .5), transparent 20%, transparent 80%, rgba($neon-2, .25) ) | |
| ; | |
| } | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| height: .75vw; | |
| background-image: linear-gradient(to bottom, darken($white-2, 5), $neon-2 ); | |
| border-top: .1vw solid $white-4; | |
| border-bottom: .1vw solid $white-4; | |
| } | |
| } | |
| &__back{ background-color: $white-3; } | |
| &__right{ background-image: linear-gradient(to bottom, darken($white-4, 10), darken($white-3, 20) 80%, darken($white-4, 10)); } | |
| // &__left{ background-color: $white-2; } | |
| // &__top{ background-color: $white-1; } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .blb2{ | |
| $width-el: 25vw; | |
| $height-el: .75vw; | |
| $depth-el: 1vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 2vw; | |
| top: 0; | |
| width: 25vw; | |
| height: 1vw; | |
| transform: translateZ(20.5vw); | |
| &__front{ | |
| background-image: linear-gradient(to right, darken($white-2, 15), $white-2, darken($white-2, 5) ); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| bottom: 0; | |
| border-bottom: .1vw solid rgba($white-1, .75); | |
| background-image: linear-gradient(to top, rgba($neon-2, .25) , transparent); | |
| } | |
| } | |
| &__back{ background-color: $white-3; } | |
| &__right{ background-color: darken($white-4, 10); } | |
| &__left{ background-color: $white-2; } | |
| &__top{ background-image: linear-gradient(to left, $white-2, $white-1); } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| /***************/ | |
| /***************/ | |
| .bocina-l, | |
| .bocina-r{ | |
| $width-el: .75vw; | |
| $height-el: 6vw; | |
| $depth-el: .75vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 1.5vw; | |
| bottom: 5.25vw; | |
| width: .75vw; | |
| height: 1.5vw; | |
| transform: translateZ(8vw); | |
| &__right{ background-image: radial-gradient(darken($black-3, 10), darken($black-3, 15));} | |
| &__top{ background-image: linear-gradient(to left, darken($white-1, 10), $white-2, darken($white-2, 15)); } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .bocina-l{ | |
| &__front{ background-image: linear-gradient(to right, $neon-1, darken($white-2, 25) 30%, darken($white-1, 20)); } | |
| &__back{ | |
| background-image: linear-gradient(to right, $white-3, darken($white-3, 10)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba($neon-1, .35) 65%, rgba($neon-1, .95)); | |
| } | |
| } | |
| &__left{ | |
| background-color: $white-4; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| top: -10%; | |
| left: 20%; | |
| width: 120%; | |
| height: 120%; | |
| background-image: linear-gradient(to left, rgba(darken($neon-2, 40), .75), rgba(darken($black-3, 15) , .75) ); | |
| filter: blur(.5vw); | |
| } | |
| } | |
| } | |
| .bocina-r{ | |
| top: 5.25vw; | |
| &__front{ | |
| background-image: linear-gradient(to right, $white-3, darken($white-3, 20)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to left, rgba($neon-1, .35) 65%, rgba($neon-1, .95)); | |
| } | |
| } | |
| &__back{ background-image: linear-gradient(to right, darken($white-2, 25), darken($white-1, 20)); } | |
| &__left{ | |
| background-color: $white-4; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| top: -10%; | |
| left: -20%; | |
| width: 120%; | |
| height: 120%; | |
| background-image: linear-gradient(to right, rgba(darken($neon-2, 40), .75), rgba(darken($black-3, 15) , .75) ); | |
| filter: blur(.5vw); | |
| } | |
| } | |
| } | |
| .repisa-t, | |
| .repisa-b{ | |
| $width-el: 1.5vw; | |
| $height-el: .25vw; | |
| $depth-el: 5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 1.5vw; | |
| top: 9vw; | |
| width: 1.5vw; | |
| height: 10vw; | |
| transform: translateZ(16vw); | |
| &__front{ background-color: $white-2; } | |
| &__back{ background-color: $white-1; } | |
| &__right{ background-color: darken($white-2, 10); } | |
| &__left{ background-color: $white-1; } | |
| &__top{ | |
| background-color: darken($white-1, 10); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba(darken($neon-1, 20), .75), transparent); | |
| } | |
| } | |
| &__bottom{ | |
| background-color: $white-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba(darken($neon-1, 20), .75), transparent); | |
| } | |
| } | |
| } | |
| .repisa-b{ transform: translateZ(5vw);} | |
| .tv{ | |
| $width-el: .5vw; | |
| $height-el: 6vw; | |
| $depth-el: 6vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 1.51vw; | |
| top: 8vw; | |
| width: .5vw; | |
| height: 12vw; | |
| transform: translateZ(8vw); | |
| &__front{ background-color: $black-3; } | |
| &__back{ background-color: $black-3; } | |
| &__right{ | |
| background-color: lighten($neon-1, 15); | |
| border: .125vw solid darken($black-3, 10); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| box-shadow: | |
| .125vw .125vw 1vw rgba($neon-1, .5), | |
| -.125vw .125vw 1vw rgba($neon-1, .5), | |
| .125vw -.125vw 1vw rgba($neon-1, .5), | |
| -.125vw -.125vw 1vw rgba($neon-1, .5) | |
| ; | |
| background-image: url('https://rawcdn.githack.com/ricardoolivaalonso/Codepen/43200238c3177b02a97423fa6cc23f8bfcc5c105/Room/gif.gif'); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: bottom; | |
| opacity: .8; | |
| } | |
| animation: pantalla-tv .25s infinite alternate; | |
| } | |
| &__left{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: $black-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 13vw; | |
| height: 7vw; | |
| background-image: radial-gradient(rgba(darken($neon-2, 5), .95), rgba(darken($neon-1, 5), .95)); | |
| filter: blur(1.25vw); | |
| animation: luz-tv .25s infinite alternate; | |
| } | |
| } | |
| &__top{ background-color: $black-3; } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .librero{ | |
| $width-el: 12vw; | |
| $height-el: .25vw; | |
| $depth-el: .75vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 13vw; | |
| top: 1vw; | |
| width: 12vw; | |
| height: .5vw; | |
| transform: translateZ(7vw); | |
| &__front{ background-color: $white-2; } | |
| &__back{ | |
| background-color: $white-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 4vw; | |
| border-radius: 50%; | |
| background-image: radial-gradient( rgba( lighten($neon-1, 5), .7) 50%, rgba( darken($neon-2, 10), .6), transparent); | |
| filter: blur(1.25vw); | |
| } | |
| } | |
| &__right{ background-color: $white-3; } | |
| &__left{ background-color: $white-2; } | |
| &__top{ | |
| background-color: darken($white-1, 10); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba(darken($neon-1, 10), .75), transparent); | |
| } | |
| } | |
| &__bottom{ | |
| background-color: $white-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba(darken($neon-1, 10), .75), transparent); | |
| } | |
| } | |
| } | |
| .libros{ position: absolute; } | |
| .libro{ | |
| $width-el: .5vw; | |
| $height-el: 1.5vw; | |
| $depth-el: .5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| top: 1vw; | |
| width: .5vw; | |
| height: 1vw; | |
| transform: translateZ(7.25vw); | |
| &__front{ | |
| background-image: linear-gradient(to bottom, $white-2, darken($white-2, 10)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .4), transparent); | |
| } | |
| } | |
| &__back{ background-color: $white-1; } | |
| &__right{ | |
| background-color: darken($white-2, 20); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .85), rgba($neon-2, .35)); | |
| } | |
| } | |
| &__left{ background-color: $white-2; } | |
| &__top{ | |
| background-color: darken($white-1, 10); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .85), rgba($neon-2, .35)); | |
| } | |
| } | |
| &__bottom{ background-color: lighten($white-3, 14); } | |
| &:nth-of-type(1){ | |
| left: 16vw; | |
| transform-origin: left; | |
| transform: translateZ(7.25vw) rotateZ(-10deg); | |
| } | |
| &:nth-of-type(2){ | |
| left: 17vw; | |
| transform: translateZ(7.25vw) rotateZ(2deg); | |
| } | |
| &:nth-of-type(3){ | |
| left: 17.75vw; | |
| transform: translateZ(7.25vw) rotateZ(5deg); | |
| } | |
| &:nth-of-type(4){ | |
| left: 19vw; | |
| transform-origin: left; | |
| transform: translateZ(7.25vw) rotateZ(10deg); | |
| } | |
| &:nth-of-type(5){ | |
| left: 20vw; | |
| transform-origin: left; | |
| transform: translateZ(7.25vw) rotateZ(10deg); | |
| } | |
| &:nth-of-type(6){ | |
| left: 23vw; | |
| transform-origin: left; | |
| transform: translateZ(7.25vw) rotateY(-90deg); | |
| } | |
| } | |
| .fotos{ position: absolute; } | |
| .foto{ | |
| $width-el: .125vw; | |
| $height-el: 1.125vw; | |
| $depth-el: 1.125vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| width: .125vw; | |
| height: 2vw; | |
| left: 2vw; | |
| top: 11vw; | |
| transform: translateZ(5.26vw); | |
| &__front{ | |
| background-image: linear-gradient(to bottom, $white-2, darken($white-2, 10)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .4), transparent); | |
| } | |
| } | |
| &__back{ background-color: $white-1; } | |
| &__right{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: darken($white-2, 5); | |
| border: .15vw solid $black-1; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: repeating-linear-gradient(to bottom, $white-2 .1vw, darken($white-1, 20) .2vw); | |
| } | |
| } | |
| &__left{ background-color: $white-2; } | |
| &__top{ | |
| background-color: darken($white-1, 10); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .85), rgba($neon-2, .35)); | |
| } | |
| } | |
| &__bottom{ | |
| background-color: darken($white-2, 25); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| right: -100%; | |
| width: 400%; | |
| height: 100%; | |
| background-color: rgba($black-3, .75); | |
| filter: blur(.15vw); | |
| } | |
| } | |
| &:nth-of-type(1){ | |
| top: 10.5vw; | |
| transform: translateZ(5.26vw) rotateZ(5deg); | |
| } | |
| &:nth-of-type(2){ | |
| top: 15vw; | |
| transform: translateZ(5.26vw) rotateZ(-15deg); | |
| } | |
| } | |
| .cajas{ position: absolute; } | |
| .caja{ | |
| $width-el: 1vw; | |
| $height-el: .75vw; | |
| $depth-el: .75vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| width: 1vw; | |
| height: 1.5vw; | |
| left: 2vw; | |
| transform: translateZ(16.35vw); | |
| &__front{ | |
| background-image: linear-gradient(to bottom, $white-2, darken($white-2, 10)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .4), transparent); | |
| } | |
| } | |
| &__back{ | |
| background-color: $white-2; | |
| } | |
| &__right{ | |
| background-color: darken($white-2, 20); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .85), rgba($neon-2, .35)); | |
| } | |
| } | |
| &__left{ background-color: $white-2; } | |
| &__top{ | |
| background-color: darken($white-1, 10); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-1, .85), rgba($neon-2, .35)); | |
| } | |
| } | |
| &__bottom{ | |
| background-color: darken($white-2, 25); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| right: -50%; | |
| width: 150%; | |
| height: 120%; | |
| background-color: rgba($black-1, .5); | |
| filter: blur(.15vw); | |
| } | |
| } | |
| &:nth-of-type(1){ top: 11.6vw; } | |
| &:nth-of-type(2){ top: 13.5vw; } | |
| &:nth-of-type(3){ top: 17vw; } | |
| } | |
| .cuadro-l, | |
| .cuadro-r{ | |
| $width-el: 5vw; | |
| $height-el: 7vw; | |
| $depth-el: .125vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 13vw; | |
| top: 1vw; | |
| width: 5vw; | |
| height: .5vw; | |
| transform: translateZ(10vw); | |
| &__front{ | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| background-position: center; | |
| } | |
| &__back{ | |
| background-color: $white-3; | |
| box-shadow: | |
| .35vw .35vw .35vw rgba($neon-1, .2), | |
| -.35vw .35vw .35vw rgba($neon-1, .2), | |
| -.35vw -.35vw .35vw rgba($neon-1, .2), | |
| .35vw -.35vw .35vw rgba($neon-1, .2) | |
| ; | |
| } | |
| &__right{ background-color: $white-3; } | |
| &__left{ background-color: $white-2; } | |
| &__top{ background-color: $white-2; } | |
| &__bottom{ background-color: $white-3; } | |
| } | |
| .cuadro-l{ | |
| &__front{ | |
| background-image: url('https://rawcdn.githack.com/ricardoolivaalonso/Codepen/43200238c3177b02a97423fa6cc23f8bfcc5c105/Room/cuadro-1.jpg'); | |
| background-color: $cuadro-1; | |
| border: 1vw solid $cuadro-1; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| top: -1vw; | |
| left: -1vw; | |
| width: 5vw; | |
| height: 7vw; | |
| background-origin: padding-box; | |
| background-image: linear-gradient(to bottom, rgba($neon-2, .15), rgba($neon-2, .15)); | |
| } | |
| } | |
| } | |
| .cuadro-r{ | |
| left: 20vw; | |
| &__front{ | |
| background-image: url('https://rawcdn.githack.com/ricardoolivaalonso/Codepen/43200238c3177b02a97423fa6cc23f8bfcc5c105/Room/cuadro-2.jpg'); | |
| background-color: $cuadro-2; | |
| border: .5vw solid $cuadro-2; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| top: -.5vw; | |
| left: -.5vw; | |
| width: 5vw; | |
| height: 7vw; | |
| background-origin: padding-box; | |
| background-image: linear-gradient(to bottom, rgba($neon-2, .15), rgba($neon-2, .15)); | |
| } | |
| } | |
| } | |
| .puerta-c{ | |
| position: absolute; | |
| left: 3vw; | |
| top: 1vw; | |
| width: 8vw; | |
| height: .5vw; | |
| transform: translateZ(.5vw); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 200%; | |
| background-color: rgba( darken($black-3, 10), .65); | |
| filter: blur(.5vw); | |
| } | |
| } | |
| .puerta{ | |
| $width-el: 7vw; | |
| $height-el: 16vw; | |
| $depth-el: .125vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: .5vw; | |
| top: 0; | |
| width: 7vw; | |
| height: .5vw; | |
| &__front{ | |
| background-image: linear-gradient(to bottom, $cuadro-2, $black-2); | |
| border: .125vw solid $neon-1; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: radial-gradient(transparent 50%, rgba( darken($neon-1, 30), .25)); | |
| box-shadow: | |
| .65vw .65vw .5vw rgba($neon-1, .6), | |
| -.65vw .65vw .5vw rgba($neon-1, .6), | |
| -.65vw -.65vw .5vw rgba($neon-1, .6), | |
| .65vw -.65vw .5vw rgba($neon-1, .6) | |
| ; | |
| } | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: .75vw; | |
| width: 1vw; | |
| height: .25vw; | |
| background-color: $white-2; | |
| box-shadow: | |
| .125vw .125vw .25vw rgba($neon-1, .6), | |
| -.125vw .125vw .25vw rgba($neon-1, .6), | |
| -.125vw -.125vw .25vw rgba($neon-1, .6), | |
| .125vw -.125vw .25vw rgba($neon-1, .6) | |
| ; | |
| } | |
| } | |
| // &__back{ background-color: $white-3; } | |
| // &__right{ background-color: $white-3; } | |
| // &__left{ background-color: $white-2; } | |
| // &__top{ background-color: $white-1; } | |
| // &__bottom{ background-color: $white-3; } | |
| } | |
| .puerta-l, | |
| .puerta-r{ | |
| $width-el: .5vw; | |
| $height-el: 16vw; | |
| $depth-el: .25vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: .5vw; | |
| height: .5vw; | |
| &__front{ background-color: darken($black-1, 10); } | |
| &__back{ background-color: $black-3; } | |
| &__right{ background-color: $black-3; } | |
| &__left{ background-color: $black-2; } | |
| // &__top{ background-color: $white-1; } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .puerta-r{ left: calc(100% - .5vw); } | |
| .puerta-t{ | |
| $width-el: 8vw; | |
| $height-el: .5vw; | |
| $depth-el: .25vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| left: 0; | |
| top: 0; | |
| width: 8vw; | |
| height: .5vw; | |
| transform: translateZ(16vw); | |
| &__front{ background-color: darken($black-1, 10); } | |
| &__back{ background-color: $black-3; } | |
| &__right{ background-color: $black-3; } | |
| &__left{ background-color: $black-2; } | |
| &__top{ background-color: $black-1; } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .muro{ | |
| $width-el: .5vw; | |
| $height-el: 18vw; | |
| $depth-el: 8vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 1vw; | |
| top: 6vw; | |
| width: .5vw; | |
| height: 16vw; | |
| transform: translateZ(.51vw); | |
| &__front{ background-color: $black-3; } | |
| &__back{ background-color: $black-3; } | |
| &__right{ | |
| display: flex; | |
| justify-content: center; | |
| background-image: radial-gradient(circle, $black-1, darken($black-1, 15)); | |
| overflow: hidden; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-2, .25), transparent 30%, transparent 70%, rgba($neon-2, .15) ); | |
| } | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 5%; | |
| width: 90%; | |
| height: 25%; | |
| background-image: linear-gradient(to bottom, rgba(darken($black-3, 5), .75), rgba(darken($black-3, 5), .95)); | |
| filter: blur(.75vw); | |
| } | |
| } | |
| &__left{ | |
| background-color: $black-3; | |
| box-shadow: | |
| .5vw .5vw .6vw rgba($neon-1, .3), | |
| .5vw -.5vw .6vw rgba($neon-1, .3), | |
| -.5vw .5vw .6vw rgba($neon-1, .3), | |
| -.5vw -.5vw .6vw rgba($neon-1, .3) | |
| ; | |
| } | |
| &__top{ | |
| background-color: $black-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| bottom: 0; | |
| background-image: linear-gradient(to left, rgba($neon-2, .5) , rgba($neon-1, .25)); | |
| } | |
| } | |
| &__bottom{ | |
| background-color: $black-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 5vw; | |
| height: 100%; | |
| background-image: linear-gradient(to left, $black-3, transparent 50%); | |
| transform-origin: right bottom; | |
| transform: skewY(-20deg); | |
| filter: blur(.25vw); | |
| } | |
| } | |
| } | |
| .sillon-c{ | |
| position: absolute; | |
| right: 2vw; | |
| bottom: 6vw; | |
| width: 6vw; | |
| height: 16vw; | |
| transform: translateZ(.5vw); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| top: -10%; | |
| left: -10%; | |
| width: 120%; | |
| height: 120%; | |
| background-color: rgba($black-3, .85); | |
| filter: blur(.75vw); | |
| } | |
| } | |
| .sillon-b{ | |
| $width-el: 6vw; | |
| $height-el: 3vw; | |
| $depth-el: 7vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| top: 1vw; | |
| width: 6vw; | |
| height: 14vw; | |
| &__front{ background-color: $black-2; } | |
| &__back{ background-color: $black-3; } | |
| &__right{ background-color: $black-3; } | |
| &__left{ | |
| background-image: linear-gradient(to bottom, $black-2, darken($black-2, 5) ); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to bottom, rgba($neon-2, .1), transparent); | |
| } | |
| } | |
| &__top{ | |
| background-image: linear-gradient(to right, $black-1, $black-2 ); | |
| border-left: .1vw solid rgba($white-2, .5); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba($neon-2, .25), transparent); | |
| } | |
| } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .sillon-l, | |
| .sillon-r{ | |
| $width-el: 6vw; | |
| $height-el: 4.5vw; | |
| $depth-el: .5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 6vw; | |
| height: 1vw; | |
| &__front{ background-image: linear-gradient(to bottom, $black-2, $black-3) ; } | |
| &__back{ background-color: $black-3; } | |
| &__right{ background-image: linear-gradient(to bottom, $black-3, darken($black-3, 20) ); } | |
| &__left{ background-image: linear-gradient(to bottom, $black-2, darken($black-2, 5) ); } | |
| &__top{ | |
| background-image: linear-gradient(to right, $black-1, darken($black-2, 2) ); | |
| border-bottom: .1vw solid rgba($white-2, .5); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba($neon-2, .75), transparent); | |
| } | |
| } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .sillon-r{ top: 0; } | |
| .sillon-t{ | |
| $width-el: 1vw; | |
| $height-el: 6.5vw; | |
| $depth-el: 7vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| right: 0; | |
| top: 1vw; | |
| width: 1vw; | |
| height: 1vw; | |
| transform-origin: right; | |
| transform: rotateY(7deg); | |
| &__front{ background-image: linear-gradient(to bottom, $black-3, darken($black-2, 8)) ;} | |
| &__back{ background-image: linear-gradient(to bottom, darken($black-2, 5), $black-3) ;} | |
| &__right{ background-image: linear-gradient(to bottom, darken($black-2, 5), darken($black-3, 20) ); } | |
| &__left{ background-color: $black-2; } | |
| &__top{ | |
| background-image: linear-gradient(to right, $black-1, darken($black-2, 2) ); | |
| border-bottom: .1vw solid rgba($white-2, .5); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(to right, rgba($neon-2, .5), transparent); | |
| } | |
| } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .mesa-c{ | |
| position: absolute; | |
| left: 7vw; | |
| top: 9.5vw; | |
| width: 10vw; | |
| height: 9vw; | |
| transform: translateZ(.5vw); | |
| } | |
| .mesa-shadow{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 10%; | |
| background-color: rgba($black-3, .95); | |
| filter: blur(1vw); | |
| transform: translateZ(0); | |
| } | |
| .mesa{ | |
| $width-el: 10vw; | |
| $height-el: .5vw; | |
| $depth-el: 4.5vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 10vw; | |
| height: 9vw; | |
| transform: translateZ(2vw); | |
| &__front{ | |
| background-image: linear-gradient(to right, darken($black-2, 5), darken($black-2, 20)); | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(45deg, rgba($neon-1, .125), rgba( lighten($neon-1, 20), .25), transparent 55%); | |
| } | |
| } | |
| &__back{ background-color: $black-3; } | |
| &__right{ background-color: darken($black-3, 20); } | |
| &__left{ background-color: $black-2; } | |
| &__top{ | |
| background-image: linear-gradient(45deg, darken($black-2, 3), darken($black-3, 5)); | |
| overflow: hidden; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| width: 50%; | |
| height: 50%; | |
| background-image: linear-gradient(45deg, rgba($neon-1, .5), rgba($white-1, .125) 50%, transparent 55%); | |
| filter: blur(.5vw); | |
| } | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| left: 2vw; | |
| top: 2vw; | |
| width: 20%; | |
| height: 50%; | |
| border-radius: 50%; | |
| background-color: rgba($neon-2, .079); | |
| transform: rotateZ(-40deg); | |
| filter: blur(.75vw); | |
| } | |
| } | |
| &__bottom{ background-color: $black-3; } | |
| } | |
| .mesa-p{ | |
| $width-el: .25vw; | |
| $height-el: 1.75vw; | |
| $depth-el: .125vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| width: .25vw; | |
| height: .25vw; | |
| &__front{ background-color: $black-3; } | |
| &__back{ background-color: $black-3; } | |
| &__right{ background-color: darken($black-3, 20); } | |
| &__left{ background-color: $black-2; } | |
| &__top{ background-color: $black-1; } | |
| &__bottom{ | |
| background-color: $black-3; | |
| &::before{ | |
| content: ''; | |
| position: absolute; | |
| width: 600%; | |
| height: 200%; | |
| top: 0; | |
| right: 0; | |
| border-radius: 10%; | |
| transform: translateZ(-.1vw); | |
| background-color: rgba(darken($black-3, 30), .75); | |
| filter: blur(.35vw); | |
| } | |
| } | |
| &:nth-of-type(1){ left: .5vw; top: .5vw; } | |
| &:nth-of-type(2){ right: .5vw; top: .5vw; } | |
| &:nth-of-type(3){ left: .5vw; bottom: .5vw; } | |
| &:nth-of-type(4){ right: .5vw; bottom: .5vw; } | |
| } | |
| .tablet{ | |
| $width-el: 2vw; | |
| $height-el: .125vw; | |
| $depth-el: 1.25vw; | |
| @include cube($width-el, $height-el, $depth-el); | |
| position: absolute; | |
| left: 13vw; | |
| top: 12vw; | |
| width: 2vw; | |
| height: 2.5vw; | |
| transform: translateZ(3.01vw) rotateZ(15deg); | |
| &__front{ background-color: darken($white-2, 10); } | |
| &__back{ background-color: $white-3; } | |
| &__right{ background-color: $white-3; } | |
| &__left{ background-color: $white-2; } | |
| &__top{ | |
| background-color: lighten($neon-1, 10); | |
| border: .2vw solid rgba($neon-1, .25); | |
| animation: pantalla-tablet .25s infinite; | |
| } | |
| &__bottom{ | |
| background-color: darken($black-3, 40); | |
| box-shadow: | |
| .25vw .25vw .5vw rgba(darken($neon-2, 20), .75), | |
| -.25vw .25vw .5vw rgba(darken($neon-2, 20), .75), | |
| -.25vw -.25vw .5vw rgba(darken($neon-2, 20), .75), | |
| .25vw -.25vw .5vw rgba(darken($neon-2, 20), .75) | |
| ; | |
| } | |
| } | |
| /**********************/ | |
| /**********************/ | |
| @keyframes pantalla-tablet { | |
| from{ background-color: lighten($neon-1, 5); } | |
| } | |
| @keyframes pantalla-tv{ | |
| from{ | |
| background-color: lighten($neon-1, 5); | |
| box-shadow: | |
| .125vw .125vw 0vw rgba($neon-1, 0), | |
| -.125vw .125vw 0vw rgba($neon-1, 0), | |
| .125vw -.125vw 0vw rgba($neon-1, 0), | |
| -.125vw -.125vw 0vw rgba($neon-1, 0) | |
| ; | |
| } | |
| } | |
| @keyframes luz-tv{ | |
| from{ | |
| background-image: radial-gradient(rgba(darken($neon-2, 5), .8), rgba(darken($neon-1, 5), .8)); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment