<!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/124V8EcGunaKYryRVoZ4Qw~~/AABEfhA~/cb2lx3gBHwf1KSwmxHb5RRMcYeBZWf1UXTNWUECJVAAjUigEcPwOOSm564k4fZHXNLTjPuPBJ9dhWdfN4Zp0vg~~" 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/Q7-tBpVvqHDvSI4F5-4NjQ~~/AABEfhA~/OP-dJbfVuVJScrPR0IOA_KoOEMAPXkzOvC3m5e5kutcXLAD6DAWTq1dIBDC63tarDucrnEjYIrQQs2iF1L2TpG5F8lGbPNB28f2Bi4XwTgz6fRWoItmd3fh56JuvHJoH" 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;">Anchor Positioning Reflections, CSS Illusions, and Clip Path Squircles</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 anchor positioning and gradients from Kevin Powell, a pure CSS optical illusion from Amit Sheen, and a cross-browser squircle solution from Temani Afif.</p>
<p>Plus, Chris Bolson wows us with a spectacular custom select menu, and Antoine Villepreux shows us a cool trick with <code>sibling-index()</code>.</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="pen">
<a href="https://go.sparkpostmail2.com/f/a/s4b5fg1uZW6F2md9wUuKJA~~/AABEfhA~/9saJ5Epah2LZsRfpIyeclNXzWm_3Yaku4pCqiJU1bpuoFRFAQYimPoCoccSJcbgUHgMPyYIg2NkS0jUF2gWDWc0LVe_36nU5ElcwlHWX1jhtmK5vHUxFjz1YJi7YCz09wyrOpqlJsa09oacNNw5WqDz_n5m7cv-CLS0fWLxKdxJmpiXacvhlkjUbE2u4mvX5">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/2026-f1-drivers-bolson.png" alt="2026 F1 Drivers Custom Select" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/s4b5fg1uZW6F2md9wUuKJA~~/AABEfhA~/9saJ5Epah2LZsRfpIyeclNXzWm_3Yaku4pCqiJU1bpuoFRFAQYimPoCoccSJcbgUHgMPyYIg2NkS0jUF2gWDWc0LVe_36nU5ElcwlHWX1jhtmK5vHUxFjz1YJi7YCz09wyrOpqlJsa09oacNNw5WqDz_n5m7cv-CLS0fWLxKdxJmpiXacvhlkjUbE2u4mvX5">2026 F1 Drivers Custom Select</a></div>
<div class="spark-desc">Hot on the heels of Temani Afif's <a href="https://go.sparkpostmail2.com/f/a/iBspiW9SjGs48dpL5xKRSQ~~/AABEfhA~/yuxrpEPoBrucdKtQtrN8b-xQgczQLYO9yRkVZqE8tnEBrsqGyPUtr7bYM9cIYQCEzL5bQznicHwC9Q-wV2SyrJfizSMuPlHyYTEDEjzdD97OaL_D889s5cPWaMwcVWGRwCewLpbtRTW8wptlp4zFGA~~">fruit shooter</a>, Chris Bolson uses <a href="https://go.sparkpostmail2.com/f/a/b2hzMYTR4uAYjcqvxusDzg~~/AABEfhA~/VF9fu8uHqEruXzyVnK4XPjIFjEMxUs24nH00I90vvAlJJDfNplsJps9Nn3bImId3Uz9_rKAaLJbeu6IsQ2gwOtjs-RIu1S-roNa1KJHkW9RL41zgQmBfhCl6xyVGhpVtzN8aJKV6jRJUNOTSaqFJECCmk8gqgPvaHeqnp4W213Y~"><code>appearance: base-select</code></a> to create a stunning custom select menu with just CSS. Best in Chromium (for now).</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/XvKctgDjfZR4zX0hDADt_g~~/AABEfhA~/fA1gbAPThl242o56XkuDSTMGuOC_Td37SZumbilU-aL20rcreayevT14N4ukRKhfQUuplOqaSxP8PZX9782IqbF9v7uWmN33cYp8hCaxHXNRM5_s8aKKKbsGbo-LSiAIzctZnVJO1dymRX0izKFjNQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cool-villepreux.png" alt="Cool!" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/XvKctgDjfZR4zX0hDADt_g~~/AABEfhA~/fA1gbAPThl242o56XkuDSTMGuOC_Td37SZumbilU-aL20rcreayevT14N4ukRKhfQUuplOqaSxP8PZX9782IqbF9v7uWmN33cYp8hCaxHXNRM5_s8aKKKbsGbo-LSiAIzctZnVJO1dymRX0izKFjNQ~~">Cool!</a></div>
<div class="spark-desc">Antoine Villepreux uses the new CSS <a href="https://go.sparkpostmail2.com/f/a/2F5fUQtBfmbTuiRg9OT82Q~~/AABEfhA~/snpplVH3gR-EnZZAIVyeJAFmnnU2maxYW3WZ6Q_WQ7ZZq8-_NW6pIprmkfefqCXNVSManbR3_xbT4iOwM2tIE3XWyYsH9P_qmdWENYlft_xZRxJqeb0S9fh7E2P6e7y8BQTqlT4HDGgvD1R5BDHrxQU_Fn0QJhSjK_9e2MO2h6g~"><code>sibling-index()</code></a> function for 3D positioning in this fun text animation. Cool!</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/AuiRC3lmKZuq3K161xGWhA~~/AABEfhA~/jN9FxpOA-iTWoT-zR7iD1vL2W068Wdzho_lodfqMxstsSq4Wc8RdKEWpZNuRcH-fl1cVldBVi18LPkOhf7wkwIvQFEV4yz3H_tkKGbdEJsT17f4vi1dv4OLghCvg8xmWTnGk2_pjYmR1H1Z9liNqlw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-before-after.png" alt="CodePen Challenge: Before & After" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/AuiRC3lmKZuq3K161xGWhA~~/AABEfhA~/jN9FxpOA-iTWoT-zR7iD1vL2W068Wdzho_lodfqMxstsSq4Wc8RdKEWpZNuRcH-fl1cVldBVi18LPkOhf7wkwIvQFEV4yz3H_tkKGbdEJsT17f4vi1dv4OLghCvg8xmWTnGk2_pjYmR1H1Z9liNqlw~~">CodePen Challenge: Before & After</a></div>
<div class="spark-desc">The March challenge is all about opposites, and we kicked it off with Before & After. Check out our collection from week one, including Pens by <a href="https://go.sparkpostmail2.com/f/a/z1jFonO020iJWvk4ZvzfUQ~~/AABEfhA~/HfyCA-k0x0C1wIvPS0oWdkFVBhlI64vSMd873ZCp_ytOlVuwXrb-_Bb5akB57x1UjppC0mE74M_-zkwoeMFRicuZbNo-FgicwGeStEyyW4yUrL5qZ6prl4-rNywjHm-eoiKGWkpDVJPThy6ChlNwRA~~">Sultan K</a>, <a href="https://go.sparkpostmail2.com/f/a/lHqPwhD_FRdzDKmQxjbzZw~~/AABEfhA~/qrOnBpK3Yjp6p2rhdzqsXhZpPwFFG6ypzpuL1J1kcJ7vPJQpuQKOByGiQcFiceXA7o1--SBivnaB4-Ka4FDlGh_lLSOTv0PeF5Spw3r74Wt6s76bzzpAqv-0xlfWQxAbSSBPqj9onxEiFT7Hcqf6xQ~~">Toc</a>, <a href="https://go.sparkpostmail2.com/f/a/QCl7C0bXKZJCUStjXF8T6w~~/AABEfhA~/e6zFd8qetczyznFke_8n9Mw1k-_ait7zQepRKW_7R4ubH5zyn3cnAKdMvTuSPAbpFfquPBkJ8sJolennvcby2uEuF2N5eWGlB7D9Gzy7TG2oYqQT7b7jlTGzAAtxZGEE6HR3m3i3Rq5L1HCN4GQvXA~~">Alansdead</a>, and <a href="https://go.sparkpostmail2.com/f/a/VA6pidSY0NozDxt1JYG82w~~/AABEfhA~/qrOnBpK3Yjp6p2rhdzqsXlG-Jxt2dU4O_qR47S-Pssts09n2kWIJcDN8ixPRNkfO-YymTWzft_t3Ls2YAUa5LNf5mOUIT7rOKbFPe39tpIKRohRtzY7o7yvpa3EFPGO2P8EvWas-E96gn7b7y-bX9Q~~">Giedr Ju</a>. Want to get in on the challenge? <a href="https://go.sparkpostmail2.com/f/a/nhBAdFHaEoYweeYRet8dgg~~/AABEfhA~/YgmXp5tDOL5F29A3ZZo_dxvkvfJmUrMOlK6J8Yz3ZTwhCaQC09vldcjybrdtiQDwyZWCacBZSCugsw_G9sW1lcT_HH4bm6_hQUQqakCuENU1PbxklD0fm1c1ePDlgxZyx1LXJGnyewqaSs12FaP5QA~~">Week two is on now</a>!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/VRIkP_rKMXQiG-OzzL0B-g~~/AABEfhA~/dgccVyKcintbyrrb2GL6BK8ED3_6lpvGyHzDQGTmdHrY7RFwgh_qqffgbTuyxrjTlU8qhKYj-JDcTfWn1PhtE6S0Ekk-3WIo5vek4SIKDt59NrbyQUbRZYFK775iJZGS">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/squircle-shape-clip-path-shape.png" alt="A Squircle Shape using clip-path: shape()" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/VRIkP_rKMXQiG-OzzL0B-g~~/AABEfhA~/dgccVyKcintbyrrb2GL6BK8ED3_6lpvGyHzDQGTmdHrY7RFwgh_qqffgbTuyxrjTlU8qhKYj-JDcTfWn1PhtE6S0Ekk-3WIo5vek4SIKDt59NrbyQUbRZYFK775iJZGS">A Squircle Shape using clip-path: shape()</a></div>
<div class="spark-desc"><a href="https://go.sparkpostmail2.com/f/a/RCwwA6f-_2Km_Ul_5c3nIg~~/AABEfhA~/snpplVH3gR-EnZZAIVyeJAFmnnU2maxYW3WZ6Q_WQ7YiQO1exqa9kK8i5WOJXl7M2j945sKrsUKvVQ2yKLQAqPPeLUEhJ-rtvnKGKlXAntvgPwNIpkf3ncluFwVVaPO2CfQ5xDdz1y8Yk8dbXb1Pq72WDBYlfPwFTvZBaQBTbZM~"><code>corner-shape</code></a> is great, but it's Chrome only for now. But <code>clip-path: shape()</code> just went Baseline, and that opens up some possibilities! Temani Afif shows us how "we can approximate a squircle shape using <code>clip-path: shape()</code>. A flexible implementation using CSS variable to easily control the radius."</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/MwCJOXB1IA5Rz8CUdJFlBw~~/AABEfhA~/f1pJ2dBUT4KCDnpU4TGLAT9YZlucgVE1LfeEx7n1M8h8-jVt9L6_SxpIq9H8U2_VXJyZUjBqmKiMM1LnpyMPgpY5jpYmMf7LfHm6YpWdEfMgnDzv09u-FxnkxvOR7ykD5iz-l5vcmy8huUxwbVGB7g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/loader-motion-adir-sl.png" alt="Loader Motion" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/MwCJOXB1IA5Rz8CUdJFlBw~~/AABEfhA~/f1pJ2dBUT4KCDnpU4TGLAT9YZlucgVE1LfeEx7n1M8h8-jVt9L6_SxpIq9H8U2_VXJyZUjBqmKiMM1LnpyMPgpY5jpYmMf7LfHm6YpWdEfMgnDzv09u-FxnkxvOR7ykD5iz-l5vcmy8huUxwbVGB7g~~">Loader Motion</a></div>
<div class="spark-desc">Glowing dots leave a luminous trail behind them as they split and spin, creating a ghostly circle shape in this CSS keyframes animation from Adir-SL.</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/hiMeqB4mqgjW7xC9a0vyuw~~/AABEfhA~/KArl1hRPtM269MeXutaflx3HNIB7yWVtBXRd4O6jAAoq_jkCHerh5HKUln3U9i-MogQNS8eeZZbZ-lNIIGHyAlKya2y7E0sXk_kqUGKfzvcI9HYGaWhtwwuKV8zDB4yNY0XT6HKWWFeELQddjgTfhwBlGgfE0nxxeZrgyDwBEJLObVB8Z6GaYUTocC7ZPeNs5Z7PS2GB-m3vYu251PkBmFsl3UZdch1FgFvCqEIgZ2pVnBNeITyS9app4JoCsDdH1rzb__pcwgwHtqQxtuBJqQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/stream_mar926.jpg" alt="Ship In-App Communication, Faster" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/hiMeqB4mqgjW7xC9a0vyuw~~/AABEfhA~/KArl1hRPtM269MeXutaflx3HNIB7yWVtBXRd4O6jAAoq_jkCHerh5HKUln3U9i-MogQNS8eeZZbZ-lNIIGHyAlKya2y7E0sXk_kqUGKfzvcI9HYGaWhtwwuKV8zDB4yNY0XT6HKWWFeELQddjgTfhwBlGgfE0nxxeZrgyDwBEJLObVB8Z6GaYUTocC7ZPeNs5Z7PS2GB-m3vYu251PkBmFsl3UZdch1FgFvCqEIgZ2pVnBNeITyS9app4JoCsDdH1rzb__pcwgwHtqQxtuBJqQ~~">Ship In-App Communication, Faster</a></div>
<div class="spark-desc">One platform. Fewer integrations. Faster launches. Trusted by 2,000+ global apps like Strava and Patreon to power their in-app communication for over one billion end users.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/yVqrr5idr37YDJfRzLjXJg~~/AABEfhA~/PJrFLD4ntAS2mq5Jf6TQ5qh5FFKrrD_1QS1DdlBFhV2QzlRW7U5bMv96YWdZ0DXxsoKEcJXOGr4Z_eEI0OwZ6cbIdnYer-gv0DfZJ1t26lJL96TqvaEUy6H5Rqb6u5BYrbeDWR6OlNBGh3GM-ibtKMjdGyMtEG8V34Vw9RlenvqOYTjLIUyYv1-vwL9iWs7e">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/optical-corridor.png" alt="Optical Corridor (CSS)" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/yVqrr5idr37YDJfRzLjXJg~~/AABEfhA~/PJrFLD4ntAS2mq5Jf6TQ5qh5FFKrrD_1QS1DdlBFhV2QzlRW7U5bMv96YWdZ0DXxsoKEcJXOGr4Z_eEI0OwZ6cbIdnYer-gv0DfZJ1t26lJL96TqvaEUy6H5Rqb6u5BYrbeDWR6OlNBGh3GM-ibtKMjdGyMtEG8V34Vw9RlenvqOYTjLIUyYv1-vwL9iWs7e">Optical Corridor (CSS)</a></div>
<div class="spark-desc">Amit Sheen draws inspiration from optical artist <a href="https://go.sparkpostmail2.com/f/a/UQ4VadkXtPmL8PXMx3rwOQ~~/AABEfhA~/snpplVH3gR-EnZZAIVyeJBT5uXyRcGyznG9Qf43tB8m-YJuaGZLWkgYQdA73-lkHFvowndxHnDOJbenociLIRrcn8RJ-be8exmaBbVtzj5dcaXwmuyTuVH7Cgma-g2UqM_6Pz6Bm2fd3s-KiG9ReV98jxESIDupict3wdYc1HNo~">Akiyoshi Kitaoka</a> for this mysterious pure-CSS corridor. Hover around to manipulate its position and explore the illusion.</div>
</div>
<div class="spark-item" data-type="video">
<a href="https://go.sparkpostmail2.com/f/a/Gm4Utw77-kPtWmBmZYmyUA~~/AABEfhA~/lmKThPDPVfz7MgRTobUlVTEDkoEitCZN28QxMlZtau1igY8HEV4z44AK5elxIt6AJ4V3dYbThk578Vh5s0K5ooqLXU2bPaY-pdOsH-uhZ8AvSNTPVn0oqUm6mdY8rLqCa301-2ald4ANC7WabhfqiA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/reflective-glow-powell.png" alt="Creative a reflective glow effect with CSS" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/Gm4Utw77-kPtWmBmZYmyUA~~/AABEfhA~/lmKThPDPVfz7MgRTobUlVTEDkoEitCZN28QxMlZtau1igY8HEV4z44AK5elxIt6AJ4V3dYbThk578Vh5s0K5ooqLXU2bPaY-pdOsH-uhZ8AvSNTPVn0oqUm6mdY8rLqCa301-2ald4ANC7WabhfqiA~~">Creative a reflective glow effect with CSS</a></div>
<div class="spark-desc">Follow along as your front-end friend Kevin Powell combines CSS <a href="https://go.sparkpostmail2.com/f/a/CNq0MLNv8A_K3sCywSnozQ~~/AABEfhA~/ASs7Tgv23EJTJs8bkRCpvCOPZNi_LhiGiAK2tYcIJTmLs5iiarSli2tQG9N3B6Uaf9UKGVnOpA8jdtw219TsvHAHq_oqoxAsvV1NxY4wb_2cQDdUmVa2VVb-tLR3WS0dp40BrfKC2cb95nJhMSV9Rg~~">anchor positioning</a> and gradients to create a reflective glow hover effect on menu items. Kevin just passed a huge milestone — 1M YouTube subscribers! Congrats Kevin!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/nNY4dSjtu4AY8jxqtQFKLg~~/AABEfhA~/qrOnBpK3Yjp6p2rhdzqsXsHYKqHxU34u-cyjULI4cgC3mHuSXZsw-OL-ys8ZbMQrJddkDmx37UoejtKZEhgp3nUhVwzGLzxpYgfr60htyK-FcScc5dhXnQO8ECHPR9HEjO7-6ZUKhuIqy2_k9Aamzg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/deco-tile-pattern.png" alt="Deco Tile Pattern" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/nNY4dSjtu4AY8jxqtQFKLg~~/AABEfhA~/qrOnBpK3Yjp6p2rhdzqsXsHYKqHxU34u-cyjULI4cgC3mHuSXZsw-OL-ys8ZbMQrJddkDmx37UoejtKZEhgp3nUhVwzGLzxpYgfr60htyK-FcScc5dhXnQO8ECHPR9HEjO7-6ZUKhuIqy2_k9Aamzg~~">Deco Tile Pattern</a></div>
<div class="spark-desc">pjkarlik uses <a href="https://go.sparkpostmail2.com/f/a/xleofxVKClwrwfKnaZgiGg~~/AABEfhA~/uh-qq8JBcCHWdYOKswcqDHGAKAsp_YvgrtgXB66YpQEnjWjCxtP66nQIILMb6ApRM0QErCvdICDXCEG80wWHKg1bKeohhk4B1v79qD-TcPLyEahFbaYbnhbCOmMENX8fFXq-ra3cJsUOnynUzjmu7htzi5y0zOlkGrglFalqkVM~">Log-polar coordinates</a> to craft this kaleidoscopic WebGL tile pattern. For a whole lot more trippy stuff like this, be sure to check out his <a href="https://go.sparkpostmail2.com/f/a/pasPEmoZ_RZcke38zqIzbA~~/AABEfhA~/UAc_O8MbjxbaOzeUBOXvHqAGrSz6tEBRKZQ7jgCakzbIXmHDWcl7RULvLLrSqoiPSmHlSKEmsdntmhli9pwic-EDIGSTkRV-KbSqMc-OPiAB-sDLKyXFgdvITjYValzg">CodePen profile page</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/1Mu5pZU48C-spZNzHp5_Tg~~/AABEfhA~/qrOnBpK3Yjp6p2rhdzqsXmvheBKSZ-x2k4cvVz9ig6sNlZbJKmF84ZD91IGM4cCRfQsrKbZeqamyu9-AkO_T8Zl4u9BoD9TH0UXDSRL3IfDfcYxMeRsYYY9b2dNJrDPsaA7r6crw_MXFXNh7dPjZPA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/stream-images-with-wind.png" alt="Stream Images 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/1Mu5pZU48C-spZNzHp5_Tg~~/AABEfhA~/qrOnBpK3Yjp6p2rhdzqsXmvheBKSZ-x2k4cvVz9ig6sNlZbJKmF84ZD91IGM4cCRfQsrKbZeqamyu9-AkO_T8Zl4u9BoD9TH0UXDSRL3IfDfcYxMeRsYYY9b2dNJrDPsaA7r6crw_MXFXNh7dPjZPA~~">Stream Images with Wind</a></div>
<div class="spark-desc">A flurry of leaves stream across the screen in this JS canvas Pen from Sabo Sugi, but if you open the controls and upload your own image you can make anything fly across the screen. Try playing around with the gravity, turbulence, size, and speed, too!</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>
<p>As of January, with Firefox 147’s release, Anchor Positioning is supported <a href="https://go.sparkpostmail2.com/f/a/CNCA14UO8_XbFLBK2-1laQ~~/AABEfhA~/YgmXp5tDOL5F29A3ZZo_dx-Goe4rACa8XbddPlG95CxV9sKSAQCHxAOi5nEzth9JcoAJ75KAh5gsgQ7kXJmlmvTBB3ruMEbpNei6qWWfn7xJOnUXZpGZo27dWZONYzF9wXclmnreVYOK-1ZFXIXKrw~~">across all major browsers</a>.</p>
<p>I’m happy about that, of course. I think Anchor Positioning is really powerful and a layout mechanism we probably should have had a long time ago. My enthusiasm was tempered when I found out how finicky it can, simply <em>not finding</em> anchors for reasons you have to be somewhat of a web expert to be able to diagnose and fix.</p>
<p>I wrote all this up in <a href="https://go.sparkpostmail2.com/f/a/5G-itqOknh6OKtNlgoxzrQ~~/AABEfhA~/IwXxb4ALIM7Xec_w00To8k5xREsaWjgBpaOoEPijTf_OK1Lz3yVadpOa3f9HzuYpUseuVl32wv40fSUL06DdRNwJ3x6c5Vz5Gm-IHxA4JKEXownTTqLvbKXiWWviILlCZG9ypXD_lSEbew1EmOI-6hQuXS0rnF15pMMWAi8PCT4iKPDBdTSJY0lKkF329RJL">The Big Gotcha of Anchor Positioning</a>, which is something of a rant as if I can be a squeaky wheel that helps makes this better in the future, I’m happy to do it. There are some better articles on what is actually going on and how to deal with it:</p>
<ul>
<li>Temani Afif: <a href="https://go.sparkpostmail2.com/f/a/hXaqjhj5ILzKYkkOx7-bMg~~/AABEfhA~/-yaJRDb8xWr7HJojr3MupAKyak7mro7JUGWP8hpMdzp95UNqCV2xrSqVZrnRMjLHJVTcH6PutF1v-Ve3eAXTTk83XR8OTq2zAu2pxZ2S1_yTakgvzEj5xxvjC97eLjfR8hhEvJ57bb80XmEPfZZNNg~~">Why is Anchor Positioning not working</a>?</li>
<li>James Stuckey Weber: <a href="https://go.sparkpostmail2.com/f/a/VisaGWrox882PrtgIa1UDw~~/AABEfhA~/OAsIwn5wVJEA1NgxNJBFwG9dmjJ-eJOO_b5LFhWDJ2Ljvpk4moVNigfrb3N24-zmQ79FzBCtat_KbjKcnLZU0oGAf8uUP1d3UrkP9kWuC8-dTRTb-ZKX3N3VBhs9wLIucOaSYkPRfH8ZWuZ0XC8Cv25Cz84qdFkQrAWo92vNOY0~">Here’s Why Your Anchor Positioning Isn’t Working</a></li>
</ul>
<p>Articles like that that do a good technical dive and explain the situation are great, but I wish they didn’t have to exist, thus the ranting angle 😇.</p>
<p>Ahmad Shadeed has a typically great post on <a href="https://go.sparkpostmail2.com/f/a/sbAcdGcZhYi03Kqy7UCkLQ~~/AABEfhA~/GgWdtOnpENjBrTOMTTHm3CuqU9XY9OxWWHvVUYISARCT0TmfRnI4IW2PDXJm7pJKDZ2iXrRrPCL6HH7LEKZsYtCq4GHz7HLVc_TIY-cTI2FcageDZc8ZkW9C_uA-QBI54q9M6nvn3x0U6yvc17MbO6ZaZ11ZEoe7_ZsPTAUgsyo~">The Basics of Anchor Positioning</a> (ugh, that header is so cool). Ahmad walks through a situation (placing a badge over an image) that feels very relatable, and anchor positioning is a perfect fit. I would note though (raises hand definantly) that it just so happens the DOM structure works here. If Ahmad had put the “card tag” in the same parent container as the image, which is a perfectly reasonable choice, the anchor would just stop working. Figuring out why that’s broken, unless you’re an avid reader of front-end blogs, would be pretty darn difficult.</p>
<p>I think it’s notable that <a href="https://go.sparkpostmail2.com/f/a/1Ubf1fkoCUZcZedMcX6stA~~/AABEfhA~/Sd6f-_xXez82ofb_AfdpbLRN1tYpwL9YRifiE_7FeqPTTpNC7MDCyAIXRv52uEi1YM5aIuIb_6ZUBHpGSuG-bRzFPdh-YZSZjaUFxISCOsgenCEpeIuKuZtbFqJB1X0I2WOnmy9bjun3rKt99DBhAsaLDKafrIIBCCKX2iUD2_tYkNuSsX0Q0kZuCukrXTMa">Anchor Positioning is in Interop 2026</a> again. They call that a “carryover”. They say:</p>
<blockquote><p><a href="https://go.sparkpostmail2.com/f/a/Q9ps_yhCP7HIKAi87VeG2Q~~/AABEfhA~/9saJ5Epah2LZsRfpIyeclGfrTG2u0cQOsPd6Kwz06l3YoltZf8R4ZTZuBhW8qYZQ2z5N80E7FgWAEx3vw6sHyFj1Yqwwbrk2pBAFXFs1WTpG_ChU57L7fr2mhOMxjKivblJtJMewRPo3WtLucIwrM1ENYCAxQCgKhfic8woIw9lAjrJ2JwgWDR4o1GG-d7eS">Anchor positioning</a> is a carryover from Interop 2025, where significant progress was made to empower developers to position elements relative to each other. This year’s focus will be on clarifying the spec, resolving test issues, and increasing the reliability of this powerful layout feature.</p></blockquote>
<p>If the spec is still able to be updated a bit, I hope they consider my plea to figure out a way to make resolving anchors more resilient.</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: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/fbUjdq38D2qvYAdVyGrScg~~/AABEfhA~/fA1gbAPThl242o56XkuDSdC8Th--losKAu3R3YBPPRAmTKqGmK6R0wD6Bm2YSCxhJP1A8Q-UVEWZfVHju0zCJQwkt5I4RJ8A5mPUjFmmIlRedwAVMNaBAZj9TT0rBF7zmkr9OMtdJYqVBpbwv25nbg~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/Ighn2ZJzanhR-PlyQgszGQ~~/AABEfhA~/mwM5ZvhEkdmNP85Ar5HnME4EUyiX1BVA42h6nPg7gw03RBcBfsNHN8xGnT9hVa3G0SKIveOct-eHUToVUpelcJQP4vao1VKUO8n9CBxutcIVPQOECBuXoq0ix2HnbpOTMxMWDspMuVmnVqCoYiDwXRMvsJnXyJq4qoXFlPsIHa_0H2P3HxpnLDKuRX5X5fLNKp12a846k2dNQvTTnScC51YxMubmBDh3dtIUraiK9ysJVuwbD9dlAke9-sRoho6QS4dbjxut57-9D7GS-0nn8dRKqSwPYuettixhKau78itBkcUJhnaMko4soRYoYn2gmLz7iPAMdDwfaek_yoLrB_QTratyeqyCXCbnwJ9XBKM~"> instantly unsubscribe </a> to emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/-oeFILCKZhJCA2qGVwUIeA~~/AABEfhA~/EV23NxLcmBFSdYJwNSXttcs8zmqsOeFp4MN3Gi5xG9jaWE-Vx94GzPQ0uEGHwHLidYR2dA3fDSjEyH-g3nCZ0BA6gArsb1UnKerw_b5pKviQwyjHzpdXVKmVfvfIL_nh">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/jU4XBxBg65nluoj2k8FsXw~~/AABEfhA~/OP-dJbfVuVJScrPR0IOA_C9GXLtM4OLjlbAJCBIgPpWBD-MQ9oFFZbUhKFMLF5E2EFVYQ04A3PmfNlcoYBV5mxjZL5YEvM_LnEVYBB08Zvq-cmWBsp_X2hsqvQ3lRGrE">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/fjiCSyzQMI0eczyjc5-VKg~~/AABEfhA~/KcGF9_gvvUvptQwUtcIClTqm8ioExlJPvKbaB_CRgIu0RO7BQ2NPiiSU6BxOjyqK2bg99ET0-edLXb7pC5dw1w~~">
</body>
</html>
