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.
<img src="https://picsum.photos/id/182/300/300">
<img src="https://picsum.photos/id/151/300/300">
/* Shape taken from: https://css-generators.com/blob/ */
:nth-child(1 of img) {
clip-path: shape(from 90.89% 45.64%,curve to 93.04% 54.85% with 93.56% 50.00%,curve to 88.92% 63.36% with 92.52% 59.71%,curve to 85.12% 72.43% with 85.31% 67.01%,curve to 80.16% 79.84% with 84.93% 77.86%,curve to 71.71% 84.64% with 75.38% 81.83%,curve to 64.58% 93.09% with 68.04% 87.45%,curve to 55.56% 93.65% with 61.12% 98.72%,curve to 44.63% 92.82% with 50.00% 88.58%,curve to 35.60% 92.27% with 39.26% 97.07%,curve to 26.56% 86.82% with 31.95% 87.48%,curve to 20.85% 79.83% with 21.17% 86.16%,curve to 13.55% 72.21% with 20.53% 73.50%,curve to 4.51% 65.88% with 6.58% 70.91%,curve to 5.39% 55.43% with 2.45% 60.85%,curve to 9.90% 45.60% with 8.32% 50.00%,curve to 12.31% 36.73% with 11.47% 41.21%,curve to 14.90% 27.83% with 13.14% 32.25%,curve to 20.42% 20.52% with 16.65% 23.41%,curve to 27.53% 13.96% with 24.19% 17.64%,curve to 36.18% 11.48% with 30.88% 10.29%,curve to 45.74% 10.19% with 41.48% 12.66%,curve to 55.18% 6.14% with 50.00% 7.71%,curve to 65.11% 6.68% with 60.37% 4.57%,curve to 73.49% 12.38% with 69.85% 8.79%,curve to 78.33% 21.21% with 77.14% 15.97%,curve to 85.48% 28.25% with 79.52% 26.46%,curve to 89.83% 35.66% with 91.44% 30.04%,curve to 90.89% 45.64% with 88.22% 41.28%);
}
:nth-child(1 of img):hover {
clip-path: shape(from 93.57% 45.24%,curve to 94.25% 54.92% with 95.40% 50.00%,curve to 91.21% 64.39% with 93.09% 59.83%,curve to 82.47% 69.68% with 89.33% 68.94%,curve to 76.05% 76.82% with 75.61% 70.43%,curve to 73.29% 87.47% with 76.49% 83.21%,curve to 64.23% 89.18% with 70.09% 91.73%,curve to 54.18% 85.13% with 58.36% 86.63%,curve to 44.68% 90.11% with 50.00% 83.62%,curve to 35.62% 92.12% with 39.37% 96.59%,curve to 25.97% 87.59% with 31.87% 87.65%,curve to 22.23% 78.97% with 20.08% 87.52%,curve to 18.27% 69.32% with 24.39% 70.42%,curve to 11.59% 63.56% with 12.16% 68.22%,curve to 9.58% 54.45% with 11.01% 58.90%,curve to 8.54% 45.31% with 8.15% 50.00%,curve to 11.77% 36.79% with 8.93% 40.63%,curve to 18.58% 30.53% with 14.62% 32.96%,curve to 25.19% 25.15% with 22.55% 28.11%,curve to 31.39% 20.48% with 27.83% 22.20%,curve to 37.40% 12.13% with 34.96% 18.77%,curve to 44.92% 8.23% with 39.84% 5.49%,curve to 55.38% 6.93% with 50.00% 10.97%,curve to 62.14% 12.40% with 60.75% 2.89%,curve to 69.63% 19.83% with 63.53% 21.90%,curve to 80.82% 19.55% with 75.72% 17.75%,curve to 82.60% 28.63% with 85.92% 21.35%,curve to 85.51% 38.19% with 79.28% 35.90%,curve to 93.57% 45.24% with 91.73% 40.48%);
}
:nth-child(2 of img) {
clip-path: shape(from 87.74% 45.93%,curve to 90.63% 54.66% with 85.92% 50.00%,curve to 93.32% 63.52% with 95.34% 59.32%,curve to 88.24% 71.11% with 91.29% 67.72%,curve to 79.93% 75.22% with 85.19% 74.49%,curve to 74.69% 82.81% with 74.66% 75.95%,curve to 69.60% 89.37% with 74.72% 89.67%,curve to 60.57% 91.29% with 64.47% 89.08%,curve to 52.16% 94.84% with 56.66% 93.50%,curve to 44.22% 90.90% with 47.66% 96.19%,curve to 37.66% 83.56% with 40.78% 85.60%,curve to 30.11% 81.47% with 34.54% 81.52%,curve to 21.20% 80.00% with 25.67% 81.43%,curve to 11.71% 76.30% with 16.73% 78.56%,curve to 10.31% 67.68% with 6.69% 74.04%,curve to 13.20% 57.57% with 13.93% 61.32%,curve to 9.63% 49.71% with 12.46% 53.82%,curve to 11.93% 42.64% with 6.79% 45.61%,curve to 15.21% 34.66% with 17.08% 39.67%,curve to 13.23% 23.99% with 13.34% 29.65%,curve to 20.19% 19.48% with 13.11% 18.33%,curve to 30.70% 19.14% with 27.27% 20.64%,curve to 36.61% 12.77% with 34.13% 17.64%,curve to 43.65% 11.20% with 39.10% 7.89%,curve to 52.55% 9.76% with 48.20% 14.51%,curve to 61.28% 6.34% with 56.89% 5.01%,curve to 69.79% 9.65% with 65.68% 7.67%,curve to 76.09% 15.95% with 73.91% 11.63%,curve to 80.21% 23.94% with 78.26% 20.27%,curve to 87.77% 29.50% with 82.16% 27.62%,curve to 91.47% 36.63% with 93.37% 31.39%,curve to 87.74% 45.93% with 89.56% 41.87%);
}
:nth-child(2 of img):hover {
clip-path: shape(from 88.47% 46.07%,curve to 84.54% 53.13% with 88.65% 50.00%,curve to 88.16% 62.97% with 80.44% 56.25%,curve to 88.08% 70.38% with 95.88% 69.69%,curve to 81.79% 78.06% with 80.28% 71.07%,curve to 75.10% 81.07% with 83.31% 85.04%,curve to 65.95% 83.80% with 66.89% 77.10%,curve to 60.12% 87.37% with 65.00% 90.51%,curve to 51.63% 86.71% with 55.24% 84.22%,curve to 44.65% 86.43% with 48.01% 89.20%,curve to 36.95% 84.55% with 41.28% 83.67%,curve to 26.62% 86.70% with 32.62% 85.42%,curve to 20.05% 82.08% with 20.61% 87.97%,curve to 16.04% 73.48% with 19.49% 76.19%,curve to 14.40% 65.68% with 12.58% 70.77%,curve to 15.40% 57.10% with 16.22% 60.60%,curve to 16.67% 50.21% with 14.59% 53.60%,curve to 16.72% 42.87% with 18.74% 46.82%,curve to 12.59% 33.49% with 14.70% 38.93%,curve to 14.74% 25.73% with 10.47% 28.06%,curve to 24.14% 23.30% with 19.02% 23.40%,curve to 30.09% 17.16% with 29.25% 23.20%,curve to 35.32% 10.68% with 30.93% 11.13%,curve to 43.96% 12.52% with 39.70% 10.23%,curve to 52.87% 7.82% with 48.22% 14.80%,curve to 61.93% 3.36% with 57.53% 0.84%,curve to 66.73% 14.20% with 66.34% 5.89%,curve to 73.86% 20.17% with 67.13% 22.51%,curve to 83.99% 20.89% with 80.59% 17.82%,curve to 85.35% 29.84% with 87.40% 23.97%,curve to 85.79% 38.92% with 83.30% 35.71%,curve to 88.47% 46.07% with 88.28% 42.13%);
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 20px;
background: #c3a894;
}
img {
width: 280px;
aspect-ratio: 1;
cursor: pointer;
/* from https://linear-easing-generator.netlify.app/ */
transition: 1.3s linear(0, 0.024, 0.068 1%, 0.22 2.2%, 0.968 6.1%, 1.221 7.7%, 1.314, 1.383, 1.426 10%, 1.438, 1.445, 1.447, 1.445 11.4%, 1.432, 1.405, 1.365 13.4%, 1.272 14.6%, 1.004 17.7%, 0.892 19.3%, 0.855, 0.828, 0.811, 0.802, 0.802, 0.808, 0.819, 0.837 24.8%, 0.879 26.1%, 0.998 29.1%, 1.048 30.8%, 1.076 32.2%, 1.084, 1.088 33.6%, 1.086, 1.077, 1.059 37.2%, 1.006 40.3%, 0.984 41.7%, 0.968 43.4%, 0.963, 0.961 45%, 0.962, 0.966 47.3%, 1.007 53.2%, 1.014, 1.017 56.4%, 1.015 58.8%, 0.997 64.6%, 0.992 67.8%, 0.993 70.2%, 1.001 75.9%, 1.003 78.9%, 0.999 90.2%, 1);
}
Also see: Tab Triggers