GLaDOS картофелина на чистом CSS (HTML код)
<div class="container">
<div class="glados-potato-container">
<div class="right nail"></div>
<div class="bottom nail"></div>
<div class="right claw"></div>
<div class="left claw"></div>
<div class="right clamp-container">
<div class="cable"></div>
<div class="end">
<div class="yellow filter"></div>
<div class="protector"></div>
<div class="clamp"></div>
</div>
</div>
<div class="top cable-container">
<div class="cable"></div>
<div class="black filter"></div>
</div>
<div class="left cable-container">
<div class="cable"></div>
<div class="black filter"></div>
</div>
<div class="bottom clamp-container">
<div class="cable"></div>
<div class="end">
<div class="blue filter"></div>
<div class="protector"></div>
<div class="clamp"></div>
</div>
</div>
<div class="lens">
<div class="top hooks">
<div class="hook"></div>
<div class="hook"></div>
</div>
<div class="circle">
<div class="eye"></div>
</div>
<div class="hole"></div>
<div class="bottom hooks">
<div class="hook"></div>
<div class="hook"></div>
<div class="hook"></div>
<div class="hook"></div>
</div>
</div>
<div class="cpu-container">
<div class="connector"></div>
<div class="cpu">
<div class="circle"></div>
<div class="mini hooks">
<div class="hook"></div>
<div class="hook"></div>
</div>
</div>
</div>
<div class="glados-potato">
<div class="glados-potato-head">
<div class="buses">
<div class="bus bus-1"></div>
<div class="bus bus-2"></div>
<div class="bus bus-3"></div>
</div>
<div class="lens-shadow">
<div class="top hooks">
<div class="hook"></div>
<div class="hook"></div>
</div>
<div class="bottom hooks">
<div class="hook"></div>
<div class="hook"></div>
<div class="hook"></div>
<div class="hook"></div>
</div>
</div>
</div>
<div class="glados-potato-body">
<div class="root root-1"></div>
<div class="root root-2"></div>
<div class="body-shadow">
<div class="root root-3"></div>
<div class="root root-4 inverted"></div>
<div class="root root-5 inverted"></div>
</div>
</div>
</div>
</div>
</div>
<div class="created">
<span>Created by</span>
<a href="https://manz.dev/"><h2>Manz.dev</h2></a>
<p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtube.com/c/ManzDev">Youtube</a></p>
</div>
GLaDOS картофелина на чистом CSS (CSS код)
:root {
--glados-background-color: #f47e00;
--glados-shadow-color: #9f5200;
--glados-potato-shape: polygon(0 18%, 35% 0, 65% 0, 100% 18%, 100% 50%, 90% 57%, 90% 86%, 65% 100%, 35% 100%, 10% 86%, 10% 57%, 0 50%);
--dark-color: #202127;
--lens-background-color: #ebebeb;
--lens-shadow-color: #9a9899;
--lens-size: 165px;
}
body {
background: #4855a0;
}
.container {
display: flex;
justify-content: center;
margin-top: 1em;
}
.glados-potato-container {
--width: 330px;
--height: 460px;
width: var(--width);
height: var(--height);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.glados-potato-container .glados-potato {
--glados-width: 240px;
--glados-height: 360px;
width: var(--glados-width);
height: var(--glados-height);
-webkit-clip-path: var(--glados-potato-shape);
clip-path: var(--glados-potato-shape);
background-color: var(--glados-background-color);
background-image:
linear-gradient(to right, var(--glados-background-color) 34%, transparent 34%),
linear-gradient(135deg, transparent 0 62%, var(--glados-shadow-color) 60%),
linear-gradient(to right, var(--glados-background-color) 0 63%, var(--glados-shadow-color) 40%);
}
.glados-potato-container .glados-potato .glados-potato-head {
height: 57%;
position: relative;
}
.glados-potato-container .glados-potato .glados-potato-head .buses {
width: 100%;
height: 50px;
position: absolute;
transform: translateY(64px);
z-index: 4;
}
.glados-potato-container .glados-potato .glados-potato-head .buses .bus {
--bus-color: #d1d013;
--bus-shadow-color: #9f9522;
width: 100%;
height: 10px;
background-image: linear-gradient(to right, var(--bus-color) 50%, var(--bus-shadow-color) 50%);
margin-bottom: 10px;
}
.glados-potato-container .glados-potato .glados-potato-head .lens-shadow {
width: var(--lens-size);
height: var(--lens-size);
border-radius: 50%;
background: var(--glados-shadow-color);
transform: translate(22px, 55px);
position: absolute;
}
/* Apply cascade */
.glados-potato-container .glados-potato .glados-potato-head .lens-shadow .hooks.top { transform: translate(-6px, -20px); }
.glados-potato-container .glados-potato .glados-potato-head .lens-shadow .hooks.bottom { transform: translate(-6px, 4px); }
.glados-potato-container .glados-potato .glados-potato-head .lens-shadow .hooks .hook { background: var(--glados-shadow-color); }
.glados-potato-container .glados-potato .glados-potato-body {
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
}
.glados-potato-container .glados-potato .glados-potato-body .root {
--scale: scaleX(1);
width: 8px;
height: 20px;
background: var(--dark-color);
transform: translate(30px);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 35%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 35%);
}
.glados-potato-container .glados-potato .glados-potato-body .root.root-1 { transform: translate(40px, -10px) var(--scale); }
.glados-potato-container .glados-potato .glados-potato-body .root.root-2 { transform: translate(-55px, 10px) var(--scale); }
.glados-potato-container .glados-potato .glados-potato-body .root.inverted {
--scale: scaleX(-1);
}
.glados-potato-container .glados-potato .glados-potato-body .body-shadow .root-3 { transform: translate(-124px, 50px) var(--scale); }
.glados-potato-container .glados-potato .glados-potato-body .body-shadow .root-4 { transform: translate(-90px, 8px) var(--scale); }
.glados-potato-container .glados-potato .glados-potato-body .body-shadow .root-5 { transform: translate(-50px, -20px) var(--scale); }
.glados-potato-container .nail {
width: 6px;
height: 78px;
position: absolute;
background: var(--dark-color);
bottom: 0;
}
.glados-potato-container .nail::before,
.glados-potato-container .nail::after {
content: "";
display: block;
width: 8px;
height: 3px;
position: absolute;
bottom: 0;
background: var(--dark-color);
}
.glados-potato-container .nail::before {
left: 0;
}
.glados-potato-container .nail::after {
right: 0;
}
.glados-potato-container .nail.right {
transform: translate(115px, -155px) rotate(-90deg);
}
.glados-potato-container .claw {
width: 50px;
height: 8px;
border: 3px solid var(--dark-color);
position: absolute;
}
.glados-potato-container .claw.left {
left: 0;
transform: translate(20px, 115px);
}
.glados-potato-container .claw.right {
right: 0;
transform: translate(-18px, -128px);
}
.cable-container {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
}
.cable-container.top {
position: absolute;
justify-content: center;
align-items: flex-start;
}
.cable-container.top .cable {
background: var(--dark-color);
width: 295px;
height: 8px;
transform: translate(1px, 121px) rotate(-20deg) skew(-22deg);
z-index: 2;
}
.cable-container.top .filter {
background: var(--dark-color);
width: 14px;
height: 22px;
position: absolute;
transform: translate(72px, 88px) rotate(70deg);
z-index: 2;
}
.cable-container.left {
position: absolute;
}
.cable-container.left .cable {
background: var(--dark-color);
width: 8px;
transform: translate(26px, -21px);
height: 267px;
}
.cable-container.left .filter {
background: var(--dark-color);
width: 14px;
height: 22px;
transform: translate(15px, -50px);
}
.clamp-container {
width: 375px;
height: 20px;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
.clamp-container.bottom {
transform: translate(50px, -15px);
}
.clamp-container.right {
transform: translate(136px, -190px) rotate(90deg);
z-index: 2;
}
.clamp-container.right .cable {
width: 108px;
}
.clamp-container.right .protector {
transform: scaleY(-1);
}
.clamp-container .cable {
background: var(--dark-color);
width: 50px;
height: 40%;
}
.clamp-container .end {
width: 140px;
height: 100%;
display: flex;
}
.clamp-container .end .filter {
background:
linear-gradient(to bottom, transparent 50%, #0006 50%),
linear-gradient(to right, var(--filter-color) 60%, #42413f 80%);
width: 30px;
height: 100%;
}
.clamp-container .end .filter.blue { --filter-color: #639dcf; }
.clamp-container .end .filter.black { --filter-color: #4a4645; }
.clamp-container .end .filter.yellow { --filter-color: #856502; }
.clamp-container .end .protector {
background: linear-gradient(to bottom, brown 50%, #681919 50%);
-webkit-clip-path: polygon(0 25%, 25% 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
clip-path: polygon(0 25%, 25% 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
width: 40px;
height: 100%;
}
.clamp-container .end .clamp {
width: 30px;
height: 100%;
background:
linear-gradient(40deg, #aaa 0 25%, transparent 0 25%),
linear-gradient(to bottom, #fff 50%, #aaa 50%);
-webkit-clip-path: polygon(0 15%, 20% 25%, 100% 25%, 100% 75%, 20% 75%, 0% 85%);
clip-path: polygon(0 15%, 20% 25%, 100% 25%, 100% 75%, 20% 75%, 0% 85%);
}
.hooks {
height: 25px;
display: flex;
}
.hooks.top,
.hooks.bottom {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
}
.hooks.top {
top: 0;
transform: translateY(-12px);
}
.hooks.bottom {
bottom: 0;
transform: translateY(12px);
}
.hooks .hook {
width: 8px;
height: 100%;
margin: 0 4px;
background: var(--dark-color);
}
.lens {
width: var(--lens-size);
height: var(--lens-size);
background-image: linear-gradient(to right, var(--lens-background-color) 50%, var(--lens-shadow-color) 50%);
border-radius: 50%;
position: absolute;
transform: translate(-25px, -55px);
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
.lens::before,
.lens::after {
content: "";
display: block;
width: 45px;
height: 5px;
background: var(--dark-color);
position: absolute;
}
.lens::before { left: 0; }
.lens::after { right: 0; }
.lens .circle {
width: 45%;
height: 45%;
border: 10px solid var(--dark-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.lens .circle .eye {
--eye-default-shadow: 4px 4px 4px #0004 inset;
--time: 0.1s;
width: 36px;
height: 36px;
background: var(--eye-background-color, var(--glados-shadow-color));
border-radius: 50%;
box-shadow: var(--eye-default-shadow);
display: flex;
justify-content: center;
align-items: center;
transition: box-shadow var(--time), background var(--time);
will-change: box-shadow, background;
}
.lens .circle .eye::before,
.lens .circle .eye::after {
content: "";
display: block;
background: #fff;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.lens .circle .eye::after {
width: 8px;
height: 8px;
transform: translate(-5px, -5px);
}
.lens .hole {
position: absolute;
width: 12px;
height: 12px;
background: var(--glados-background-color);
border-radius: 50%;
left: 14px;
transform: translateY(15px);
box-shadow: 2px 2px 0 var(--glados-shadow-color) inset;
}
.cpu-container {
width: 75px;
height: 40px;
position: absolute;
right: 0;
transform: translate(-45px, -25px);
z-index: 5;
display: flex;
justify-content: flex-end;
}
.cpu-container .connector {
width: 12px;
height: 6px;
background: #333;
border: 6px solid var(--dark-color);
border-left: 0;
border-right: 0;
}
.cpu-container .cpu {
width: 65px;
height: 100%;
background: linear-gradient(#fff 50%, var(--lens-shadow-color) 50%);
display: flex;
justify-content: center;
}
.cpu-container .cpu .circle {
width: 8px;
height: 8px;
border-radius: 50%;
border: 3px solid #6a5f55;
transform: translate(16px, 5px);
background: red;
box-shadow:
0 0 6px 1px darkred,
2px 2px 0 #0002 inset;
}
.cpu-container .cpu .mini.hooks {
height: 8px;
position: absolute;
bottom: -4px;
}
.glados-potato-container.talking {
--eye-background-color: #fde200;
}
.glados-potato-container.talking .eye {
box-shadow:
var(--eye-default-shadow),
0 0 5px 4px #fde200;
}
.created {
background:
url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
linear-gradient(to bottom, #884ced, #ec1cce);
background-size: 75px 75px, cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 75px;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 2em;
}
.created span,
.created h2,
.created p,
.created a {
font-family: Montserrat;
margin: 0;
}
.created a,
.created p,
.created span {
color: #fff;
}
.created h2 {
font-weight: 700;
transform: translate(0, -4px);
}
.created a {
-webkit-text-decoration-color: rgba(255,255,255,0.4);
text-decoration-color: rgba(255,255,255,0.4);
}
.created a:hover {
color: #e6e82a;
}
GLaDOS картофелина на чистом CSS (JS код)
const esSounds = ["gallina.mp3", "molestarme.mp3", "humillaros.mp3", "brazo.mp3", "blah.mp3", "no-cansar.mp3", "no-gracia.mp3"];
const enSounds = ["arm.mp3", "blah-en.mp3", "catch.mp3", "flailing.mp3", "fun.mp3", "funny.mp3", "tired.mp3"];
const potatoGlados = document.querySelector(".glados-potato-container");
const langSounds = navigator.language.indexOf("es") === 0 ? esSounds : enSounds;
const sounds = langSounds.map(name => new Audio(name));
let currentSound = -1;
const startTalk = () => {
currentSound = ~~(Math.random() * sounds.length);
sounds[currentSound].play();
shineEye();
};
const shineEye = () => {
potatoGlados.classList.toggle("talking");
const isPlaying = !sounds[currentSound].paused;
if (isPlaying) {
const time = ~~(Math.random() * 250);
setTimeout(() => shineEye(), time);
} else {
stopTalk();
}
};
const stopTalk = () => {
potatoGlados.classList.remove("talking");
currentSound = -1;
};
potatoGlados.addEventListener("click", () => {
if (currentSound === -1) startTalk();
});
//# sourceURL=pen.js
GLaDOS картофелина на чистом CSS (Результат кода)
Comments