HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<input aria-hidden="true" type="checkbox" id="showAnimations" />
<label role="button" for="showAnimations">animations</label>
<div class="back-wall">
<div class="window"><div class="cloud"></div></div>
<div class="window"><div class="cloud"></div></div>
<div class="window"><div class="cloud"></div></div>
<div class="flag"></div>
<div class="flag"></div>
</div>
<div class="mouse">
<div class="mousebody"></div>
<div class="mousefeet"></div>
<div class="mousetail"></div>
</div>
<div id="canvas">
<div class="chair">
<div class="back"></div>
<div class="column"></div>
<div class="column"></div>
<div class="armrest"></div>
<div class="bottom"></div>
</div>
<div class="king">
<div class="bar"></div>
<div class="arm"></div>
<div class="arm2"></div>
<div class="arm3"></div>
<div class="body"></div>
<div class="head">
<div class="hair"></div>
<div class="ears"></div>
<div class="face"></div>
<div class="beard"></div>
<div class="mouth"></div>
<div class="mustache"></div>
<div class="nose"></div>
<div class="eyes"></div>
<div class="eyebrows"></div>
<div class="crown">
<div class="crown-triangle" id="crown-triangle-center"></div>
<div class="crown-triangle" id="crown-triangle-right"></div>
<div class="crown-triangle" id="crown-triangle-left"></div>
<div class="crown-base"></div>
</div>
</div>
<div class="buttons"></div>
<div class="belt"></div>
<div class="skirt"></div>
<div class="legs">
<div class="boots"></div>
</div>
<div class="hand">
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
</div>
<div class="hand">
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
</div>
</div>
<div class="candelabra">
<div class="cord"></div>
<div class="candles">
<div class="candle"></div>
<div class="candle"></div>
<div class="candle"></div>
<div class="candle"></div>
</div>
</div>
<div class="candelabra">
<div class="cord"></div>
<div class="candles">
<div class="candle"></div>
<div class="candle"></div>
<div class="candle"></div>
<div class="candle"></div>
</div>
</div>
</div>
<div class="guard">
<div class="legs">
<div class="boots"></div>
</div>
<div class="tackedshirt"></div>
<div class="belt"></div>
<div class="arm-right"></div>
<div class="arm-left"></div>
<div class="shoulders"></div>
<div class="chest"></div>
<div class="shield"></div>
<div class="sword"></div>
<div class="sword-traverse"></div>
<div class="hand">
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
</div>
<div class="hand">
<div class="handle"></div>
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
<div class="finger"></div>
</div>
<div class="head">
<div class="hair"></div>
<div class="ears"></div>
<div class="face"></div>
<div class="beard"></div>
<div class="mouth"></div>
<div class="mustache"></div>
<div class="nose"></div>
<div class="eyes"></div>
<div class="eyebrows"></div>
</div>
</div>
<div id="fly"></div>
html, body {
background: #ccc;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
div {
position: absolute;
}
input {
position: absolute;
left: -10000vw;
}
input + label::before {
content: "Start ";
}
input:checked + label::before {
content: "Stop ";
}
label {
left: 0.5em;
position: absolute;
background: rgba(0,0,0,0.7);
z-index: 2;
color: white;
font-family: verdana, arial, sans-serif;
font-size: 14px;
padding: 0.5em;
display: inline-block;
border-radius: 0 0 4px 4px;
}
input:not(:checked) ~ div,
input:not(:checked) ~ div *,
input:not(:checked) ~ div *::before,
input:not(:checked) ~ div *::after {
animation-name: none !important;
transition: none !important;
}
.back-wall {
position: absolute;
width: 100%;
height: 100%;
background: #e9dcca;
background-image: linear-gradient(to left, darkgray 1%, transparent 0, transparent 100%), linear-gradient(to bottom, darkgray 1%, transparent 0, transparent 99%, darkgray 0);
background-size: 12vmin 6vmin;
background-position: bottom center;
filter: blur(3px);
box-shadow: inset 0 30vmin 50vmin rgba(0,0,0,0.4);
}
.back-wall div {
position: absolute;
perspective: 100px;
}
.flag {
top: 0;
bottom: 35vmin;
left: 50%;
aheight: 60vmin;
width: 20vmin;
background: #c00;
background: linear-gradient(to bottom, #990022, #dd2244);
transform: translate(150%, 0) rotateX(0deg);
transform-origin: top center;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 95%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 95%, 0% 100%);
}
.flag::before {
content: "G";
color: #ee9900;
font-size: 7vmin;
display: block;
align-items: center;
text-align: center;
width: 10vmin;
height: 10vmin;
line-height: 10vmin;
border-radius: 50%;
border: 1vmin solid #ee9900;
text-align: center;
font-family: Palatino, Palatyno, serif;
bottom: 20%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.65;
}
.flag + .flag {
background: #00c;
background: linear-gradient(to bottom, #036, #369);
transform: translate(-250%, 0);
}
.flag + .flag::before {
content: "K";
}
.window {
background: skyblue;
width: 10vmin;
height: 35vmin;
border-radius: 100% 100% 0 0;
box-shadow: 0 3vmin #d9ccba, 0 3.75vmin 1vmin -1vmin, inset 0 0.5vmin 1.5vmin -1vmin;
afilter: blur(2px);
bottom: 45vmin;
left: 50%;
transform: translate(-65vmin, 0);
overflow: hidden;
}
.window + .window {
transform: translate(-50%, 0);
}
.window + .window + .window {
transform: translate(55vmin, 0);
}
@keyframes cloud {
0% { transform: translate(10vmin, 0); }
15%, 100% { transform: translate(-100%, 0); }
}
.window .cloud {
width: 40vmin;
height: 20vmin;
background: white;
transform: translate(100%, 0);
animation: cloud 12.5s linear infinite;
border-radius: 100%;
}
.window .cloud {
animation-delay: 8s;
}
.window + .window .cloud {
animation-delay: 4s;
}
.window + .window + .window .cloud {
animation-delay: 0s;
}
#canvas {
width: 100vmin;
height: 100vmin;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0)
}
.king {
height: 50vmin;
width: 30vmin;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
.king div {
position: absolute;
}
.head {
width: 9vmin;
height: 11vmin;
top: 6vmin;
left: 50%;
transform: translate(-50%, 0);
}
.face {
width: 9vmin;
height: 11vmin;
background: #fcc;
-webkit-clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}
.nose {
width: 25%;
height: 40%;
background: #daa;
background: linear-gradient(to bottom, #daa 40%, #e88);
border-radius: 80% 80% 100% 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.eyebrows, .eyes {
width: 65%;
height: 10%;
background-color: white;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 75%, rgba(239,239,239,0.5)), linear-gradient(to right, #eee 15%, #fff 50%, #eee 85%);
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px 20px 20% 20%;
}
@keyframes blink {
0%, 10%, 100% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%, 0% 0%);
}
5% {
-webkit-clip-path: polygon(0% 180%, 100% 180%, 100% 200%, 0% 200%, 0% 0%);
clip-path: polygon(0% 180%, 100% 180%, 100% 200%, 0% 200%, 0% 0%);
}
}
.eyes {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%, 0% 0%);
background: none;
animation: blink 6s infinite linear;
}
.eyes::before,
.eyes::after {
content: "";
width: 1vmin;
height: 1vmin;
background: rgba(0,0,0,0.8);
display: block;
border-radius: 50%;
position: absolute;
top: 90%;
left: 10%;
z-index: -1;
}
.eyes::after {
left: auto;
right: 10%;
}
@keyframes wiggle {
0%, 2%, 4%, 100% { transform: translate(-50%, -50%) rotate(0); }
1% { transform: translate(-50%, -50%) rotate(5deg); }
3% { transform: translate(-50%, -50%) rotate(-5deg); }
}
.mustache {
width: 90%;
height: 25%;
top: 75%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
animation: wiggle 10s infinite linear;
}
.mustache::before,
.mustache::after {
content: "";
width: 50%;
height: 100%;
background: white;
background: linear-gradient(to bottom, #fff, #eee);
display: inline-block;
border-radius: 100% 50% 50% 25%;
transform: rotate(-10deg);
position: absolute;
left: 1%;
}
.mustache::after {
border-radius: 50% 100% 25% 50%;
transform: rotate(10deg);
left: auto;
right: 1%;
}
.beard {
width: 120%;
height: 70%;
border-radius: 100%;
background: red;
background: linear-gradient(to bottom, white 15%, #e8e8e8 85%);
top: 70%;
left: -10%;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 98%, 60% 90%, 55% 100%, 50% 85%, 45% 98%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 98%, 60% 90%, 55% 100%, 50% 85%, 45% 98%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
}
.mouth {
width: 4vmin;
height: 2vmin;
border-radius: 50%;
top: 75%;
left: 50%;
transform: translate(-50%,-75%);
background: #a00;
background: radial-gradient(at 50% 100%, #d00 25%, #600 25%);
}
.ears {
width: 20%;
height: 30%;
border-radius: 100%;
background: red;
top: 40%;
left: -5%;
background: #daa;
background: linear-gradient(to left, #daa 40%, #ebb);
box-shadow: 8vmin 0 #daa;
}
.crown {
width: 150%;
height: 100%;
top: -85%;
left: -25%;
overflow: hidden;
}
.crown-base {
width: 60%;
background: yellow;
background: linear-gradient(to bottom, gold, yellow);
height: 15%;
bottom: 0;
left: 20%;
border-radius: 5px 5px 15% 15%;
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.2);
}
.crown-triangle {
width: 30%;
height: 60%;
background: gold;
bottom: 0;
}
#crown-triangle-left {
transform: rotate(-25deg);
left: 20%;
border-radius: 100% 1000% 0 0;
background: linear-gradient(to right, yellow, gold 40%);
}
#crown-triangle-right {
transform: rotate(25deg);
right: 20%;
border-radius: 1000% 100% 0 0;
background: linear-gradient(to left, #deb700, gold 40%);
}
#crown-triangle-center {
right: 35%;
bottom: 5%;
border-radius: 1000% 1000% 0 0;
}
#crown-triangle-center::before {
content: "";
display: block;
height: 20%;
width: 33%;
border-radius: 50%;
background: #ee0000;
background: radial-gradient(at 20% 55%, white 10%, transparent 12%), radial-gradient(at 33% 30%, white 10%, #dd2244 25%);
box-shadow: 0 0 0.3vmin rgba(0,0,0,0.2), 4.2vmin 1.4vmin 0 0px #dd2244, -4.2vmin 1.4vmin 0 0px #dd2244;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.hair {
background: white;
background: linear-gradient(to bottom, #fff, #eee);
width: 100%;
height: 60%;
border-radius: 100%;
}
.body {
width: 18vmin;
height: 20vmin;
background: #369;
background: radial-gradient(at 50% 20%, #369 55%, #136);
border-radius: 8vmin 8vmin 50% 50%;
top: 35%;
left: 50%;
transform: translate(-50%, 0);
}
.arm {
width: 30vmin;
height: 7vmin;
border: 5vmin solid #369;
border-radius: 100%;
border-bottom: 5vmin solid transparent;
top: 17vmin;
left: -5vmin;
-webkit-clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
animation: movearm 2s alternate infinite linear;
}
.arm2 {
width: 15vmin;
height: 10vmin;
border: 5vmin solid transparent;
border-radius: 100%;
border-top: 4.5vmin solid #369;
transform: rotate(40deg);
top: 18.5vmin;
left: 9vmin;
}
.arm3 {
height: 4.5vmin;
width: 9vmin;
background: #369;
background: linear-gradient(to right, #369, #258);
top: 24.5vmin;
left: 28vmin;
border-radius: 50vmin;
}
@keyframes movearm {
0% { border-radius: 100% 100% 100% 100%; }
100% { border-radius: 95% 100% 100% 100%; }
}
.arm::before {
content:"";
position: absolute;
display: block;
width: 5vmin;
height: 3vmin;
background: #013;
background: linear-gradient(to bottom, #013, #000);
border-radius: 50%;
top: 75%;
left: -2.5vmin;
transform: rotate(-30deg);
}
.hand {
background: #daa;
width: 5vmin;
height: 3vmin;
border-radius: 40%;
top: 55%;
left: -2vmin;
}
.hand + .hand {
top: 25vmin;
left: 34.5vmin;
transform: rotate(-90deg);
}
.hand + .hand::before {
content:"";
width: 100%;
height: 100%;
border-radius: 100%;
top: -1.5vmin;
background: #daa;
display: block;
position: absolute;
}
.hand + .hand::after {
content:"";
position: absolute;
width: 1.25vmin;
height: 100%;
display: inline-block;
background: #fcc;
background: linear-gradient(80deg, #daa, #fcc);
border-radius: 2vmin;
top: -1.5vmin;
right: -1vmin;
transform: rotate(-10deg);
}
.hand + .hand .finger {
animation: none !important;
}
@keyframes finger {
0%, 20%, 100% { transform: scale(1); }
10% { transform: scale(1.2); }
}
.hand .finger {
position: relative;
float: left;
width: 1.25vmin;
height: 100%;
display: inline-block;
background: #fcc;
background: linear-gradient(80deg, #fcc, #daa);
border-radius: 2vmin;
top: 0.2vmin;
animation: finger 7s infinite;
}
.finger:nth-child(2) { animation-delay: 0.5s; }
.finger:nth-child(3) { animation-delay: 1s; }
.finger:nth-child(4) { animation-delay: 1.5s; }
.finger + .finger {
height: 115%;
top: -0.1vmin;
}
.finger:nth-child(3) {
top: -0.3vmin;
height: 125%;
}
.buttons {
width: 1vmin;
height: 1vmin;
background: rgba(0,0,0,0.5);
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
top: 47%;
box-shadow: 0 3vmin rgba(0,0,0,0.5), 0 6vmin rgba(0,0,0,0.5);
}
.belt {
width: 56%;
background: #222;
background: linear-gradient(to left, #000, #222, #000);
height: 5%;
bottom: 32%;
left: 6.5vmin;
border-radius: 0.5vmin;
}
.skirt {
width: 62%;
height: 11%;
border: 1vmin solid #258;
border-radius: 5vmin;
bottom: 23%;
left: 19%;
atransform: translate(-1vmin, 1vmin);
box-sizing: border-box;
background: #222;
background: radial-gradient(#013, #258);
}
.legs {
width: 60%;
height: 33%;
bottom: 0;
left: 20%;
z-index:0;
}
.legs::before,
.legs::after {
content: "";
position: absolute;
display: block;
height: 100%;
width: 35%;
border-radius: 100vmin 100vmin 1000% 1000%;
background: #369;
background: linear-gradient(to bottom, #369, #136);
background: linear-gradient(to bottom, #fff, #ddd);
z-index: -1;
}
.legs::after {
right: 0;
}
.boots {
background: #222;
background: linear-gradient(#222, #111);
width: 37%;
height: 60%;
left: -1%;
bottom: 0;
box-shadow: 11.75vmin 0 #222;
border-radius: 1vmin 1vmin 200% 200%;
}
.boots::before,
.boots::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: -2.5%;
width: 105%;
height: 40%;
background: #333;
background: linear-gradient(#333, #111);
border-bottom: 1vmin solid black;
box-sizing: border-box;
border-radius: 500% 500% 0 0;
}
@keyframes tap {
0%, 10% { border-bottom: 1vmin solid black; }
5% { border-bottom: 1.5vmin solid black; }
}
.boots::after {
left: auto;
right: -12vmin;
border-bottom: 1vmin solid black;
animation: tap 5s alternate infinite linear;
}
.bar {
width: 1.5vmin;
height: 50vmin;
bottom: 0;
right: -8vmin;
background: orange;
background: linear-gradient(to bottom, gold, orange);
box-shadow: inset 0 1vmin 1vmin -0.5vmin rgba(0,0,0,0.25);
transform: rotate(5deg)
}
.bar::before,
.bar::after {
content: "";
display: block;
position: absolute;
border-radius: 50%;
top: -2vmin;
left: 50%;
transform: translate(-50%, -50%);
width: 5vmin;
height: 5vmin;
background: orange;
background: radial-gradient(at 20% 20%, gold, orange);
}
.bar::after {
top: -4.5vmin;
width:2vmin;
height: 2vmin;
box-shadow: 0 0.2vmin 0vmin -0vmin rgba(0,0,0,0.1);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
#fly {
width: 1vmin;
height: 1vmin;
background: black;
border-radius: 100%;
position: absolute;
bottom: 49vmin;
left: 50vw;
offset-path: path('M0,0 C20,-20 50,-50 200,100 250,150 -50,-50 -400,-40 -130,0 -80,80 -50,50 20,-20 50,-50 100,100 -3,15 200,-5 176,151 176,165 187,178 194,178 175,149 205,141 189,110 195,113 202,122 203,126 208,121 205,105 200,97 290,118 259,182 304,193 267,160 346,117 282,79 293,77 301,80 304,82 298,54 248,62 244,62 247,58 259,50 266,50 239,39 185,59 178,93 146,87 117,142 166,172 170,173 178,173 178,173 178,173 178,163 178,163 178,163 177,160 176,151');
animation: move 10s infinite alternate ease-in-out;
}
#fly::before,
#fly::after {
content:"";
display: block;
position: absolute;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
border-radius: 100%;
transform: translate(-100%, 0);
}
#fly::after {
transform: translate(100%, 0);
}
.chair {
height: 75vmin;
width: 36vmin;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
.column {
width: 5vmin;
height: 90%;
bottom: 0;
background: #654321;
background: linear-gradient( #654321, #543210 70%, #654321 0, #543210);
box-shadow: 2.5vmin 5vmin 1vmin -2vmin rgba(0,0,0,0.35);
}
.column::before {
content: "";
display: block;
position: absolute;
top: -4vmin;
left: -1.5vmin;
width: 8vmin;
height: 8vmin;
border-radius: 50%;
background: #654321;
background: radial-gradient(at 25% 25%, #654321, #543210);
}
.column + .column {
left: 31vmin;
box-shadow: -2.5vmin 5vmin 1vmin -2vmin rgba(0,0,0,0.25);
}
.armrest {
width: 7vmin;
height: 2.5vmin;
left: -1vmin;
top: 72%;
background: #654321;
border-radius: 0.5vmin;
box-shadow: 0 1.5vmin 1vmin -1vmin, 31vmin 0 #654321, 31vmin 1.5vmin 1vmin -1vmin;
}
.bottom {
width: 26vmin;
height: 11.5vmin;
bottom: 0;
background :#654321;
background: linear-gradient(to right, transparent, rgba(0,0,0,0.25), transparent, rgba(0,0,0,0.25), transparent), linear-gradient(#654321 -60%, #543210);
left: 5vmin;
box-shadow: inset -0.75vmin 0 1vmin -0.7vmin rgba(0,0,0,0.33), inset 0.75vmin 0 1vmin -0.7vmin rgba(0,0,0,0.33), 0 -4vmin 3vmin -1vmin rgba(0,0,0,0.4);
}
.back {
width: 100%;
height: 85%;
-webkit-clip-path: polygon(0% 30%, 50% 0%, 100% 30%, 100% 100%, 0% 100%);
clip-path: polygon(0% 30%, 50% 0%, 100% 30%, 100% 100%, 0% 100%);
background: brown;
background: radial-gradient(at 55% 100%, rgba(0,0,0,0.75), transparent 56%), linear-gradient(to right, #654321 10%, #5c3c1c 35%, #654321 35%, #5c3c1c 65%, #654321 65%, #5c3c1c 90%);
}
.candelabra {
width: 30vmin;
height: 4vmin;
background: #111;
background: linear-gradient(#222, #111);
border-radius: 0.5vmin;
bottom: 80vmin;
transform: translate(-60%, 0);
left: 0;
}
.candelabra + .candelabra {
left: auto;
right: 0;
transform: translate(75%, 0);
}
.cord {
left: 50%;
width: 1vmin;
height: 100vmax;
bottom: 100%;
border-left: 1vmin dashed #222;
background: rgba(0,0,0,0.2);
box-sizing: border-box;
border-collapse: collapse;
box-shadow: inset 0 0 0 1vmin;
}
.candelabra .candles {
display: flex;
width: 106%;
left: -3%;
height: 1vmin;
justify-content: space-between;
}
.candle {
position: relative;
height: 6vmin;
width: 2vmin;
border-radius: 4vmin 4vmin 1000% 1000%;
background: #222;
background: linear-gradient(#222, #000);
top: -1vmin;
}
.candle::before {
content: "";
display: block;
position: absolute;
width: 70%;
left: 15%;
height: 4vmin;
background: white;
background: linear-gradient(to bottom, #ffe, #ccb);
top: -4vmin;
}
@keyframes fire {
0%, 100% {
border-radius: 1000% 100% 1000% 1000%;
box-shadow: inset 0 -1vmin rgba(255,128,0, 0.5);
height: 50%;
width: 70%;
}
33% {
border-radius: 1000% 200% 1000% 1000%;
box-shadow: inset 0 -0.5vmin 1vmin rgba(255,128,0, 0.5);
height: 51%;
width: 80%;
}
66% {
border-radius: 1000% 1000% 1000% 1000%;
box-shadow: inset 0 -1.5vmin rgba(255,128,0, 0.5);
height: 49%;
width: 65%;
}
}
.candle::after {
content: "";
display: block;
position: absolute;
width: 70%;
height: 50%;
border-radius: 1000% 100% 1000% 1000%;
left: 50%;
background: rgba(255,255,0, 0.75);
box-shadow: inset 0 -1vmin rgba(255,128,0, 0.5);
top: -7vmin;
transform: translate(-50%, 0);
animation: fire 2s infinite;
}
.candle + .candle { animation-delay: -0.5s !important; }
.candle + .candle + .candle { animation-delay: -3s !important; }
.candle + .candle + .candle + .candle { animation-delay: -2.1s !important; }
@keyframes rat {
0% { transform: translate(150vmax, 0); }
100% { transform: translate(-350vmax, 0); }
}
.mouse {
width: 10vmin;
height: 3vmin;
bottom: 0.1vmin;
animation: rat 30s infinite;
left: -10vmin;
transform: translate(150vmax, 0);
filter: blur(2px);
}
.mousebody {
background: black;
width: 60%;
left: 40%;
height: 100%;
border-radius: 20% 100% 0% 0;
}
.mousebody::before {
content: "";
display: block;
position: absolute;
width: 66%;
transform: translate(-90%, 0);
height: 100%;
background: #111;
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}
.mousebody::after {
content: "";
display: block;
position: absolute;
width: 0.5vmin;
height: 0.5vmin;
background: #d00;
top: 50%;
left: -10%;
}
.mousefeet{
width: 0.75vmin;
height: 0.75vmin;
bottom: -0.5vmin;
background: #111;
left: 4vmin;
border-radius: 50%;
box-shadow: 4vmin 0;
}
.mousetail {
width: 4vmin;
height: 4vmin;
border: 0.5vmin solid transparent;
border-right: 0.5vmin solid #111;
border-radius: 50%;
transform: rotate(45deg);
right: -2vmin;
bottom: 0.5vmin;
}
.mousetail::before {
content: "";
display: block;
position: absolute;
border-radius: 50%;
width: 4vmin;
height: 4vmin;
border: 0.5vmin solid transparent;
border-top: 0.5vmin solid #111;
border-left: 0;
top: -0.25vmin;
left: 0.25vmin;
}
.guard {
width: 20vmin;
height: 70vmin;
box-sizing: border-box;
bottom: 0;
left: 50%;
transform: translate(-57vmin, 0);
filter: blur(1px);
}
.shield {
width: 75%;
height: 45%;
background: #ccc;
background: linear-gradient(135deg, #ccc, #777);
border-radius: 0 0 100% 100%;
bottom: 0;
left: -15%;
box-sizing: border-box;
box-shadow: inset 0 0 0 2vmin rgba(0,0,0,0.25);
}
.sword {
width: 10%;
height: 48%;
background: #bbb;
border-radius: 0 0 100% 0;
bottom: 0;
right: 0;
}
.sword::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-98%, 0);
background: #c8c8c8;
border-radius: 0 0 0 100%;
}
.sword-traverse {
height: 3%;
width:50%;
background: #333;
border-radius: 100%;
bottom: 47%;
right: -15%;
}
.sword-traverse::before {
content:"";
display: block;
position: absolute;
width: 2vmin;
height: 2vmin;
border-radius: 50%;
background: #333;
top: 24%;
left: -0.5vmin;
box-shadow: 9vmin 0 #333;
}
.guard .hand {
top: 52%;
transform: scale(0.9);
}
.guard .hand + .hand {
top: 44.75%;
left: auto;
right: -4%;
transform: scale(0.9) rotate(-90deg);
}
.guard .hand + .hand::before {
left: 0%;
top: -40%;
}
.handle {
height: 80%;
width: 150%;
background: #222;
border-radius: 0 100% 100% 0;
}
.handle::before {
content: "";
display:block;
position: relative;
width: 3vmin;
height: 3vmin;
border-radius: 50%;
background: #222;
right: -90%;
transform: translate(0%, -10%);
}
.guard .legs {
height: 45%;
}
.guard .legs::before,
.guard .legs::after {
background: #e8e8e8;
box-shadow: inset 0.5vmin 0.5vmin 1vmin rgba(0,0,0,0.25);
}
.guard .boots {
width: 40%;
height: 30%;
box-shadow: 7.75vmin 0 #222;
}
.guard .boots::before,
.guard .boots::after {
left: 7.75vmin;
}
.guard .boots::after {
left: 0.25vmin;
}
.tackedshirt {
width: 70%;
height: 20%;
background: #c00;
background: linear-gradient(to bottom, #d24, #990022);
box-shadow: inset 10vmin 0 1vmin #902, inset -1vmin 0 1vmin #902;
border-radius: 10% 15% 5px 5px;
bottom: 26%;
left: 15%;
}
.guard .belt {
width: 60%;
left: 18%;
bottom: 46%;
height: 2vmin;
background: #987654;
box-shadow: inset -5vmin -0.5vmin 1vmin #876543;
}
.guard .belt::after {
content: "";
width: 25%;
height: 100%;
left: 37.5%;
display: block;
box-shadow: inset 0.7vmin 0 0 0.6vmin #876543;
background: rgba(238,208,0,0.5);
position: relative;
box-sizing: border-box;
border: 0.2vmin solid rgba(238,208,0,0.5);
border-radius: 0.125vmin;
}
.chest {
width: 74%;
height: 25%;
background: #d24;
background: linear-gradient(to bottom, #d24, #990022);
abox-shadow: inset 10vmin 0 1vmin #902, inset -1vmin 0 1vmin #902;
border-radius: 35% 35% 10% 15%;
bottom: 48.5%;
left: 13%;
}
.shoulders {
width: 120%;
height: 12%;
left: -10%;
background: #d24;
background: linear-gradient(to bottom, #d24 20%, #a02);
bottom: 62%;
border-radius: 100vmin 100vmin 0 0;
}
.arm-right,
.arm-left {
width: 27%;
height: 25%;
background: white;
background: linear-gradient(to bottom, #ddd, #fff);
box-shadow: inset -2vmin 6vmin 1vmin rgba(0,0,0,0.1);
bottom: 44%;
left: -7.5%;
border-radius: 100%;
}
.arm-right::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 20%;
background: #ccc;
background: radial-gradient(#888, #ccc);
border-radius: 100%;
bottom: -3%;
left: -8%;
}
.arm-left {
width: 25%;
left: auto;
right: -7%;
}
.guard .mustache,
.guard .eyes {
animation-delay: 4s;
}
.guard .mustache::before,
.guard .mustache::after {
background: #876543;
background: linear-gradient(to bottom, #876543, #654321);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 100%, 57% 90%, 55% 100%, 50% 80%, 45% 95%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 100%, 57% 90%, 55% 100%, 50% 80%, 45% 95%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
}
.guard .beard {
left: 0;
width: 100%;
height: 90%;
background: #876543;
background: linear-gradient(to bottom, #876543, #654321 75%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 100%, 57% 90%, 55% 100%, 50% 80%, 45% 95%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 100%, 57% 90%, 55% 100%, 50% 80%, 45% 95%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
}
.guard .face {
top: -1vmin;
height: 13.5vmin;
border-radius: 100% 100% 10vmin 10vmin;
}
.guard .eyebrows {
left: 30%;
width: 35%;
height: 10%;
background: #876543;
box-shadow: 3.6vmin 0 #876543;
}
.guard .nose {
background: #daa;
background: linear-gradient(to bottom, #fcc 10%, #e88);
}
.guard .hair {
top: -5%;
height: 80%;
background: #876543;
background: linear-gradient(to bottom, #876543, #654321 75%);
}
.guard .face::before {
content:"";
display: block;
position: absolute;
top: 10%;
left: 50%;
transform: translate( -50%, -50%);
width: 30%;
border-bottom: 0.125vmin solid #ebb;
box-shadow: 0 0.5vmin #ebb, 0.25vmin 1vmin #ebb, -0.25vmin 1vmin #ebb;
}
Also see: Tab Triggers