Skip to content

Instantly share code, notes, and snippets.

@Potherca
Last active Nov 25, 2021
Embed
What would you like to do?
<meta charset="UTF-8">
<meta property="og:image" content="https://user-images.githubusercontent.com/195757/143425843-2cd178e6-7190-4555-90a3-33977aeb86d1.png"/>
<meta property="og:title" content="Hoor wie klikt daar kinderen?"/>
<meta property="og:description" content="Een fijne Sinterklaas gewenst, iedereen!"/>
<title>Hoor wie klikt daar kinderen?</title>
<body>
<div class="door">
<div class="door-front">
<div class="knob"></div>
</div>
</div>
<style>
body {
background: black;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.door {
position: relative;
width: 170px;
height:270px;
cursor: pointer;
transform-style: preserve-3d;
transform: perspective(2500px);
}
.door-front {
width: 170px;
height:270px;
overflow: hidden;
transform-origin: left;
box-shadow: 30px 0 50px rgba(0,0,0,0.2);
position: absolute;
background-color: #924500;
z-index:1;
transition: .5s;
}
.door-front:before, .door-front:after {
content:"";
position: absolute;
background-color: #924500;
width: 105px;
height: 75px;
border: 10px ridge #b05500;
left:22.5px;
}
.door-front:before {
top:25px;
}
.door-front:after {
top:155px;
}
.knob {
position: absolute;
width: 20px;
height:30px;
background-color: #eeba0b;
top:122px;
left:145px;
border-radius:2px;
}
.knob:before {
content:"";
position: absolute;
border-radius:50%;
background-color: #f1c83c;
width:18px;
height:18px;
left:-1px;
box-shadow: 2px 2px rgba(0,0,0,0.2);
}
.knob:after {
content:"";
position: absolute;
width:4px;
height:7px;
background-color: #333;
top:20px;
left:8.5px;
}
script {
display: block;
padding: 1em;
margin: 1em;
font-family: monospace;
background: red;
color: yellow;
border-radius: 0.3em;
border: 1px solid;
}
footer {
position: absolute;
bottom: 1em;
color: white;
font-size: 0.5em;
}
footer a {
color: inherit;
}
</style>
<script>
document.querySelector('.door').addEventListener('click', _ => alert('Wie klikt daar?'))
</script>
<footer>
Door design by the awesome <strong>Lena Stanley</strong>, read <a href="https://lenadesign.org/2021/04/26/css-door-animation-open-close-on-hover/">her blog post</a> for details!
</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment