<!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:479px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
.intro {
font-size: 16px;
}
.spark-item {
margin-bottom: 100px;
}
.spark-title {
font-weight: bold;
color: #505050;
padding: 5px 0 5px 0;
font-size: 18px;
}
.spark-item-type {
opacity: 0.5;
text-transform: uppercase;
margin: 0;
font-size: 11px;
}
.spark-desc {
padding-top: 4px;
font-size: 15px;
line-height: 1.5;
}
.spark-thumb {
border: 0;
display: block;
height: auto;
width: 100%;
outline: none;
text-decoration: none;
margin: 0 0 10px 0;
}
.sponsor-bg {
background: #333;
color: white;
border-top: 4px solid rgb(255, 116, 10);
border-radius: 14px;
}
.sponsor-bg h2 {
font-size: 2rem;
margin: 0;
line-height: 1.2;
}
.sponsor-bg h2,
.sponsor-bg p {
color: white;
}
.corner-header {
margin-bottom: 10px;
font-size: 24px;
}
.corner-intro {
opacity: 0.5;
margin: 0 0 15px 0;
border-bottom: 2px solid black;
padding-bottom: 15px;
}
hr {
border: 0;
border-top: 1px solid #999;
margin: 30px 0;
}
p {
margin: 0 0 15px 0;
}
</style>
</head>
<body style="word-spacing:normal;">
<div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;"><img border="0" width="1" height="1" src="https://go.sparkpostmail2.com/q/hPNVREIo90l5RIYrFywJKA~~/AABEfhA~/A_1zJbU9QMdx6U6ypiPn-qFassnjN6dsxInyxWcgg5kdo5EqHMmc2kGah-NWb8JL-ms4kJ5Wzs52rGHJp4kkSQ~~" alt=""/></div>
<div style="">
<!--[if mso | IE]><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" 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 src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=1200,quality=90,format=auto/codepen-spark/codepen-spark-header-2025.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" 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.5;text-align:center;color:#000000;"><a href="https://go.sparkpostmail2.com/f/a/8Quz6PJtbD3bhMtnujQqZA~~/AABEfhA~/DaSLcD88lP8LgNABiZKIl8uYLs2LLbEcF0qudEWlVSRpzuujRmdUW9Pc8-exag9daSD7IhJ_ujLHx5DnYtbvVDYaB1ryCTArzcZ7OzNVL6CCfd7NnYlXzHVpEFEIpETj" 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;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;">
<h1 style="margin: 0; font-size: 24px;">contrast-color(), SVG Shadows, and Superellipse Stunts</h1>
</div>
</td>
</tr>
<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:16px;line-height:1.5;text-align:left;color:#000000;"><p>This week's CodePen community highlights include an exploration of <code>contrast-color()</code> from Dave Rupert, an SVG shadow tip from Chris Heilmann, and mesmerizing animation built with the <code>superellipse()</code> CSS function from Zoran Jambor.</p>
<p>Plus, Adam Argyle fills us in on the 4 CSS features you gotta know in 2026, and the first CodePen Challenge of 2026 gets off to a strong start.</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" ><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: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" style="vertical-align:top;" 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.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/xbdLavGKGJQMUJPZWAHoPw~~/AABEfhA~/xUwmaiRy1rD1CQkhEOe8m_hmEVQvX9_RSgpGWM6_RTLMys3g1VuPxuqiBeFD64Bw0WL8Tz7YFIE26F3dKk4ou2WrLuaH5aceKsafl5SkQx0Z7JykTn10ofywIzI4Ljo5nUmt8WVrIjlAa71URfzbV2yIE97ZYHRnL7rMPgNMIMYGwNV9pI0u7F6Sgqz_yGLJ">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/4-css-features-for-2026.jpeg" alt="4 CSS Features Every Front-End Developer Should Know In 2026" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/xbdLavGKGJQMUJPZWAHoPw~~/AABEfhA~/xUwmaiRy1rD1CQkhEOe8m_hmEVQvX9_RSgpGWM6_RTLMys3g1VuPxuqiBeFD64Bw0WL8Tz7YFIE26F3dKk4ou2WrLuaH5aceKsafl5SkQx0Z7JykTn10ofywIzI4Ljo5nUmt8WVrIjlAa71URfzbV2yIE97ZYHRnL7rMPgNMIMYGwNV9pI0u7F6Sgqz_yGLJ">4 CSS Features Every Front-End Developer Should Know In 2026</a></div>
<div class="spark-desc">"2026; I think every front-end developer should know how to query scroll states, trim typographic whitespace, stagger with <code>sibling-index()</code>, and use type safe <code>attr()</code>." Adam Argyle ain't wrong! Give these 4 features a try in this concise tutorial, including helpful Pens and videos.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/wj5tK8M3ZkK8DC2M3jR1jw~~/AABEfhA~/OT7Td2fuh1l7ZArNSlbSRg5xcIxivlr0dIiUaqtEVlCAYxYsWvJ5wOkG6e_DIYbfMGtgKlheWvf-ESc4rYJC59u3oqa3gDbVXWVooJfhH9N9KGHwa0QDl-yA6tZNrIUWeXiHzM43f05FGaOZn1P3w81H1pVNZFqR2CCpXzIqa5fbEQgUR9ZSDfaFczMcFh3s0dTOksPBhFosyr2NDZAUwr0b4mHvTO_mXg-LUmdznhYxD1C8nXDqUSCbw-aPTu_x">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/irregular-shapes-shadows.png" alt="Adding shadows to irregular shapes in CSS with filter: drop-shadow()" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/wj5tK8M3ZkK8DC2M3jR1jw~~/AABEfhA~/OT7Td2fuh1l7ZArNSlbSRg5xcIxivlr0dIiUaqtEVlCAYxYsWvJ5wOkG6e_DIYbfMGtgKlheWvf-ESc4rYJC59u3oqa3gDbVXWVooJfhH9N9KGHwa0QDl-yA6tZNrIUWeXiHzM43f05FGaOZn1P3w81H1pVNZFqR2CCpXzIqa5fbEQgUR9ZSDfaFczMcFh3s0dTOksPBhFosyr2NDZAUwr0b4mHvTO_mXg-LUmdznhYxD1C8nXDqUSCbw-aPTu_x">Adding shadows to irregular shapes in CSS with filter: drop-shadow()</a></div>
<div class="spark-desc">Chris Heilmann show us how to make a shadow work for an irregular shape with <code>filter: drop-shadow()</code>, which recognizes "the transparent parts of the image or the shape of the SVG path and applies the shadow accordingly".</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/u5HSfoPi0Pew_wpRqHTzjg~~/AABEfhA~/fKZw4ECn7yBnGcvIVmZEdGXEYjO53D2ILZ2sFaY6GQ4vnw415078rSqmk7k5RCMw_sU6O2-I05RgZISssuGHRKvlieO0VpzYX0RELGW3k1skxuaCtVoNXzlRHYVWZMqNYBkafHPjx9JJQgZjYCoeWQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-press-start.png" alt="#CodePenChallenge: Press Start" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/u5HSfoPi0Pew_wpRqHTzjg~~/AABEfhA~/fKZw4ECn7yBnGcvIVmZEdGXEYjO53D2ILZ2sFaY6GQ4vnw415078rSqmk7k5RCMw_sU6O2-I05RgZISssuGHRKvlieO0VpzYX0RELGW3k1skxuaCtVoNXzlRHYVWZMqNYBkafHPjx9JJQgZjYCoeWQ~~">#CodePenChallenge: Press Start</a></div>
<div class="spark-desc">The January CodePen Challenge is inspired by video games. For week one, we pressed start on a new year! Check out the first collection, including Pens by <a href="https://go.sparkpostmail2.com/f/a/lOZjGzRtwZsGPod-2QS-vQ~~/AABEfhA~/sytGnVEktgMNt27ZtL0ckHqP-rYgrabZLfAntvfnCP8hcqsjN33-Xj1e8MoHA3sMMEDPyor0rgdTEEqxjyQtIN80BFdz5m4BAWRaZMDuP80LrFuMBGZfJWoYyfvZ1uI4SmA79cdmad7KT2d8ZNxMYA~~">Josetxu</a>, <a href="https://go.sparkpostmail2.com/f/a/nw7L55Zgha5M7uN7ymPe3w~~/AABEfhA~/s_dMkfb1Zt0B56spKdhcZZ7j3_1pDiySkQWdNApgPR7rhXbyTsXhHgi8CpjyLM8nOPOATN4BwNVe8UNaIvV76wbRmXlWXXnAVL11uOEAfsRf-D7AHWGcWhURl0oe1yV9TKskmqAkAj9y84ATlqqMDA~~">Hola Soy Malva</a>, <a href="https://go.sparkpostmail2.com/f/a/n78ri_UQHxPxlmNhNV7Iug~~/AABEfhA~/NZxucJEo1kyFYoS9_A-2o4aiWK7jg9fcA7jH0yApzYm3_Xufv5rYUqogYYJ6glF8vLDvD-fEXhoZkD1c7y9DsvTIDqTXsivKFT4ixLfkvGPepUxro5y69BvnhICkClVfaAYoti6WLcnbFqInkgIasQ~~">ikrprojects</a>, and <a href="https://go.sparkpostmail2.com/f/a/_OZorfuTTAztH-7AZEh6bw~~/AABEfhA~/NZxucJEo1kyFYoS9_A-2o8I6MmIp_qhoLpk8Fm9xx1B-A85xttufFmP0fml8g3vDaWY-ijKw22wifg4u1Uws6guDBqLzVHsAI8-SN28iU6L2znLchpvazf5tBFpimpNrn9nH_8NFatfbx6TneGb0vQ~~">Matt Cannon</a>. Want to get in on the game? <a href="https://go.sparkpostmail2.com/f/a/Uh8e-fngOHbwuGElBXZDMw~~/AABEfhA~/AaWMMOE0VYnf0uAZ28WIGEpHBpRAhTK9IRmXj2VgQMDbcznJ-pg7Xku6vVe6cXB0t81e9fc4zh9ogiUYrfLtJ1DSBhcdlWxCB0JhgxOgme2Z1jyj2Zy1BkdqIVOhBDjqh8QSviA92KM48WPJFUT4IA~~">Challenge week two is on</a>!</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/tAMRTPfov7ZRuYJwToqrbw~~/AABEfhA~/fKZw4ECn7yBnGcvIVmZEdGXEYjO53D2ILZ2sFaY6GQ63AKqpKZwo8hqmTKrDs7YpEiTxOPoxICc509B58ROEJJIqW1pYWj2sFkPxmnwrhO8QMe9ZmTmrq0TyhleNht2qvOw0E38R54TUJ7DiYV6BXQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/css-optical-illusions.png" alt="CSS Optical Illusions" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/tAMRTPfov7ZRuYJwToqrbw~~/AABEfhA~/fKZw4ECn7yBnGcvIVmZEdGXEYjO53D2ILZ2sFaY6GQ63AKqpKZwo8hqmTKrDs7YpEiTxOPoxICc509B58ROEJJIqW1pYWj2sFkPxmnwrhO8QMe9ZmTmrq0TyhleNht2qvOw0E38R54TUJ7DiYV6BXQ~~">CSS Optical Illusions</a></div>
<div class="spark-desc">Alvaro Montoro shares a treasure trove of pure CSS renditions of famous optical illusions in this eye-popping collection. This one is a real doozy in TV mode đ”âđ«</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/RPmBNh-3zFVF8uiHBL8IJg~~/AABEfhA~/NZxucJEo1kyFYoS9_A-2o0XBGS0s656CrORklCfw742mmAcc2Jf-SmcKC2dFc-YtTEn6hZQq6JOe9YqUBV4X_cwtXzgFShdHMNfaLRERtVzxG1bhP0nSs1smNuuq5rh2_L8I62m4WreQVZ_-ONNDwA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/genuary-lights-on-off.png" alt="Genuary #6 [Lights on/off]" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/RPmBNh-3zFVF8uiHBL8IJg~~/AABEfhA~/NZxucJEo1kyFYoS9_A-2o0XBGS0s656CrORklCfw742mmAcc2Jf-SmcKC2dFc-YtTEn6hZQq6JOe9YqUBV4X_cwtXzgFShdHMNfaLRERtVzxG1bhP0nSs1smNuuq5rh2_L8I62m4WreQVZ_-ONNDwA~~">Genuary #6 [Lights on/off]</a></div>
<div class="spark-desc">Click the square toggle to turn off the lights and watch the marble shape make its own light in this Three.js scene from prisoner849, created for the <a href="https://go.sparkpostmail2.com/f/a/okv5jMiWKueJMlMQFQnk-A~~/AABEfhA~/DMbA4sl5RXuzZxtLcH5Nrfm3L-MnaUS5-_9OocF_9HXJMbM9JcwUXFMgn0Hq-7gPynPKpwQ0ppPwUsIgYRYDQMbTXZxan8DxyLc7yERorp3L1scMLE1s6OGleoPDc3cIIcr28EEbfyxybV6wgN2ygw~~">genuary 6th prompt</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/Noqp5HRxgNAJm5pHx1xDAg~~/AABEfhA~/UpWKSP4AMjScHU22p743EzYxiKmloQe2dfZQMN5MbdIxT43jHjjfaV6E_wo6HzMjNVLklT3PxnlAO1TrbF8VYgYqu_vdsSj2j2zbYHrk1jl54LAuHl5clKKMaavxXux1yi8pk72PKFZVmi-BEJci9g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/old-cloth-with-wind.png" alt="Old Cloth with Wind" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/Noqp5HRxgNAJm5pHx1xDAg~~/AABEfhA~/UpWKSP4AMjScHU22p743EzYxiKmloQe2dfZQMN5MbdIxT43jHjjfaV6E_wo6HzMjNVLklT3PxnlAO1TrbF8VYgYqu_vdsSj2j2zbYHrk1jl54LAuHl5clKKMaavxXux1yi8pk72PKFZVmi-BEJci9g~~">Old Cloth with Wind</a></div>
<div class="spark-desc">A weathered cloth ripples in a gentle breeze in this Three.js scene from Sabo Sugi. Dig into the setting controls to change the image, colors, wind force, and tears.</div>
</div>
</mj-raw></div>
</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" style="vertical-align:top;" 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.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="sponsor">
<a href="https://go.sparkpostmail2.com/f/a/F-6XDyzQVMWvsrzLxQONWw~~/AABEfhA~/DliZQ123cPwI9qBkapc8u5zOY0csnpCJGCKtx81ar7q-fVH17H3BI4fYgnujtCB6LM06U-EXPkUGJZHVukdtKykMF9Fk4QlJw42Oe763BgpNV-ljqp4K70KZbhq83_mw871EwRCHeYup7mORR4TcJR6KFH6bLnWi7YpBJIdvAjvH9iC-G_tyRPKV5tvPUqEcCSw5uk9WseOqmSX_j9aJyn-E-WcOMyDwZ-ftUeD241f_vjK2G0t-lTy7AlgFZygNm1gvcFkGkRrEcct6HScoew~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/Redis_DigitalAds_OReillyReport_4_600x600.png" alt="Smarter agent memory" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/F-6XDyzQVMWvsrzLxQONWw~~/AABEfhA~/DliZQ123cPwI9qBkapc8u5zOY0csnpCJGCKtx81ar7q-fVH17H3BI4fYgnujtCB6LM06U-EXPkUGJZHVukdtKykMF9Fk4QlJw42Oe763BgpNV-ljqp4K70KZbhq83_mw871EwRCHeYup7mORR4TcJR6KFH6bLnWi7YpBJIdvAjvH9iC-G_tyRPKV5tvPUqEcCSw5uk9WseOqmSX_j9aJyn-E-WcOMyDwZ-ftUeD241f_vjK2G0t-lTy7AlgFZygNm1gvcFkGkRrEcct6HScoew~~">Smarter agent memory</a></div>
<div class="spark-desc">Designing memory-first agents isnât just smartâitâs cost-effective. Learn how semantic caching reduces LLM costs and improves response times.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/6LiDEsMd9daO9eoqt7vRLw~~/AABEfhA~/NZxucJEo1kyFYoS9_A-2o-VEKx2dMlj7IMV6DNl7bhjZYqDW9mav4L2v5srgXkGmeZz5GXrx_0W6YgND72WAiHFuiY6ma42U_jpIxZfS1HxkmCQ9R6Za1DWPVuskq5eOqFGRJYs1XohBwRB4HSSHyg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/mesmerizing-superellipse.png" alt="Mesmerizing Corner Shapes using superellipse() â CSS Only" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/6LiDEsMd9daO9eoqt7vRLw~~/AABEfhA~/NZxucJEo1kyFYoS9_A-2o-VEKx2dMlj7IMV6DNl7bhjZYqDW9mav4L2v5srgXkGmeZz5GXrx_0W6YgND72WAiHFuiY6ma42U_jpIxZfS1HxkmCQ9R6Za1DWPVuskq5eOqFGRJYs1XohBwRB4HSSHyg~~">Mesmerizing Corner Shapes using superellipse() â CSS Only</a></div>
<div class="spark-desc">What starts as a simple circle morphs into a kaleidoscope of shapes thanks to "random values for the <code>superellipse()</code> CSS function" in this Pen from Zoran Jambor. Click the "about" button for a mini-tutorial and handy resources on the <code>superellipse()</code>.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/MMTDDnUHNWKj8o5EpGg2Sw~~/AABEfhA~/dH3zHfjli8083LSE-Qc7TrE6u3LqHFJfbvwc1wxBnJD5ySeQVqiX_hfOxneCTJRtOrcX3yI3FqABc7V5nySXHG_AjzXU-sA4-jAoaDxNg919-QTvRO_zKCjmz4KP7gVXTl6YQtyt8lyFJZFsBsTsVxlS-2Zm5OpeR3TInhqqAmW2o2a0gt_LupBhir0X4EDr">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/algorithmic-hover-states.png" alt="Algorithmic hover states with contrast-color()" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/MMTDDnUHNWKj8o5EpGg2Sw~~/AABEfhA~/dH3zHfjli8083LSE-Qc7TrE6u3LqHFJfbvwc1wxBnJD5ySeQVqiX_hfOxneCTJRtOrcX3yI3FqABc7V5nySXHG_AjzXU-sA4-jAoaDxNg919-QTvRO_zKCjmz4KP7gVXTl6YQtyt8lyFJZFsBsTsVxlS-2Zm5OpeR3TInhqqAmW2o2a0gt_LupBhir0X4EDr">Algorithmic hover states with contrast-color()</a></div>
<div class="spark-desc">Dave Rupert's series of <code>contrast-color()</code> experiments begins with this demonstration of how it can help take the guesswork out of selecting an accessible foreground text color with the best contrast. Make sure to try out the embedded Pen in Firefox or Safari. You can find the rest of the series in Dave's <a href="https://go.sparkpostmail2.com/f/a/u6lQ2EPcFFcSvm7e1GR7AQ~~/AABEfhA~/9e-iuSngCONX9vPq2dQY9Ndc7kC9_wcpje6df0KakiXaHSSCbPfXEPbyKip2-CAWlNwvDbCMd_ltqT5jfmlNx9GW1GidqrDizm3GhTbliQJSSb16qqOCumjcBcNJVp8o">archives</a>.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/pMCOeTrukYdELZivTeM3kw~~/AABEfhA~/ZpVk-E1xa_6FxaCZ339I5EzkFHQXsXB8s6dYetaIG0L16smqZa5fglDDDkwKpLPKjtOsYgtBo8OdYhig4nawcsBJ3fvjfBQXjHX8W6CEaaGJ-HzipiR0sN11Ey5JBeYfvtaup7Ys-Ine6oWd5kEqlw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/hexagon-grid-afif.png" alt="Responsive Hexagon Grid without Media Queries" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/pMCOeTrukYdELZivTeM3kw~~/AABEfhA~/ZpVk-E1xa_6FxaCZ339I5EzkFHQXsXB8s6dYetaIG0L16smqZa5fglDDDkwKpLPKjtOsYgtBo8OdYhig4nawcsBJ3fvjfBQXjHX8W6CEaaGJ-HzipiR0sN11Ey5JBeYfvtaup7Ys-Ine6oWd5kEqlw~~">Responsive Hexagon Grid without Media Queries</a></div>
<div class="spark-desc">Temani Afif combines <code>corner-shape</code> and <code>sibling-index</code> for this forward-thinking hexagon grid (with options for other shapes, too!). Chrome only for now.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/4wJl8C0PVnLdCZAgF5MqoQ~~/AABEfhA~/TD1qHQV0NPMxOJ9h6orHjBD0RiUEPU-kfsIkGqaf3vrs_lLfpy_7Wv-MdDYlKAY4Z45eKgdCH2jvmlcotVV_ibxI0bXAEyG4LoqMdqnQy0yK0Gv_K5dA35c2IfbIs8UvrrmU-KQ6U_n7o45clcGgIw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/editorial-architecture-of-silence.png" alt="Editorial Layout: The Architecture of Silence" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/4wJl8C0PVnLdCZAgF5MqoQ~~/AABEfhA~/TD1qHQV0NPMxOJ9h6orHjBD0RiUEPU-kfsIkGqaf3vrs_lLfpy_7Wv-MdDYlKAY4Z45eKgdCH2jvmlcotVV_ibxI0bXAEyG4LoqMdqnQy0yK0Gv_K5dA35c2IfbIs8UvrrmU-KQ6U_n7o45clcGgIw~~">Editorial Layout: The Architecture of Silence</a></div>
<div class="spark-desc">Gemma Croad shares a beautiful article layout that makes good use of negative space without feeling empty. See more magazine-style designs in Gemma's <a href="https://go.sparkpostmail2.com/f/a/UK2yNzKn3hDxrpFor7cYAQ~~/AABEfhA~/fKZw4ECn7yBnGcvIVmZEdGXEYjO53D2ILZ2sFaY6GQ5UAUpD0ZaierCQOo3mzV3k6wNe4VjbjGiGvh1mFfygor8ZRQLcxw4kuXxdXLVP1uREwOLJMNtU-blFxz9vyOs8ezEwca9rrL1XIVvG3pxKAA~~">Editorial Layouts collection</a>.</div>
</div>
<div class="spark-item" data-type="sponsor">
<a href="https://go.sparkpostmail2.com/f/a/O1c2hMLuUnXcrRsB0WL_gA~~/AABEfhA~/EXeAv-WolUsh9H1WPQ6L5Uw6PlN-b-XptNODBdZ7JyHY_1x2MgwrG1Wh6hqsphoHLfqAfCUCcoUZpqGeAeF5OxtCIZvGU0Ecg6PzU12bGs2XkrXPfoLtRov_k8KmlfBrxi_e117Qga_z0laDX3z9U8r9ycDW5tVYAA8Cp09CEYkhj4dLB7QJ44--lU0RXBiNAbcS0xxWk_jaFxS1iZxgRg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/fem-2.jpg" alt="Functional JavaScript First Steps with Anjana Vakil" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/O1c2hMLuUnXcrRsB0WL_gA~~/AABEfhA~/EXeAv-WolUsh9H1WPQ6L5Uw6PlN-b-XptNODBdZ7JyHY_1x2MgwrG1Wh6hqsphoHLfqAfCUCcoUZpqGeAeF5OxtCIZvGU0Ecg6PzU12bGs2XkrXPfoLtRov_k8KmlfBrxi_e117Qga_z0laDX3z9U8r9ycDW5tVYAA8Cp09CEYkhj4dLB7QJ44--lU0RXBiNAbcS0xxWk_jaFxS1iZxgRg~~">Functional JavaScript First Steps with Anjana Vakil</a></div>
<div class="spark-desc">A friendly, practical introduction to functional programming fundamentals in JavaScript. Learn the power of the pure function while exploring functional programming paradigms.</div>
</div>
</mj-raw></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" ><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" style="vertical-align:top;" 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:16px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<h2 class="corner-header">
<img src="https://assets.codepen.io/t-1/chriscorner.png" style="width: 65px; border-radius: 4px;" /> Chrisâ Corner
</h2>
<p class="corner-intro">A collection of web design and development news and thoughts from CodePen's own Chris Coyier.</p>
</mj-raw>
<h3>Type</h3>
<p><a href="https://go.sparkpostmail2.com/f/a/tPgwoMfZ75iAA6mxD0snvQ~~/AABEfhA~/GPfHioB-qGrIh1csb6Y1sQtejmOpx_lcKtNQatspbwSqNCHLM1VBEBp6j_Mqd5W2WJTn6OlpVUGwmf-Y1ASRg1pASlsRSiSnAmybNwKJnF62IMic-WSqCno663Td5qD12R2U3JAxBwuybYdTB4ap-k-ib239akDrvAu16JzCwBI~">Jake Archibald writes that we should just <em>not use</em> footnotes on the web</a>. Not use footnotes?! I love a good footnote. Or at least, I thought I did. Itâs where you can stick some information that provides a bit of extra context, but would be distracting if smashed into the main text. They can even change the tone, like how you can insert a joke where it might not work otherwise.</p>
<p>But it would be hard to read Jakeâs full-throated argument against them on the web. They really do jostle you around the page awkwardly, simply because of the nature of the web and typical designs. Jakeâs âjust use some damn parenthesesâ is slightly tongue-in-cheek but not without merit.</p>
<p>Personally, I like the ideas that take more advantage of the unique powers of the web. Specifically the alternative that is:</p>
<ol>
<li>An <code><aside popover></code> opened/closed entirely with HTML attributes.</li>
<li>Positioned with anchor positioning</li>
</ol>
<p><img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/example_popover.png" alt="A popover 'footnote' tooltip on hover. " width="400"/></p>
<p>Color me a fan. <a href="https://go.sparkpostmail2.com/f/a/b1GWuKAewWvlCzIFjVwAKA~~/AABEfhA~/s-rOTCbS-CLWJwEdrT50PMSuEVVTXJP66eyiU_G3Tk5fUFjeyT5g8XTVwGANPn13X7d2PKELQygcvOsgEsx9peqWQo7fKdNSuo_6S9jFUxpmjfC-KfuBUS1Z23fv2LXw7HYmnDczFiLLM007-WB3rwjbOKELqJYIqs073exWVWbweD9_VeMhTS8kG1YF1xK4">Tooltips are the perfect use case</a> for this technology combo. And a footnote can totally be a tooltip, <a href="https://go.sparkpostmail2.com/f/a/VXDW1E7SJpzT9dtpcwPPLQ~~/AABEfhA~/AbzIzF5hiqr7ZjSGvIvcRpIAOYUqeKjL5-5oRsxCabeMpYrfSr16VJ0YH8-djCz2sMTxYM0hYMdDLj0jwpgOzXOI6Fb1kBrFUu0SBek1jMwQOf9bMZTBHyJXd9-sbOcBXmxVQ1IzjT_jz-LgYUxVnjb28AajNBatET27hTjLyFtMoiWl_9tLS0Udr8yK7Y9t">as can a menu</a>. <a href="https://go.sparkpostmail2.com/f/a/XH3Sr7JLKTnxMCrAQZy0Qg~~/AABEfhA~/s-rOTCbS-CLWJwEdrT50PFD-UB6zRQiYjETtpZZZdZUElnYHULQkt1TDc6knEo1Tx4X85fXSLSV6R7komjQwuethkuEUpE0rb-lYKJrzdxKSnBJxH9y7I5y5BNzkEIrSCRbtPWlhagBIjBlfRu-SNUt55nyiOKw_zpz_4y-IgXZ1ufTo2jlQVmETD-hKGl5F">Sidenotes</a> are nice too, if a design can pull it off.</p>
<hr />
<p>While weâre doing type stuff, Kelly Choyce-Dwanâs deep dive into balancing type across languages is excellent: <a href="https://go.sparkpostmail2.com/f/a/foiYrdB-feC-VugsQ1SuBg~~/AABEfhA~/xUwmaiRy1rD1CQkhEOe8mypf1wGZcUlVxjCnuL3ARbCg6ixbJpiQx0WJQ-WiClNHHH9diWTclwPSCVEeql-kEtrHEn3CMVYIb0DTcS0JDGEZjJuGgsMnql_S0TmSGkBFES4q2KnbS0A5xM4ahJi6svcC0jOYbfYVgQET43Gr5ijpeIJW6spHdlIM9DtlpAIC">Typography troubles: Balancing lines in Japanese & Korean</a>. Iâm perfectly guilty of looking at new CSS tech through the lens of setting type in English and getting excited before understanding the non-English ramifications.</p>
<p>In this case, as nice as <code>text-wrap: balance</code> can be sometimesâŠ</p>
<blockquote><p>When working with multilingual text, line breaks donât always behave as expected. For example, we added <code>text-wrap: balance</code> on WordPress.org, and quickly got community feedback that it led to awkward, unexpected breaks in Japanese and Korean.</p></blockquote>
<p>Which, yay, has a fancy solution using an <code>auto-phrase</code> value Iâve literally never heard of:</p>
<pre><code class="css">h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
&:lang(ja) {
text-wrap: initial;
@supports (word-break: auto-phrase) {
word-break: auto-phrase;
text-wrap: balance;
}
}
}</code></pre>
<p>Make sure to click over to the article for the Korean fix.</p>
<hr />
<p>Have you heard of âfaux boldâ? Or âfaux italicâ? Itâs this (kinda nasty) thing a browser will do to characters in type when youâve <em>asked</em> for the bold or italic version of a font, but you havenât actually loaded that font. So the browser is like <em>fine Iâll just do it for you then</em> and it, without exception, looks like đ©.</p>
<p>The solution, if youâre loading up custom fonts, is to ensure youâve got an <code>@font-face</code> rule that covers those <code>font-weight</code> and <code>font-styles</code> before using them. <a href="https://go.sparkpostmail2.com/f/a/Cufd4QNYowqy4oMddExkeg~~/AABEfhA~/Fodfr_gKQpeqc8QIm2p4_h0mPB7iRl2v6MznRjBfaYKBrwZjOh921gAJSVwpCp7bfO7AgUZfHdSYQFKR03ucaXOM-U6doEj5PZ6JFWJGYB7mcb5Fdbptm4CJROsJClOk">Richard Rutter has a good blog post on this</a>, which includes a nifty trick for detecting if youâre accidentally doing it wrong.</p>
<pre><code class="css">@keyframes flip-synthesis {
0% {
font-synthesis: none;
}
100% {
font-synthesis: initial;
}
}
body {
animation: 3s infinite flip-synthesis;
}
</code></pre>
</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" ><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" style="vertical-align:top;" 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.5;text-align:left;color:#000000;">
<p class="subscription-details"> You can adjust your <a href="https://go.sparkpostmail2.com/f/a/tqt1FSDYQz1Rlfrh4tM3YQ~~/AABEfhA~/TD1qHQV0NPMxOJ9h6orHjOItomf_RAoWGtTZN7rlxFY_dsCZvGS3iiUsn5Nn-ONhvK6qy4jDRto4V8kwv_iv3iwTDGEypKPnp4ZjHPdtFhStehV2nuBU2ZWnissuHgnorXzWDP-yZkDkkWugFPU4YA~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/58Ujs6k7dgWwiIBQNcnMTQ~~/AABEfhA~/m8PGLOncn-ITdPOZWX373ZiCNM59QPQPwIPldUOWfNH0mxG5hv0JKQnVd0ER_1jFHq5o5byX1aWBgFLRDujh2tcLz53FmtQ5N_sf953ri9Q4KHvT9ekF_b_gthn1EDKIxtBgh4W5vnMwjrl0Ewdlu5ZD7m8rNj9597X9ruNNhw_F6C7LvMXZF0wdvJyRctpHat-cSlM9AU8renDzMppsfuV3greolSp7sPB4GZAVbqFUZWriLekt53Yvxpjmvr0_nXDwm5ZoL1s22fxBXr07KLocybW3sbHy1TTDzBW4fPfms_hK5gfq8S9cBb5M3huq-Sgckj0qQVzR4GCFoFKjScfRerCTAjpguMiqLeHyK1U~"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/AsQAol4rcTSyIGKmcy8wbw~~/AABEfhA~/ipjhSClJRPOA9HTnm0LG1RgqnY7y88ZKMSRFnoaAStIZ_Tlc-riWGshFv-LK0YnMMBePAKBIKMA6qoB7Y1PsV1Cf7CQLSwH5srpipaD1sGtURkOO7FJXJxBYQpExyxno">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/lC5vbG1O02RDzWva4dq9yA~~/AABEfhA~/DaSLcD88lP8LgNABiZKIl2wi2_d05EKRtx78L3KtlVQcSqijKEIxG2Upca0s_4ecr5hWfV_7_EkdyTNkNFsppTKJxnAkUGGoPOX3FHu5z-SqloFs6IqTmA5oindI9vJv">sponsorship info</a>. </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><![endif]-->
</div>
<img border="0" width="1" height="1" alt="" src="https://go.sparkpostmail2.com/q/AEZINd-RLr9wRL4fwNMKLw~~/AABEfhA~/JjfbpzFnO2tj_q0HjPLyd9merXonHDnpMAt13NB04Q376VlJVOqBMP1JECP68F-w84kewc-dD8z_aBqokcuCtw~~">
</body>
</html>
