<div class="scene">
<div class="window">
<div class="frame frame--top">
<div class="cuboid window-frame window-frame--top">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="frame frame--right">
<div class="cuboid window-frame window-frame--right">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="frame frame--left">
<div class="cuboid window-frame window-frame--left">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="frame frame--sill"></div>
<div class="container">
<div class="peter__container"><svg class="peter" viewBox="0 0 228 237" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- <circle class="peter__backdrop" cx="114" cy="123" r="110" fill="#C4C4C4"/> -->
<mask id="a" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="13" width="220" height="220">
<circle cx="114" cy="123" r="110" fill="#C4C4C4"/>
</mask>
<g mask="url(#a)">
<rect width="201" height="226" transform="matrix(-1 0 0 1 210 37)" fill="url(#b)"/>
<rect x="171" y="169.378" width="18" height="18" transform="rotate(-17.384 171 169.378)" fill="url(#c)" style="mix-blend-mode:soft-light"/>
</g>
<g class="peter__shades" transform="rotate(6.523 33.947 63)">
<rect clip-path="url(#shadeClip)" x="33.947" y="63" width="181" height="25" fill="url(#d)"/>
</g>
<defs>
<clipPath id="shadeClip">
<rect x="33.947" y="63" width="181" height="24" fill="url(#d)"/>
</clipPath>
<pattern id="d" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#g" transform="scale(.00286 .02)"/>
</pattern>
<pattern id="b" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#e" transform="scale(.0008)"/>
</pattern>
<image id="g" width="350" height="50" xlink:href="https://assets.codepen.io/605876/thug-shades.png?format=auto"/>
<image id="e" width="1243" height="1396" xlink:href="https://assets.codepen.io/605876/peter-griffin-head-optimized.png?format=auto&quality=2"/>
</defs>
</svg>
</div>
<div class="glass"></div>
<div class="blinds">
<div class="blind" style="--index: 0;"></div>
<div class="blind" style="--index: 1;"></div>
<div class="blind" style="--index: 2;"></div>
<div class="blind" style="--index: 3;"></div>
<div class="blind" style="--index: 4;"></div>
<div class="blind" style="--index: 5;"></div>
<div class="blind" style="--index: 6;"></div>
<div class="blind" style="--index: 7;"></div>
<div class="blind" style="--index: 8;"></div>
<div class="blind" style="--index: 9;"></div>
<div class="blind" style="--index: 10;"></div>
<div class="blind" style="--index: 11;"></div>
<div class="blind" style="--index: 12;"></div>
<div class="blind" style="--index: 13;"></div>
<div class="blind" style="--index: 14;"></div>
<div class="blind" style="--index: 15;"></div>
<div class="blind" style="--index: 16;"></div>
<div class="blind" style="--index: 17;"></div>
<div class="blind" style="--index: 18;"></div>
<div class="blind" style="--index: 19;"></div>
<div class="blind" style="--index: 20;"></div>
<div class="blind" style="--index: 21;"></div>
<div class="blind" style="--index: 22;"></div>
<div class="blind" style="--index: 23;"></div>
<div class="blind" style="--index: 24;"></div>
<div class="blind" style="--index: 25;"></div>
<div class="blind" style="--index: 26;"></div>
<div class="blind" style="--index: 27;"></div>
<div class="blind" style="--index: 28;"></div>
<div class="blind" style="--index: 29;"></div>
<div class="blind" style="--index: 30;"></div>
<div class="blind" style="--index: 31;"></div>
<div class="blind" style="--index: 32;"></div>
<div class="blind" style="--index: 33;"></div>
<div class="blind" style="--index: 34;"></div>
<div class="blind" style="--index: 35;"></div>
<div class="blind" style="--index: 36;"></div>
<div class="blind" style="--index: 37;"></div>
<div class="blind" style="--index: 38;"></div>
<div class="blind" style="--index: 39;"></div>
</div>
<div class="cord">
<div class="cord__handle"></div>
</div>
<div class="cord cord--dummy">
<div class="cord__handle"></div>
</div>
</div>
</div>
<div class="wall wall--top"></div>
<div class="wall wall--bottom"></div>
<div class="wall wall--right"></div>
<div class="wall wall--left"></div>
</div>@layer demo-stuff, container-stuff;
@layer container-stuff {
.container {
container-type: size;
}
@container (min-height: 75px) {
.blinds {
--open: 0;
}
}
@container (min-height: 100px) {
.peter {
--peter: 0;
}
}
@container (min-height: 80.5px) {
.blinds {
--open: 0.1;
}
}
@container (min-height: 103px) {
.peter {
--peter: 0.1;
}
}
@container (min-height: 86px) {
.blinds {
--open: 0.2;
}
}
@container (min-height: 106px) {
.peter {
--peter: 0.2;
}
}
@container (min-height: 91.5px) {
.blinds {
--open: 0.3;
}
}
@container (min-height: 109px) {
.peter {
--peter: 0.3;
}
}
@container (min-height: 97px) {
.blinds {
--open: 0.4;
}
}
@container (min-height: 112px) {
.peter {
--peter: 0.4;
}
}
@container (min-height: 102.5px) {
.blinds {
--open: 0.5;
}
}
@container (min-height: 115px) {
.peter {
--peter: 0.5;
}
}
@container (min-height: 108px) {
.blinds {
--open: 0.6;
}
}
@container (min-height: 118px) {
.peter {
--peter: 0.6;
}
}
@container (min-height: 113.5px) {
.blinds {
--open: 0.7;
}
}
@container (min-height: 121px) {
.peter {
--peter: 0.7;
}
}
@container (min-height: 119px) {
.blinds {
--open: 0.8;
}
}
@container (min-height: 124px) {
.peter {
--peter: 0.8;
}
}
@container (min-height: 124.5px) {
.blinds {
--open: 0.9;
}
}
@container (min-height: 127px) {
.peter {
--peter: 0.9;
}
}
@container (min-height: 130px) {
.blinds {
--open: 1;
}
}
@container (min-height: 130px) {
.peter {
--peter: 1;
}
}
}
@layer demo-stuff {
* {
box-sizing: border-box;
transform-style: preserve-3d;
}
:root {
--height: 300px;
--width: calc(0.6 * var(--height));
--glass: rgba(207, 229, 252, 0.5);
--shimmer: rgba(255, 255, 255, 0.95);
--w-1: #546043;
--w-2: #373c2f;
--f-1: #251b0e;
--f-2: #372915;
--f-3: #5c4424;
--f-4: #6e522b;
--i-1: #574638;
--b-1: #b5bea7;
--b-4: #bfc7b3;
--b-2: #6a7557;
--b-3: #353b2b;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
justify-content: center;
overflow: hidden;
background: rgba(255, 230, 153, 0.5);
}
.cuboid {
width: 100%;
height: 100%;
position: relative;
pointer-events: none;
}
.cuboid__side {
pointer-events: none;
}
.cuboid__side:nth-of-type(1) {
height: calc(var(--thickness) * 1px);
width: 100%;
position: absolute;
top: 0;
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
height: 100%;
width: calc(var(--thickness) * 1px);
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
width: 100%;
height: calc(var(--thickness) * 1px);
position: absolute;
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
height: 100%;
width: calc(var(--thickness) * 1px);
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * 0.5px));
position: absolute;
top: 0;
left: 0;
}
.cuboid__side:nth-of-type(6) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * -0.5px))
rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
.scene {
transform: rotateX(-24deg) rotateY(24deg);
}
.window {
height: var(--height);
width: var(--width);
position: relative;
}
.glass {
height: calc(var(--height) * 0.25);
width: 25%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(var(--i-1), var(--i-1)) 0 0/100% 5% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 0 0/5% 100% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 100% 0/5% 100% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 0 100%/100% 5% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 0 64%/100% 8% no-repeat,
linear-gradient(
130deg,
transparent 0 15%,
var(--shimmer) 16% 35%,
transparent 36% 40%,
var(--shimmer) 41% 44%,
transparent 45%
),
var(--glass);
}
.frame {
position: absolute;
}
.frame--top {
width: 130%;
height: 5%;
bottom: 100%;
left: 50%;
transform: translate(-50%, 0);
}
.frame--sill {
width: 120%;
height: 5%;
top: 100%;
left: 50%;
background: var(--f-4);
transform: translate3d(-50%, 0, 12px);
}
.frame--left {
width: 10%;
height: 100%;
right: 100%;
top: 0;
}
.frame--right {
width: 10%;
height: 100%;
left: 100%;
top: 0;
}
.peter {
position: absolute;
top: calc(var(--height) * 0.25);
height: 35px;
right: 0%;
transform: translate(-10%, calc((-80 * var(--peter, 0)) * 1%));
}
.peter__container {
height: calc(var(--height) * 0.25);
width: 25%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}
.wall {
position: absolute;
height: 200vmax;
width: 200vmax;
background: linear-gradient(
var(--w-1) 52%,
var(--f-1) 52% 53%,
var(--w-2) 53% 100%
),
var(--w-1);
}
.wall--top {
bottom: calc(50% + (var(--height) * 0.5));
left: 50%;
transform: translate3d(-50%, 0, 10px);
background: var(--w-1);
}
.wall--bottom {
top: calc(50% + (var(--height) * 0.5));
left: 50%;
transform: translate3d(-50%, 0, 10px);
background: var(--w-2);
}
.wall--left {
right: calc(50% + (var(--width) * 0.5));
top: 50%;
transform: translate3d(0, -50%, 10px);
}
.wall--right {
left: calc(50% + (var(--width) * 0.5));
top: 50%;
transform: translate3d(0, -50%, 10px);
}
.blinds {
width: 25%;
height: calc(var(--height) * 0.25);
position: absolute;
top: 0;
right: 0;
}
.container {
min-height: 25%;
height: 25%;
width: 100%;
max-height: 130px;
transform: translate3d(0, 0, 12px) scale(4);
position: relative;
overflow: hidden;
resize: vertical;
transform-origin: 100% 0;
clip-path: inset(0 0 0 50%);
-webkit-clip-path: inset(0 0 0 50%);
}
.container:hover:after {
opacity: 0.35;
}
.container:active:after {
opacity: 0;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 16px;
width: 16px;
background: #19a1e6;
opacity: 0;
transition: opacity 0.2s;
}
.blind {
width: 100%;
height: 2.5%;
background: linear-gradient(
var(--b-3) 0 10%,
var(--b-1) 10% 90%,
var(--b-3) 90% 100%
);
transform: translate(
0,
calc(((-95 * (var(--index, 0))) * var(--open)) * 1%)
);
}
.cord {
position: absolute;
top: 0;
right: 4px;
width: calc(var(--width) * 0.005);
transform: translate(50%, 0);
background: #fafafa;
height: 100%;
}
.cord--dummy {
background: #dbdbdb;
right: 3px;
height: calc(var(--height) * 0.21);
}
.cord__handle {
position: absolute;
bottom: 0;
left: 50%;
transform-origin: 50% 100%;
transform: translate(-54%, 0%) scale(0.65);
height: 10px;
width: 6px;
clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
-webkit-clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
pointer-events: none;
background: var(--b-3);
}
.cord__handle:after {
clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
-webkit-clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--b-2);
transform: scale(0.75);
}
::-webkit-resizer {
display: block;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
height: 44px !important;
width: 44px !important;
}
.window-frame div {
background: var(--f-1);
}
.window-frame div:nth-of-type(1) {
background: var(--f-1);
}
.window-frame div:nth-of-type(2) {
background: var(--f-2);
}
.window-frame div:nth-of-type(3) {
background: var(--f-3);
}
.window-frame div:nth-of-type(4) {
background: var(--f-2);
}
.window-frame div:nth-of-type(5) {
background: var(--f-3);
}
.window-frame div:nth-of-type(6) {
background: var(--f-1);
}
.window-frame--top {
--thickness: 50;
}
.window-frame--right {
--thickness: 40;
}
.window-frame--left {
--thickness: 40;
}
.window-frame--bottom {
--thickness: 40;
}
.window-frame--sill {
--thickness: 60;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.