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.
<div class="wrapper">
<h1>Poly</h1>
</div>
* {
box-sizing: border-box;
}
html,
body,
.wrapper {
height: 100%;
margin: 0;
}
h1 {
font-family: Helvetica, sans-serif;
color: white;
font-size: 30em;
padding-top: .29em;
margin: 0;
clip-path: polygon(1px 261px,1px 168px,1225px 158px,1225px 405px,1225px 519px,1214px 556px,1195px 566px,1177px 588px,1157px 610px,1145px 617px,1132px 615px,1126px 615px,1111px 621px,1101px 625px,1094px 626px,1084px 622px,1068px 614px,1055px 620px,1036px 630px,1014px 640px,1005px 645px,990px 649px,968px 649px,951px 641px,940px 633px,925px 626px,913px 632px,899px 638px,889px 637px,876px 634px,858px 623px,848px 622px,833px 626px,821px 619px,814px 619px,804px 614px,792px 610px,778px 602px,767px 590px,755px 583px,744px 580px,734px 582px,723px 579px,711px 577px,698px 567px,684px 565px,674px 556px,665px 544px,656px 536px,646px 527px,641px 524px,628px 515px,618px 514px,605px 519px,594px 527px,579px 539px,566px 540px,557px 541px,540px 537px,519px 540px,508px 539px,492px 539px,482px 537px,476px 534px,467px 528px,461px 522px,451px 516px,439px 511px,411px 497px,397px 481px,382px 472px,368px 461px,357px 456px,351px 455px,340px 452px,335px 452px,326px 449px,308px 449px,302px 451px,297px 452px,289px 457px,277px 460px,269px 468px,265px 478px,259px 479px,249px 483px,237px 490px,225px 494px,219px 495px,213px 498px,206px 497px,203px 499px,190px 502px,179px 498px,175px 499px,169px 501px,160px 501px,156px 505px,148px 505px,139px 497px,131px 490px,123px 489px,115px 492px,108px 493px,101px 492px,92px 488px,81px 485px,74px 490px,68px 493px,54px 486px,50px 488px,44px 495px,34px 491px,22px 493px,3px 502px);
-webkit-filter: drop-shadow(2px 2px 5px rgba(0,0,0, .5));
}
.wrapper {
background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/mask-demo-lg.jpg');
background-repeat: no-repeat;
}
Also see: Tab Triggers