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.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.moz-text-html .mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
@media screen {
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'),
url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'),
url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
src: local('Lato Black'), local('Lato-Black'),
url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');
}
@font-face {
font-family: 'Telefon Black';
font-style: normal;
font-weight: 900;
src: url(https://assets.codepen.io/t-1/telefon-black.woff2) format('woff2');
}
}
body {
font-family: Lato, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif;
font-size: 18px;
line-height: 1.5;
color: #e3e4e8;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
max-width: 100%;
}
p,
li {
color: #e3e4e8;
line-height: 1.5;
font-size: 18px;
margin: 0 0 15px 0;
}
li {
margin-bottom: 10px;
}
blockquote {
background: none;
border-left: 1px solid gray;
padding-left: 10px;
margin: 0 0 15px 10px;
}
h1,
h2,
h3 {
color: white;
}
h1 {
font-size: 28px;
margin: 0;
line-height: 1.2;
}
h2 {
font-size: 26px;
margin: 0;
line-height: 1.2;
}
h3 {
font-size: 24px;
margin: 20px 0 10px 0;
line-height: 1.2;
}
.news-content a,
.spark-item a,
.subscription-details a,
.pro-content a {
text-decoration: none;
color: #76adff;
}
pre {
white-space: pre-wrap;
line-height: 1.8;
font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}
.view-on-web-link {
color: #74c5ff;
text-transform: uppercase;
display: block;
padding: 5px 10px;
background: #383b43;
width: 66%;
margin: 0 auto;
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
text-decoration: none;
}
.dedicated-hero-area-copy {
padding: 20px;
}
.dedicated-hero-area-copy h2 {
font-family: 'Telefon Black', system-ui, Lato, sans-serif;
text-align: center;
margin: 0 0 20px 0;
font-size: 32px;
line-height: 1;
}
.spark-item {
margin-bottom: 50px;
}
.spark-item[data-type='sponsor'] .spark-item-type {
color: #fedd41;
}
.spark-item-type {
color: #99a3bc;
padding-bottom: 3px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
}
.spark-title {
font-weight: bold;
color: #505050;
padding: 5px 0 5px 0;
font-size: 20px;
}
.spark-desc {
padding-top: 4px;
color: #cccfdc;
font-size: 16px;
line-height: 1.5;
}
.spark-thumb {
border: 0;
display: block;
height: auto;
max-width: 100%;
outline: none;
text-decoration: none;
margin: 0 0 10px 0;
}
.news-header {
font-family: 'Telefon Black', system-ui, Lato, sans-serif;
margin: 0 0 5px 0;
font-size: 36px;
text-align: left;
color: white;
}
.news-bar {
height: 5px;
border-radius: 100px;
background: white;
background: linear-gradient(92.63deg,
#769aff 8.23%,
#ffdd40 25.83%,
#f19994 51.91%,
#47cf73 68.56%);
width: 70%;
margin: 0 0 10px 0;
}
.pro-bar {
height: 5px;
border-radius: 100px;
background: #ffdb00;
width: 70%;
margin: 0 0 10px 0;
}
.pro-header {
text-align: left;
}
.pro-header a {
color: #ffdb00;
text-decoration: none;
}
.footer-bar {
height: 10px;
background: linear-gradient(92.63deg,
#769aff 8.23%,
#ffdd40 25.83%,
#f19994 51.91%,
#47cf73 68.56%);
}
@media only screen and (max-width: 400px) {
h1 {
font-size: 22px;
}
p {
font-size: 14px;
}
.spark-thumb {
display: block;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
</head>
<body style="word-spacing:normal;background-color:#1c1d22;">
<div style="background-color:#1c1d22;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#434857" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#434857;background-color:#434857;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#434857;background-color:#434857;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img height="auto" src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_1100/v1638545296/codepen-spark-header-2022_oih61t.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:10px;line-height:1;text-align:center;color:#e3e4e8;"><a href="https://codepen.io/spark/315" class="view-on-web-link">View this issue on CodePen</a></div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:30px;padding-right:35px;padding-bottom:0;padding-left:35px;word-break:break-word;">
<div style="font-family:'Telefon Black', system-ui, sans-serif;font-size:13px;line-height:125%;text-align:left;color:#e7f0ff;">
<h1>Scroll Progress, Slick Sliders, and a CSS Eclipse</h1>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:35px;padding-left:35px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:white;">
<p>This week's CodePen community highlights include a deep dive into the Scroll Progress Timeline from Michelle Barker, a Slider.js-powered carousel from kristen17, and a CSS solar eclipse from Yoav Kadosh. </p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#333845" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#333845;background-color:#333845;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#333845;background-color:#333845;width:100%;">
<tbody>
<tr>
<td style="text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td>
<a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTTDBVCHKETTTTTTPTPAY7TTTTTTTNL4VQFF6EJYVHKNVA3N5MK6WJ3U2VBCCRIPVJJE ">
<img height="auto" src="https://assets.codepen.io/3/flat-file-hero-2.png?width=1100&format=auto&quality=98" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" alt="The easiest, fastest, and safest way for developers to build the ideal data file import experience" />
</a>
<div class="dedicated-hero-area-copy">
<p>The Flatfile Data Exchange Platform provides developers an easy, fast, and secure way to build an ideal solution for importing CSV, Excel, or other data files, without compromising on flexibility. With Flatfile's API-first, event-driven architecture, developers can build fully customizable, powerful workflows that address any file-based import use case.</p>
</div>
</td>
</tr>
<tr>
<td align="center" vertical-align="middle" style="font-size:0px;padding:10px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" bgcolor="#76a6ec" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#76a6ec;" valign="middle">
<a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTTDBVCHKETTTTTTPTPAY7TTTTTTTNL4VQFF6EJYVHKNVA3N5MK6WJ3U2VBCCRIPVJJE" style="display:inline-block;background:#76a6ec;color:#222222;font-family:Lato, system-ui, sans-serif;font-size:22px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank">
Start now, it's free
</a>
</td>
</tr>
</tbody>
</table>
<div style="background: #7e7e7e; margin-top: 20px; height: 1px;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#333845" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#333845;background-color:#333845;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#333845;background-color:#333845;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:15px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
<mj-raw>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/ykadosh/pen/GRwLKvV">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/fuHM1QqQKWEnLGEkMk5F_pure-css-solar-eclipse.png" alt="Solar Eclipse ☀️ (Pure CSS)" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/ykadosh/pen/GRwLKvV">Solar Eclipse ☀️ (Pure CSS)</a></div>
<div class="spark-desc">Yoav Kadosh shares a CSS solar eclipse "made with 18 layers of linear, radial & conic gradients. A "rotate" animation is applied to certain layers to move the rays." With static gradients from Yoav's gradient tool gra.dient.art</div>
</div>
<div class="spark-item" data-type="sponsor">
<a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTTDAVCHKETTTTTTPTPAY7TTTTTTTN4WPQLF6JIZPWSFWMPDCJ4DKNDLKJQUKAL7V2RT">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/L1YIKcN6QECc5280utyO_Frame 1920 (2).png" alt="Rich library of APIs combined with event-driven architecture" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTTDAVCHKETTTTTTPTPAY7TTTTTTTN4WPQLF6JIZPWSFWMPDCJ4DKNDLKJQUKAL7V2RT">Rich library of APIs combined with event-driven architecture</a></div>
<div class="spark-desc">The Flatfile Data Exchange Platform is from the ground up designed on an open, API-first and event-driven architecture that easily fits into most tech stacks. Its rich library of APIs and code-based plugins for file-based data imports, validation, transformations, and workflows is uniquely powerful, providing development teams with ultimate customization and extensibility options.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/kristen17/pen/BaGOOMm">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/FoMngrZSgCDtvJ55OuVg_slider-swiper-js.png" alt="Slider" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/kristen17/pen/BaGOOMm">Slider</a></div>
<div class="spark-desc">kristen17 cooks up a delicious bit of UI for a restaurant site with this slider.js powered image carousel.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/j56Ap0BTTyfjf6ANSbk3_scroll-progress.png" alt="Scroll progress animations in CSS" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/">Scroll progress animations in CSS</a></div>
<div class="spark-desc">Take a deep dive into the Scroll Progress Timeline in this detailed tutorial from Michelle Barker for MDN. Click the "see full example" links on the demos to get into the Pens and put what you learn into action.</div>
</div>
<div class="spark-item" data-type="sponsor">
<a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTT4TVCHKETTTTTTPTPAY7TTTTTTTS7WKEBU4J7N52INP2L2VH4DVEJJP7KDP7PUPHKE">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/xbDeceTQSaSmVvAEo3OH_Frame 27344.png" alt="Highly intuitive data import experience designed for end users" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTT4TVCHKETTTTTTPTPAY7TTTTTTTS7WKEBU4J7N52INP2L2VH4DVEJJP7KDP7PUPHKE">Highly intuitive data import experience designed for end users</a></div>
<div class="spark-desc">The platform provides an easy to use and intuitive user experience throughout the data import, matching, cleaning, and validation process. This includes workbook-style data editing, AI-assisted data-file importing, or protected microsites for secure collaboration.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/t_afif/pen/XWyGWyJ">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/mfrtcLxuQESIBLZn3llb_css-flower-mask.png" alt="CSS-only Flower Mask" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/t_afif/pen/XWyGWyJ">CSS-only Flower Mask</a></div>
<div class="spark-desc">Temani Afif crafts a bouquet of pretty floral photo masks with a nice slowed-down rotation effect on hover.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/wakana-k/pen/zYMMpxP">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/Zrgfb39zSX67F0rVdLom_tilting-cup.png" alt="Tilting Cup" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/wakana-k/pen/zYMMpxP">Tilting Cup</a></div>
<div class="spark-desc">Wakana Y.K. pours us a glass of Three.js fun with this tilting cup. Check out the reflective details in the cup and the water as it moves.</div>
</div>
</mj-raw>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:15px 20px 0 5px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
<mj-raw>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/lewster32/pen/zYMywgY">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/T5dNypgrTKeaaGMPrlk8_isospiral.png" alt="Isospiral" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/lewster32/pen/zYMywgY">Isospiral</a></div>
<div class="spark-desc">Lewis Lane animates a trippy grayscale spiral reminiscent of vintage computer graphics in CSS & JS. Inspired by <a href="https://twitter.com/beesandbombs/status/1686045885849870336">a gif</a> by the legendary digital artist beesandbombs.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://hypersphere.blog/blog/randomness-in-css-using-trigonometry/">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/UgPMNZpOQfuOtWgw19Bk_randomness-css-trig.png" alt="Randomness in CSS using trigonometry" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://hypersphere.blog/blog/randomness-in-css-using-trigonometry/">Randomness in CSS using trigonometry</a></div>
<div class="spark-desc">Get a primer on randomness and pseudo-randomness in CSS trigonometry in this approachable tutorial from hypersphere, complete with great Pen embeds that really help illustrate the concepts.</div>
</div>
<div class="spark-item" data-type="sponsor">
<a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTTDOVCHKETTTTTTPTPAY7TTTTTTTSSFFTAHTJSECMVCLII3GHINAJSFPT7MKMBH52JT">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/W03FmsRkGgT7p1GpHyXg_CodePen.png" alt="Advanced data import functionality" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://srv.buysellads.com/ads/long/x/TCZBZID6TTTTTTTDNDHNVTTTTTTDOVCHKETTTTTTPTPAY7TTTTTTTSSFFTAHTJSECMVCLII3GHINAJSFPT7MKMBH52JT">Advanced data import functionality</a></div>
<div class="spark-desc">Flatfile provides developers with all the tooling they need - from collecting any file type from any type of data source to AI-powered data matching, automated formatting, cleaning and validating data, to human-in-the-loop reviews and approvals.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/praveenpuglia/pen/jOQXqwz">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/JMZ9mZqS7qJjrBWF2Xdo_water-wave-filling-box.png" alt="Water Wave Filling Box with Animation" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/praveenpuglia/pen/jOQXqwz">Water Wave Filling Box with Animation</a></div>
<div class="spark-desc">Move the range slider and watch the water rise in this interactive CSS & JS animation by Praveen Puglia.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/josetxu/pen/xxQMxyg">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/MPssIhtxRIy14S06vI2E_iris-door.png" alt="Iris Door (fangs)" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/josetxu/pen/xxQMxyg">Iris Door (fangs)</a></div>
<div class="spark-desc">Josetxu crafts a sci-fi portal with a sinister edge in CSS. Hover the door to watch its fangs open and close. Then, check out the <a href="https://codepen.io/josetxu/pen/yLpmzEN">star</a> and <a href="https://codepen.io/josetxu/pen/RwxzwEa">hexagonal</a> variations.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/ste-vg/pen/qBQVGEG">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/3mDkgaP7Ri6INbREboLk_rainbowluminescence.png" alt="Rainbowluminescence" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/ste-vg/pen/qBQVGEG">Rainbowluminescence</a></div>
<div class="spark-desc">Hover or tap around to fill the screen with luminous rainbow particles in this PIXI & Victor.js infused Pen by Steve Gardner.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/juan-antonio-ledesma/pen/rNQqMpq">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/6FG1JafsTpeXB3w8KjLh_cell-rest.png" alt="Cell Rest" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/juan-antonio-ledesma/pen/rNQqMpq">Cell Rest</a></div>
<div class="spark-desc">Juan Antonio Ledesma shares a subtly glowing "cell" that moves between a state of rest and agitation in this hypnotic SVG, CSS, and JS animation.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://codepen.io/collection/yrKLvE">
<img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/taxz0iWTN2reXnKrjhKQ_circular-text-trig.png" alt="Circular Text with CSS Trig" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://codepen.io/collection/yrKLvE">Circular Text with CSS Trig</a></div>
<div class="spark-desc">Jhey Tompkins shows his progress through several attempts to place text along a circular path in this collection of Pens complete with a very satisfying final result!</div>
</div>
</mj-raw>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#131417" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#131417;background-color:#131417;margin:0px auto;max-width:600px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:15px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
<mj-raw>
<h2 class="news-header" style="margin: 0 0 5px 0;">
<img src="https://assets.codepen.io/t-1/chriscorner.png" style="width: 65px;" /> Chris’ Corner
</h2>
<p style="color: #9dabc9; margin: 0 0 15px 0;font-size: 16px;">A collection of web design and development news and thoughts from CodePen's own Chris Coyier.</p>
<div class="news-bar"></div>
</mj-raw>
<mj-raw>
<div class="news-content">
<p>The <code><table></code> is one of the grand enemies of responsive design. They don’t wrap (that wouldn’t make much sense) so they can “blow out” the width of a mobile device pretty easily. The <code>overflow</code> property also doesn’t work on them. So you gotta find a way, and it really depends on the data. Sometimes a row of table data is pretty independently useful (imagine a row of employee data) so making all the <code><tr></code> and <code><th>/<td></code> element display: block and stacking them works. But that doesn’t work for data that needs to be cross-referenced. I think there are 3-4 other patterns that involve shuffling the data around to be more narrow-screen friendly. The old group of jQuery plugins <a href="https://www.filamentgroup.com/lab/tablesaw.html">Tablesaw</a> from Filament Group showcase some of them.</p>
<p>Lately, I find rather than dig around for a display-altering solution, people just wrap the table in a <code><div></code> and let that <code><div></code> have <code>overflow</code>. So now you’ve got a table that you can scroll/swipe around without really changing how the table looks. I find myself consulting <a href="https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html">Under-Engineered Responsive Tables</a> by Adrian Roselli on how best to do that regularly.</p>
<p>Ryan Mulligan has a cool take as well in <a href="https://ryanmulligan.dev/blog/full-bleed-table-scrolling/">Full-bleed Table Scrolling on Narrow Viewports</a>. The “full bleed” part means using the edge of the browser window. Which you might otherwise not! Typically there is padding on the left/right (“inline”) edges of content, which would also be limiting the width of the table.</p>
<figure>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_379,h_474,dpr_2/f_auto,q_auto/v1691245485/CleanShot-2023-08-05-at-07.23.30@2x.png?_i=AA" alt="An example of a full bleed table scrolling on a narrow viewport." width="350" />
<figcaption><a href="https://codepen.io/hexagoncircle/pen/ZEqjzKw">Demo</a>
<figcaption>
</figure>
<p>The blue line in the screenshot above shows the padding on the column of content, which limits the width of the content inside there, but the table is explicitly pulled out from it to the edge. It’s a little thing but it’s classy!</p>
<hr />
<p>Josh Comeau’s tutorial <a href="https://www.joshwcomeau.com/animation/pride-flags/">Animated Pride Flags</a> has lots of fun things to learn along the way of creating a controllable version of this:</p>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_326,h_240,dpr_2/f_auto,q_auto/v1691246232/CleanShot-2023-08-05-at-07.33.25.gif?_i=AA" alt="animation of a waving pride flag. " width="350" />
<p>Notice that <em>staggering</em> is a big part of the look here. That happens with slightly different values to <code>animation-delay</code>. Since Josh used React to created the DOM for this, the loop can output those values as inline styles and use the number of iterations that <code>map</code> provides to stagger the value.</p>
<p>But wait! Maybe CSS should be helping us here, rather than us having to invent our own way to stagger things, right? That’s what <a href="https://github.com/w3c/csswg-drafts/issues/4559">the sibling-count() and sibling-index() proposal</a> is all about. I’m a fan.</p>
<p>Josh’s tutorial basically just starts here and then covers more and more details. I especially like the bits of also stagging how much any given column “billows”, which is another use-case of staggering a custom property value. Also don’t miss the bits about double-stop color gradients and rounding width values to prevent awkward pixel gaps.</p>
<hr />
<p><em>How should I mark this up?</em> is always fun trivia. For me, anyway, I’m a very exciting person. Sometimes HTML has pretty cut-and-dry right and wrong ways to do things, but sometimes it doesn’t. There are differents ways with styling tradeoffs, accessibility tradeoffs, amount of markup tradeoffs, etc.</p>
<p>Lea Verou found a good one in <a href="https://lea.verou.me/blog/2022/07/button-group/">What is the best way to mark up an exclusive button group?</a> In other words, a group of buttons where only one can be active at a time. A multi-toggle? Lea, and plenty of other people, assumed that a group of <code><input type="radio"></code> is the right answer (only one radio button can be active at once), and then style them like buttons. I thought about <code><select></code> too which can only have one active choice, but no way are you going to be able to style that as buttons, even with the wildly more styleable <a href="https://css-tricks.com/the-selectmenu-element/"><select-menu></a>.</p>
<p>Léonie Watson stepped in with advice that essentially boiled down to: if it looks like a <code><button></code>, you should use <code><button></code>, so there isn’t “a mismatch of expectations in terms of keyboard interaction and shortcuts.” Interesting!</p>
<p>Lea thinks <a href="https://github.com/LeaVerou/nudeui/tree/main/button-group">maybe we need a <button-group></a>. Again, I’m a fan. I would have even kept <code><hgroup></code> around, me, for grouping multiple headers.</p>
<hr />
<p>Have you heard this (correct) advice? <em>Placeholders aren’t labels</em>. Like, don’t do this:</p>
<pre><code><input type="text" placeholder="Your Mastodon Profile" />
</code></pre>
<p>Do this:</p>
<pre><code><label for="mastodon-profile">Your Mastodon Profile>/label>
<input type="text" id="mastodon-profile" placeholder="https://fosstodon.org/@codepen" />
</code></pre>
<p>A placeholder can be a little bonus hint or something, but even then, if that hint is important it should be accessible text which placeholder text is not.</p>
<p>I’m thinking of that because I saw Stanko Tadić’s <a href="https://muffinman.io/blog/css-only-floating-input-labels/">CSS only floating labels</a>. Floating labels is a pattern where text that looks like placeholder text (text within the input) moves away from the input but remains visible. This has gotten a bit easier as of late with the <code>:placeholder-shown</code> pseudo-class.</p>
<figure>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_648,h_262,dpr_2/f_auto,q_auto/v1691249222/CleanShot-2023-08-05-at-08.26.27-1.gif?_i=AA" alt="Animation of form field labels floating when their field is hovered. " width="550" />
<figcaption>
<a href="https://codepen.io/stanko/pen/wvQoWdj?editors=1100">Demo</a>
</ficaption>
</figure>
<p>What I like about the floating label pattern is that it continues to use <code><label></code>, so the accessibility remains. It’s also just kind of clever and fun. What I <em>don’t</em> like about it is that I don’t think it does anything truly useful. I’ve heard proponents of it say that it “saves space” because the label is inside the input. But it’s only inside the input until it’s focused, then it moves out, and it moves out to somewhere where it needs to remain visible and have space. So……… why don’t you just put the labels where they move out to in the first place? Kinda feels like movement, for movement’s sake.</p>
<hr />
<p>If you haven’t tried to create a password with Neal Agarwal’s <a href="https://neal.fun/password-game/">* The Password Game</a> yet, you really should give it a crack.</p>
<figure>
<img src="https://res.cloudinary.com/css-tricks/image/upload/w_648,h_405,dpr_2/f_auto,q_auto/v1691249429/Screenshot-2023-08-05-at-8.30.10-AM.png?_i=AA" alt="Gameplay from the password game. The player has failed to meet rule 11, 'Your password must contain today's Wordle answer.' " width="550" />
<figcaption>Lol. And there is plenty to go even after this stage.</figcaption>
</figure>
</div>
</mj-raw>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:25px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#eeeeee;">
<p class="subscription-details"> You can adjust your <a href="https://codepen.io/settings/notifications"> email preferences </a> any time, or <a href="{{& unsubscribe_url }}"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="https://codepen.io/support">support</a>. </p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><![endif]-->
<div class="footer-bar"></div>
<!--[if mso | IE]></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>
Also see: Tab Triggers