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.
-8.times do
%div
%label
$t: rgba(255, 255, 255, 0.001);
html {
height: 100vh;
width: 100vw;
overflow-y: scroll;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: mandatory;
&::-webkit-scrollbar {
display: none;
}
}
body {
height: 800vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
--center: translate(-50%, -50%);
div {
position: relative;
transform-style: preserve-3d;
label {
position: absolute;
font: "Futura", sans-serif;
font-size: 12px;
bottom: 10px;
right: 10px;
}
&:before,
&:after {
content: "";
position: absolute;
transform-style: preserve-3d;
}
}
}
div:nth-of-type(1) {
//fall
background: radial-gradient(
circle at bottom,
lighten(#b7a476, 15%),
#b7a476 150%
);
perspective: 200vmin;
overflow: hidden;
label {
&:before {
content: "Fall";
}
}
&:before,
&:after {
--r: #da3743;
--r-dark: #85483b;
--r-light: #b8442b;
width: 170px;
height: 100px;
background: linear-gradient(
to right,
var(--r-dark) 40px,
var(--r-light) 20px
)
0px 100% / 100% 1px no-repeat,
radial-gradient(circle at center, var(--r) 35px, $t 25px) -20px 30px / 100%
no-repeat,
linear-gradient(30deg, var(--r) 42.5px, $t 25px) 87.5px 0px / 75% 100%
no-repeat,
linear-gradient(-25deg, var(--r) 42.5px, $t 25px) 55px -25px / 40px 100% no-repeat,
linear-gradient(-10deg, var(--r) 42.5px, $t 25px) 80px -5px / 40px 100% no-repeat;
-webkit-box-reflect: below;
top: -200px;
left: calc(50% - 85px);
animation: falling 8s ease-out infinite,
waving 2s ease-in-out infinite alternate;
transform-origin: 50% 50%;
--scale: 1;
@keyframes falling {
from {
translate: 0 0;
}
to {
translate: 0 calc(100vh + 200px);
}
}
@keyframes waving {
from {
rotate: 20deg;
transform: rotateX(-140deg) translateZ(200px) scaleX(var(--scale));
}
to {
rotate: -20deg;
transform: rotateX(0deg) translateZ(200px) scaleX(var(--scale));
}
}
}
&:after {
--r: #deb84d;
--r-light: #bc9c44;
z-index: 9;
--scale: -1;
animation: falling 6s ease-out infinite,
waving 2s ease-in-out infinite alternate;
animation-delay: -4s, -2s;
}
}
div:nth-of-type(2) {
// Impossible
background: #000;
label {
&:before {
content: "Impossible";
color: #fff;
}
}
&:before,
&:after {
content: "";
position: absolute;
width: 300px;
height: 300px;
left: calc(50% - 150px);
top: calc(50% - 150px);
background: linear-gradient(62deg, #444 22px, $t 15px) 128px 88px / 100%
52px no-repeat,
linear-gradient(
to bottom,
#000 15px,
$t 15px,
$t calc(100% - 15px),
#000 calc(100% - 15px)
),
linear-gradient(60deg, #000 30px, $t 10px),
linear-gradient(-61deg, #000 30px, $t 30px),
linear-gradient(119deg, #000 120px, $t 50px),
linear-gradient(-119deg, #000 120px, $t 50px),
linear-gradient(-119deg, #ccc 160px, $t 50px) 50% 0px / 100%
calc(100% - 55px) no-repeat,
linear-gradient(61deg, #ccc 100px, $t 50px) 140px 205px / 160px 40px
no-repeat,
linear-gradient(-61deg, #ccc 100px, $t 50px) 50px 205px / 160px 40px
no-repeat,
linear-gradient(-61deg, #444 50px, #444 275px, $t 275px) -60px 245px / 400px
40px no-repeat,
linear-gradient(-62deg, #000 30px, $t 10px) 82.5px 50% / 70px 107.5px
no-repeat,
linear-gradient(61deg, #000 30px, $t 10px) 152.5px 50% / 70px 107.5px
no-repeat,
linear-gradient(118deg, $t 50px, #444 50px, #444 93px, $t 75px) 47px 140px /
100% 150px no-repeat,
linear-gradient(-61deg, #444 25px, $t 10px) -171px 96px / 100% 50px no-repeat;
z-index: 9;
}
&:after {
background: linear-gradient(
to bottom,
#4158d0 20%,
#c850c0,
#ffcc70,
#c850c0,
#4158d0 80%
);
background-size: 100% 600%;
animation: bgshift 2s linear infinite;
box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #000;
@keyframes bgshift {
from {
background-position: 50% 0%;
}
to {
background-position: 50% 100%;
}
}
z-index: 0;
}
}
div:nth-of-type(3) {
background: #76c5d6;
label {
&:before {
content: "Artist";
}
}
&:before {
width: 150px;
height: 150px;
background: radial-gradient(
ellipse at bottom,
$t 10px,
#845431 10px,
#845431 15px,
$t 12px
)
calc(50% - 40px) 10px / 80px 20px no-repeat,
radial-gradient(
ellipse at bottom,
$t 10px,
#845431 10px,
#845431 15px,
$t 12px
)
calc(50% + 40px) 10px / 80px 20px no-repeat,
radial-gradient(circle at top, darken(#ffecde, 5%) 10px, $t 10px) 50% 70px,
radial-gradient(ellipse at center, #000 5px, $t 5px) 25px 25px / 25px 40px
no-repeat,
radial-gradient(ellipse at center, #000 5px, $t 5px) 100px 25px / 25px
40px no-repeat,
radial-gradient(
circle at top,
#fff 15px,
darken(#ffecde, 7.5%) 15px,
darken(#ffecde, 5%) 22px,
$t 20px
)
50% 100px,
radial-gradient(circle at bottom, #845431 80px, $t 50px),
darken(#ffecde, 5%);
left: calc(50% - 75px);
top: calc(50% - 75px);
border-radius: 100px 100px 100px 100px / 65px 65px 100px 100px;
box-shadow: 0 -65px 0 35px #845431, 60px 0 0 -42px darken(#ffecde, 10%),
-60px 0 0 -42px darken(#ffecde, 10%), inset 0px -20px 0 #845431,
0 50px 0 -30px darken(#ffecde, 10%), 0 80px 0 -40px darken(#efefef, 10%);
}
&:after {
width: 40px;
height: 100px;
background: linear-gradient(
-35deg,
$t 50px,
#efefef 50px,
#efefef 75px,
$t 50px
);
left: calc(50% + 2.5px);
top: calc(50% + 55px);
z-index: 9;
-webkit-box-reflect: left 5px;
}
}
div:nth-of-type(4) {
// crawl
label {
&:before {
content: "Crawl";
}
}
background: #f7eddb;
z-index: 9;
&:before {
width: 300px;
height: 75px;
transform: var(--center);
top: 50%;
left: 50%;
--move: 0px;
--move2: -80px;
--move3: -30px;
--move4: -17.5px;
--move5: -40px;
background-image: radial-gradient(circle at center, #392f2d 2px, $t 2px),
radial-gradient(
ellipse at bottom,
#cb8d40 15px,
#392f2d 15px,
#392f2d 17px,
$t 12px
),
radial-gradient(
ellipse at top,
#fff 15px,
#392f2d 15px,
#392f2d 17px,
$t 12px
),
linear-gradient(to left, #f7eddb 35px, $t 5px),
radial-gradient(
circle at bottom,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#fff 32px,
#fff 38px,
#cb8d40 38px,
#cb8d40 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at top,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#cb8d40 32px,
#cb8d40 42px,
#fff 42px,
#fff 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at bottom,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#fff 32px,
#fff 38px,
#cb8d40 38px,
#cb8d40 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at top,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#cb8d40 32px,
#cb8d40 42px,
#fff 42px,
#fff 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at bottom,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#fff 32px,
#fff 38px,
#cb8d40 38px,
#cb8d40 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at top,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#cb8d40 32px,
#cb8d40 42px,
#fff 42px,
#fff 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at bottom,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#fff 32px,
#fff 38px,
#cb8d40 38px,
#cb8d40 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at top,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#cb8d40 32px,
#cb8d40 42px,
#fff 42px,
#fff 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at bottom,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#fff 32px,
#fff 38px,
#cb8d40 38px,
#cb8d40 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
),
radial-gradient(
circle at top,
$t 30px,
#392f2d 30px,
#392f2d 32px,
#cb8d40 32px,
#cb8d40 42px,
#fff 42px,
#fff 48px,
#392f2d 48px,
#392f2d 50px,
$t 15px
);
background-size: 10px 10px, 70px 36px, 60px 20px, 100%, 40px 50px, 40px 50px,
40px 50px, 40px 50px, 40px 50px, 40px 50px, 40px 50px, 40px 50px,
40px 50px;
background-repeat: no-repeat;
background-position: calc(100% - 25px) calc(50% + var(--move3) + 10px),
100% calc(50% + var(--move3)),
calc(100% - 5px) calc(50% + 27px + var(--move3)), 50% 50%,
calc(0px + var(--move)) 50%, calc(40px + var(--move)) calc(50% - 18.5px),
calc(80px + var(--move)) 50%, calc(120px + var(--move)) calc(50% - 18.5px),
calc(160px + var(--move)) 50%,
calc(200px + var(--move)) calc(50% - 18.5px),
calc(240px + var(--move)) 50%,
calc(280px + var(--move)) calc(50% - 18.5px),
calc(320px + var(--move)) 50%,
calc(360px + var(--move)) calc(50% - 18.5px);
animation: slither 1s linear infinite;
@keyframes slither {
50% {
background-position: calc(100% - 25px) calc(50% + var(--move4) + 10px),
100% calc(50% + var(--move4)),
calc(100% - 5px) calc(50% + 27px + var(--move4)), 50% 50%,
calc(0px + var(--move5)) 50%,
calc(40px + var(--move5)) calc(50% - 18.5px),
calc(80px + var(--move5)) 50%,
calc(120px + var(--move5)) calc(50% - 18.5px),
calc(160px + var(--move5)) 50%,
calc(200px + var(--move5)) calc(50% - 18.5px),
calc(240px + var(--move5)) 50%,
calc(280px + var(--move5)) calc(50% - 18.5px),
calc(320px + var(--move5)) 50%,
calc(360px + var(--move5)) calc(50% - 18.5px);
}
100% {
background-position: calc(100% - 25px) calc(50% + var(--move3) + 10px),
100% calc(50% + var(--move3)),
calc(100% - 5px) calc(50% + 27px + var(--move3)), 50% 50%,
calc(0px + var(--move2)) 50%,
calc(40px + var(--move2)) calc(50% - 18.5px),
calc(80px + var(--move2)) 50%,
calc(120px + var(--move2)) calc(50% - 18.5px),
calc(160px + var(--move2)) 50%,
calc(200px + var(--move2)) calc(50% - 18.5px),
calc(240px + var(--move2)) 50%,
calc(280px + var(--move2)) calc(50% - 18.5px),
calc(320px + var(--move2)) 50%,
calc(360px + var(--move2)) calc(50% - 18.5px);
}
}
}
&:after {
width: 60px;
height: 20px;
background: repeating-linear-gradient(
65deg,
lighten(#cb8d40, 20%) 5px,
#392f2d 5px,
#392f2d 7px,
lighten(#cb8d40, 20%) 7px,
#fff 12px
);
box-shadow: inset 0 0 0 2px #392f2d, 0 3px 0 #f7eddb, 0 -3px 0 #f7eddb;
top: calc(50% - 27.5px);
left: calc(50% - 200px);
border-radius: 120px 18px 18px 120px / 50px 28px 28px 50px;
animation: slither2 0.5s linear infinite alternate 0.25s;
transform-origin: 50% 100%;
transform: translateY(0px) rotate(7.5deg);
@keyframes slither2 {
to {
transform: translateY(15px) rotate(-7.5deg);
}
}
}
}
div:nth-of-type(5) {
// Lost
label {
&:before {
content: "Lost";
color: #fff;
}
}
background: radial-gradient(
circle at center,
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0.5)
),
radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0.5px, $t 0.5px)
50% 50% / 30vw 70vw,
radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 0.5px, $t 0.5px)
calc(50% - 60vw) calc(50% - 40vw) / 20vw 20vw,
radial-gradient(circle at center, rgba(255, 255, 255, 0.45) 0.5px, $t 0.5px)
calc(50% - 15vw) calc(50% - 30vw) / 20vw 20vw,
radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0.5px, $t 0.5px)
calc(50% - 25vw) calc(50% - 80vw) / 60vw 30vw,
#222;
overflow: hidden;
&:before {
content: "";
position: absolute;
width: 150px;
height: 300px;
background: radial-gradient(circle at center, #b8c4ce 15px, $t 15px) -40px 40px,
radial-gradient(circle at center, #b8c4ce 10px, $t 10px) 5px 90px,
radial-gradient(
circle at bottom left,
$t 40px,
#b8c4ce 40px,
#b8c4ce 60px,
$t 60px
)
30px -60px / 100% no-repeat,
radial-gradient(circle at center, #b8c4ce 10px, $t 10px) -15px 50%,
radial-gradient(circle at center, #b8c4ce 10px, $t 10px) -45px -30px,
radial-gradient(
circle at top right,
$t 20px,
#b8c4ce 20px,
#b8c4ce 40px,
$t 40px
) -90px 120px / 100% no-repeat,
radial-gradient(circle at center, #ff5c6d 5px, $t 5px) -20px -30px,
linear-gradient(to right, #3293e2, #3293e2) 65px 117.5px / 7px 5px
no-repeat,
linear-gradient(to right, #ccc, #ccc) 28px 90px / 44px 5px no-repeat,
radial-gradient(ellipse at bottom, #a4ddea 50%, $t 50%) 20px 50px / 60px
40px no-repeat,
radial-gradient(circle at center, #fff 50%, $t 50%) -2.5px 40px / 90px 90px
no-repeat,
linear-gradient(to right, #fff, #fff) 10px 50% / 65px 100px no-repeat,
radial-gradient(ellipse at bottom, #fff 70%, $t 66%) 10px 75px / 65px 25px
no-repeat,
radial-gradient(ellipse at top, #fff 70%, $t 66%) 10px 200px / 65px 25px
no-repeat,
linear-gradient(to right, #ccc 30px, #ccc 30px) 0px 50% / 55px 80px
no-repeat,
radial-gradient(
circle at top right,
$t 20px,
darken(#b8c4ce, 5%) 20px,
darken(#b8c4ce, 5%) 40px,
$t 40px
) -60px 110px / 100% no-repeat,
radial-gradient(circle at center, darken(#b8c4ce, 5%) 10px, $t 10px) 15px -10px,
radial-gradient(circle at center, darken(#b8c4ce, 5%) 10px, $t 10px) 25px
70px,
radial-gradient(
circle at bottom left,
$t 40px,
darken(#b8c4ce, 5%) 40px,
darken(#b8c4ce, 5%) 60px,
$t 60px
)
50px -80px / 100% no-repeat,
radial-gradient(ellipse at center, #b8c4ce 50%, $t 50%) 66px 227px / 40px
30px no-repeat,
radial-gradient(ellipse at center, darken(#b8c4ce, 5%) 50%, $t 50%) 86px
207px / 40px 30px no-repeat;
left: 50%;
top: 50%;
transform: var(--center);
}
&:after {
left: -50vw;
top: -50vh;
width: 200vw;
height: 200vh;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.35) 0.5px,
$t 0.5px
)
50% 50% / 30vw 70vw,
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.75) 0.5px,
$t 0.5px
)
calc(50% - 60vw) calc(50% - 40vw) / 20vw 20vw,
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.45) 0.5px,
$t 0.5px
)
calc(50% - 15vw) calc(50% - 30vw) / 20vw 20vw,
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.5) 0.5px,
$t 0.5px
)
calc(50% - 25vw) calc(50% - 80vw) / 60vw 30vw;
animation: float 15s linear infinite;
@keyframes float {
to {
transform: rotate(360deg);
}
}
}
}
div:nth-of-type(6) {
// Bounce
label {
&:before {
content: "Bounce";
}
}
background: radial-gradient(
ellipse at center,
lighten(#d0b982, 10%),
#d0b982 25%
)
50% calc(50% + 12.5vh) / 200% 100%;
&:before,
&:after {
width: 75px;
height: 75px;
left: calc(50% - 37.5px);
}
&:after {
top: 50%;
background: radial-gradient(
ellipse at center,
$t 40px,
#000 40px,
#000 45px,
$t 35px
)
50% calc(50% + 0px) / 325% 200%,
linear-gradient(to bottom, #000, #000) 50% 50% / 100% 3px no-repeat,
radial-gradient(
circle at 75% 25%,
lighten(#ff8b27, 10%),
darken(#ff8b27, 10%) 30%
);
border-radius: 100%;
animation: bounce 0.75s cubic-bezier(0.76, 0, 0.24, 1) infinite;
transform-origin: 50% 100%;
@keyframes bounce {
0%,
100% {
translate: 0 25px;
transform: scaleY(0.8);
}
50% {
translate: 0px -175px;
transform: scaleX(0.8);
}
}
}
&:before {
background: rgba(0, 0, 0, 0.125);
top: calc(50% + 60px);
border-radius: 100%;
height: 37.5px;
animation: squish 0.75s ease-in-out infinite;
transform-origin: 50% 100%;
@keyframes squish {
50% {
transform: scale(0.65, 0.5);
opacity: 0.5;
}
}
}
}
div:nth-of-type(7) {
// Treat
label {
&:before {
content: "Treat";
}
}
background: radial-gradient(circle at center, pink 8px, $t 2px) 50%
calc(50% - 40px),
radial-gradient(circle at center, #e8f7f2 100px, darken(#e8f7f2, 15%));
&:before {
width: 50px;
height: 35px;
left: 50%;
top: 50%;
transform: var(--center);
background: radial-gradient(
circle at calc(50% - 10px) 30%,
#000 2px,
$t 1px
),
radial-gradient(circle at calc(50% + 10px) 30%, #000 2px, $t 1px),
radial-gradient(circle at top, $t 3px, #000 3px, #000 5px, $t 5px) 50%
calc(50% + 17.5px),
pink;
border-radius: 80px;
box-shadow: 0 -20px 0 -7.5px darken(pink, 2%),
0 -30px 0 -10px darken(pink, 4%);
}
&:after {
width: 50px;
height: 60px;
left: 50%;
top: calc(50% + 40px);
transform: var(--center);
background: linear-gradient(to bottom, #d9caa2 20px, $t 10px),
linear-gradient(85deg, #e8f7f2 10px, $t 5px) 0% 50% / 50% 100% no-repeat,
linear-gradient(-85deg, #e8f7f2 10px, $t 5px) 100% 50% / 50% 100%
no-repeat,
repeating-linear-gradient(
45deg,
darken(#d9caa2, 10%),
darken(#d9caa2, 10%) 1px,
$t 1px,
$t 10px,
darken(#d9caa2, 10%) 10px,
darken(#d9caa2, 10%) 11px
),
repeating-linear-gradient(
-45deg,
darken(#d9caa2, 10%),
darken(#d9caa2, 10%) 1px,
#d9caa2 1px,
#d9caa2 10px,
darken(#d9caa2, 10%) 10px,
darken(#d9caa2, 10%) 11px
);
}
}
@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");
div:nth-of-type(8) {
// Mix
label {
&:before {
content: "Mix";
}
}
background: radial-gradient(
circle at center,
#e6e6b7 10px,
darken(#e6e6b7, 5%)
);
&:after {
z-index: 9;
width: 25px;
height: 25px;
top: calc(50% - 22.5px);
left: calc(50% - 72.5px);
background: radial-gradient(
circle at center,
darken(#e6e6b7, 10%) 6px,
$t 5px
),
linear-gradient(
45deg,
$t calc(50% - 1px),
#fff calc(50% - 1px),
#fff calc(50% + 1px),
$t calc(50% + 1px)
),
linear-gradient(
-45deg,
$t calc(50% - 1px),
#fff calc(50% - 1px),
#fff calc(50% + 1px),
$t calc(50% + 1px)
),
linear-gradient(
90deg,
$t calc(50% - 1px),
#fff calc(50% - 1px),
#fff calc(50% + 1px),
$t calc(50% + 1px)
),
linear-gradient(
0deg,
$t calc(50% - 1px),
#fff calc(50% - 1px),
#fff calc(50% + 1px),
$t calc(50% + 1px)
),
darken(#e6e6b7, 10%);
box-shadow: inset 0 0 0 3px #fff;
border-radius: 100%;
-webkit-box-reflect: right 95px;
}
&:before {
content: "Tight Jamz";
padding-top: 25px;
box-sizing: border-box;
font-size: 25px;
font-family: "Caveat";
display: flex;
justify-content: center;
align-items: flex-start;
height: 190px;
width: 300px;
left: 50%;
top: 50%;
transform: var(--center);
border-radius: 6px;
background: linear-gradient(-135deg, #222 30px, $t 10px),
linear-gradient(135deg, #222 30px, $t 10px),
linear-gradient(
to bottom,
#fff 10px,
#222 10px,
#222 11px,
#fff 11px,
#fff 20px,
#222 20px,
#222 21px,
#fff 21px
)
50% 25px / 230px 30px no-repeat,
linear-gradient(
to right,
#222 40px,
$t 40px,
$t calc(100% - 40px),
#222 calc(100% - 40px)
)
50% calc(50% - 10px) / 160px 40px no-repeat,
linear-gradient(
to bottom,
#222 10px,
$t 10px,
$t calc(100% - 10px),
#222 calc(100% - 10px)
)
50% calc(50% - 10px) / 160px 40px no-repeat,
radial-gradient(circle at right, #624e28 40px, $t 40px) calc(50% - 110px)
calc(50% - 10px) / 100% 40px no-repeat,
radial-gradient(
circle at left,
#624e28 40px,
#e6e6b7 40px,
#e6e6b7 80px,
$t 80px
)
calc(50% + 90px) calc(50% - 10px) / 100% 40px no-repeat,
linear-gradient(
to bottom,
#838383 50px,
#838383 75px,
#c42657 75px,
#c42657 85px,
#3f93c1 85px,
#3f93c1 95px,
#d4bd2b 95px,
#d4bd2b 105px,
#838383 105px
)
50% 15px / calc(100% - 30px) calc(100% - 70px) no-repeat,
linear-gradient(-80deg, $t 50px, #000 50px, #000 52px, $t 52px) -180px 50%,
linear-gradient(80deg, $t 50px, #000 50px, #000 52px, $t 52px) 180px 50%,
radial-gradient(circle at 100px 170px, #000 5px, $t 5px),
radial-gradient(circle at 200px 170px, #000 5px, $t 5px),
radial-gradient(circle at 50% 160px, #000 5px, $t 5px), #222;
}
}
Also see: Tab Triggers