<!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/j3cfUXt23yzZAh1onqw-cw~~/AABEfhA~/FVTYQV06V1uh9Jty-7Hkj9TLCuyW7IoBIEuvzPe78-ejWSs0Z5Z0ck-Bbi60W2veljQ18Qg7LQJHS0lqAqUbAQ~~" 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/XfY24Eb_AOL4YRoyfkNGhQ~~/AABEfhA~/pYiizFlUMWnvabjlKrqXZBF1puJIu88TnVfMgOsMMI99L-dirTkdI88LozsYLiaR0Vj47vhCsfU_ukCXNflWc5JSP3-qoTx8C9ExrQI0FOnrJaAgd6zgjVn_7XljeG7Y" 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;">cqi Units in Action, Search Text Highlights, and Custom Select Menus</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 a great demo of CSS container queries with a focus on the <code>cqi</code> unit from Mert Cukuren, a look at the new <code>::search-text</code> pseudo with Daniel Schwarz, and a fun custom select menu from Patrick Brosset.</p>
<p>Plus, Ana Tudor carves out concave card edges, and Nils Keller shares his collection of 3D album covers.</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/NfPnXI6wcWsHORaF9RLY0Q~~/AABEfhA~/DN3TX34AHOA5tbAS2_zJzsDZYsYxlKY8meKAp0iVEOfTNbEvObvW8p35l6G9JFwwtKPJPIxwwKmJKeycIJxf4UK76z0GJ2op2KxeneoEvyPJaR9yvUbj2ntykeM528R4DTjHzNJepXkEvePPuD5VsQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/concave-rounding-grid.png" alt="Cards with concave rounding on irregular grid" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/NfPnXI6wcWsHORaF9RLY0Q~~/AABEfhA~/DN3TX34AHOA5tbAS2_zJzsDZYsYxlKY8meKAp0iVEOfTNbEvObvW8p35l6G9JFwwtKPJPIxwwKmJKeycIJxf4UK76z0GJ2op2KxeneoEvyPJaR9yvUbj2ntykeM528R4DTjHzNJepXkEvePPuD5VsQ~~">Cards with concave rounding on irregular grid</a></div>
<div class="spark-desc">"Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. No images save for the .jpg card backgrounds. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements to see. This requires no JS - it's all in the magic of CSS subgrid!" From Ana Tudor.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/V-d_7PQCq-luXdJNKWItmg~~/AABEfhA~/Ex7f_CBXZRmiMKDbFTh-1ScTG_ecSsx28_SGAiXzW-7RQ-rbkAloFQEBMQiYrY6lHtUxaM6_AlOos-paMejZ4xThpk8-X4Y3fIp-O1JbTNcgjvvqrvVNkQ69JL8jlUcVZy6swU59eIiBUYxJ7Qiz6w~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/deep-dive-hurrle.png" alt="Deep Dive" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/V-d_7PQCq-luXdJNKWItmg~~/AABEfhA~/Ex7f_CBXZRmiMKDbFTh-1ScTG_ecSsx28_SGAiXzW-7RQ-rbkAloFQEBMQiYrY6lHtUxaM6_AlOos-paMejZ4xThpk8-X4Y3fIp-O1JbTNcgjvvqrvVNkQ69JL8jlUcVZy6swU59eIiBUYxJ7Qiz6w~~">Deep Dive</a></div>
<div class="spark-desc">"Allow yourself to be immersed in a wonderful sensory experience, I thought. Then I made this shader." But for real though, take a little time to bask in the golden glow of this gorgeous WebGL shader by Matthias Hurrle.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/M5IAkQcjB-Qce0CIaS8GNQ~~/AABEfhA~/jEOWvm8YI4lHPLiXveo2r48fIbA9lMFDmVfLe5kIjaD9B1mqrHhZO0HuitcO_H5maaiGTS6jN6lESJdt80J_K3qsvxNaoJgMsTI_E6BuPzeVhEO_srEzzUoznEW3AL0Xv2XVT0Wz6u9HB7IALJuGYQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/shadow-coding-challenge.png" alt="Fun shadow coding challenge" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/M5IAkQcjB-Qce0CIaS8GNQ~~/AABEfhA~/jEOWvm8YI4lHPLiXveo2r48fIbA9lMFDmVfLe5kIjaD9B1mqrHhZO0HuitcO_H5maaiGTS6jN6lESJdt80J_K3qsvxNaoJgMsTI_E6BuPzeVhEO_srEzzUoznEW3AL0Xv2XVT0Wz6u9HB7IALJuGYQ~~">Fun shadow coding challenge</a></div>
<div class="spark-desc">Andy Bell has a challenge for you: recreate this shadow effect with a central light source using modern CSS. You can check out his Pen from 8 years ago to shed light on the challenge, and also to reflect on how far the front-end has come in 8 years!</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/CqmbKGAttuPr1h-jhJrnRw~~/AABEfhA~/XVS--7vufIc_nKlag_BV5f1wkOiOayoATfX8FfZijWNO0KBvbC6goPqWGyP6LdUcviIFItY_4pCRsmq2XWIozXhAy-gDEUNsgX7AwI-10vBqkpMJ2Cf4GlIvJtDP6GHEsA2iyjKIgDlI1XfaV8mp8A~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-game-over.png" alt="#CodePenChallenge: Game Over" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/CqmbKGAttuPr1h-jhJrnRw~~/AABEfhA~/XVS--7vufIc_nKlag_BV5f1wkOiOayoATfX8FfZijWNO0KBvbC6goPqWGyP6LdUcviIFItY_4pCRsmq2XWIozXhAy-gDEUNsgX7AwI-10vBqkpMJ2Cf4GlIvJtDP6GHEsA2iyjKIgDlI1XfaV8mp8A~~">#CodePenChallenge: Game Over</a></div>
<div class="spark-desc">Game over for the January challenge! Check out our collection of gaming-inspired creations from week 4, including Pens by <a href="https://go.sparkpostmail2.com/f/a/kUbzDJATkwFWKv0qL67Asw~~/AABEfhA~/IfEQPuLTF6Gqt5E1YfSh1CB_fyDlIUUsNGLx8R7hIwKd1g8SlCoPl55LVlcmrMQa9u0czf3-oG5cFn5ZjI_p2DnCw4wVaCEhKXCvEKey_x_PWrF9iw5C3t5xcJlFvWCug1m1LBCMq4GCOeoe1TO2sA~~">josetxu</a>, <a href="https://go.sparkpostmail2.com/f/a/LQjx_C0UVn4_9mwhd_mssw~~/AABEfhA~/2hK_bBGTAjDt3tI_QwveQ7uiQEnR15BGaJO6t2RfsrRLEbXOgoLpbAXF2Dh9SQY3lVT-_a4oLLG1xwBbhSMw6iuIRz3zdUqbTsO10m6mefLQrP3FT3H8rdFtkTFEHrm9eIxpXBQ5SdXJ8zXN_NVSTw~~">Ghislain-Gillet</a>, <a href="https://go.sparkpostmail2.com/f/a/D-PqWH3L5cYLRoMqYIvpvg~~/AABEfhA~/hh_w5HyCjDkIaCSZTUCj1_GqA2ZZN2rSuZQR6rs7_ecI5fzb291mUunA-IZAmF4_-SsL7-vZ2FxGy8vb8xtKv9BOW_ZbcjuXiM1VbJUjNVepmDH_iVthHkHVJF2ya5zY_a6XxcrAZyEJLw-nkm2KAw~~">grauconejo13</a>, and <a href="https://go.sparkpostmail2.com/f/a/fd1sFz-WmFUbfnX745n5Kg~~/AABEfhA~/UlJJ67F3X8eRx_DeK21827TW8rblGrT-PemTSk3e5H8ykeRjNMHbn5r12BCmSrKVFLvbL-fyfJJfN_O4sPi8Ul1_QnfXrZvZmgIQEiUgfENgpS89q2YLqqolp9HTJbQqcGx0r7JyWoz8MfaydkmfKA~~">DenDionigi</a>. Want to play again? The <a href="https://go.sparkpostmail2.com/f/a/pbHKXA96QTK3dmutpyqZmg~~/AABEfhA~/77btPOuA1RuwpYvjrSl4rScFa_Wcn2ho74bExG-gaxC1ytfEtqt-3hDei9a-qFzgbHiKgNUjEUQFZLs2bi86BJWvdbOGKMtKg7gbWtq1B92xQs3w25biWfWO8ToiCIHod9qk4qCjO83ujQVtKscl0g~~">February challenge</a> is on now!</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/9I5rcG9CiwC1b4DjJXGBvQ~~/AABEfhA~/XVS--7vufIc_nKlag_BV5f1wkOiOayoATfX8FfZijWOPO_0LzqdFMJi1EG8OZiC0V5MREVB5dVphvl8G7l3srnZhZXMkX7D78lfe8BsF4BcwJC6vi5fC7c-jVGzGyN9dfoN3E8GFrFwll41rKqCw6Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/3D-album-covers.png" alt="3D Album Covers" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/9I5rcG9CiwC1b4DjJXGBvQ~~/AABEfhA~/XVS--7vufIc_nKlag_BV5f1wkOiOayoATfX8FfZijWOPO_0LzqdFMJi1EG8OZiC0V5MREVB5dVphvl8G7l3srnZhZXMkX7D78lfe8BsF4BcwJC6vi5fC7c-jVGzGyN9dfoN3E8GFrFwll41rKqCw6Q~~">3D Album Covers</a></div>
<div class="spark-desc">Browse through Nils Keller's genre jumping, multi-decade spanning collection of albums and you're sure to find something you love. Click any cover to tilt it back to its original layout.</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/ZCjsN3dnnpn23chlU-15lQ~~/AABEfhA~/7RyJ98UsaRMxDWonh8c4Ygr1gCHs8ayjqAKDgT9UDzWOphorIlPhlj39bZ-KTBOjcLW1oqH_HDLOdVBbeSZHTR_56H6BluP9aMJbP133jIoOtwHC1U8_gwvE6sQl1ZfW0W17iRPVsmvoJk_E0dwclG8L1yMQL2mH_zO5xjbEQt1TfF-CpBfo959wIse8mTvhvvvCXsaEs3ng_-ULJsrut1txR5wYD5Ry0WW85Nl7iXkmYUcuTOA6qpQWAcBmPwATPw6-iQ83qWfTcehiFEAVgw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/stream_feb0226.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/ZCjsN3dnnpn23chlU-15lQ~~/AABEfhA~/7RyJ98UsaRMxDWonh8c4Ygr1gCHs8ayjqAKDgT9UDzWOphorIlPhlj39bZ-KTBOjcLW1oqH_HDLOdVBbeSZHTR_56H6BluP9aMJbP133jIoOtwHC1U8_gwvE6sQl1ZfW0W17iRPVsmvoJk_E0dwclG8L1yMQL2mH_zO5xjbEQt1TfF-CpBfo959wIse8mTvhvvvCXsaEs3ng_-ULJsrut1txR5wYD5Ry0WW85Nl7iXkmYUcuTOA6qpQWAcBmPwATPw6-iQ83qWfTcehiFEAVgw~~">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/dhKUswwxnc7ERcmp-RFKMg~~/AABEfhA~/77btPOuA1RuwpYvjrSl4rQXuakjzWVZnRxK5zRMRRJZbCSwaV9YyHRVfcHJmYTwc0T5ixqF7hbFfmTz2eFgZzOX_OWCWks84lvB1eSyPxMmwb73Lnp6cGUuY1h2243CUMtDHGj3k1b_fAY02uAQghw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/custom-select-folders.png" alt="Stack of folders with 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/dhKUswwxnc7ERcmp-RFKMg~~/AABEfhA~/77btPOuA1RuwpYvjrSl4rQXuakjzWVZnRxK5zRMRRJZbCSwaV9YyHRVfcHJmYTwc0T5ixqF7hbFfmTz2eFgZzOX_OWCWks84lvB1eSyPxMmwb73Lnp6cGUuY1h2243CUMtDHGj3k1b_fAY02uAQghw~~">Stack of folders with custom select</a></div>
<div class="spark-desc">The <a href="https://go.sparkpostmail2.com/f/a/vcZloBhlfnbCRv9kYil9yQ~~/AABEfhA~/KchOrd1WJuaGdkxTyryEL9m08UHdk4OdLnVRScmLiTrTKE7tjU7UVudtaCbcM3jEaApDdua_Xfdf13bl6-AUARZTNA030V8TxnP07MbhgzBJoZugTNMicQpKMMex2iNTYqyVQAnyjp2pt86RYOit2KPyTOnzOPnxjOP5mXcGoeY~">select element is customizable now</a>, and Patrick Brosset shows us how fun that can be with this stack of folders that swings out when you click it.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/q9dAT6sqb8jnC6s-aZ99wQ~~/AABEfhA~/_c92iw2xi5XcaspIPNysGRX3dX5_VBAH8WD7rN8ey1XqpOnSEv7RqL7Ki-9vXazLXyU4klfLC3LvxINkLWVX0aSi1a2VmtYNsiNwq1yc-Jp8cP8eLhob8RJHmtZJE7nSZPScyK1K7zYeuLVpVqZTaw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cqi-units-action.png" alt="CSS @container Demo: cqi Units in Action" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/q9dAT6sqb8jnC6s-aZ99wQ~~/AABEfhA~/_c92iw2xi5XcaspIPNysGRX3dX5_VBAH8WD7rN8ey1XqpOnSEv7RqL7Ki-9vXazLXyU4klfLC3LvxINkLWVX0aSi1a2VmtYNsiNwq1yc-Jp8cP8eLhob8RJHmtZJE7nSZPScyK1K7zYeuLVpVqZTaw~~">CSS @container Demo: cqi Units in Action</a></div>
<div class="spark-desc">Mert Cukuren flexes the power of the <code>cqi</code> unit in this super-responsive "card component that adapts to its parent container's width, not the viewport. Drag the bottom-right corner to see layout changes and fluid typography using CSS clamp() and cqi units".</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/mVhv5rac96O8CXzRry_YFw~~/AABEfhA~/bf09NuIpB5hGIkbPxKRGrUSa-JqCCJGuI3czxo_m-VEI3fbTnH1UMPg33TR86zau3a-QxXHkFYhNEjM2KmouEhP36LqyXDrHr-ahN1p90Y2VqOzXepZrawURbPOWVjHOIwtHkfX0OR9G71TiP5gvI4AxlwkiYN9B-AOY_Q4En6iCCOrwKSEYT6p-2Cv7t60StPoMehA0ohsfyRmpPkt47g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/styling-search-text-highlight.png" alt="Styling ::search-text and Other Highlight-y Pseudo-Elements" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/mVhv5rac96O8CXzRry_YFw~~/AABEfhA~/bf09NuIpB5hGIkbPxKRGrUSa-JqCCJGuI3czxo_m-VEI3fbTnH1UMPg33TR86zau3a-QxXHkFYhNEjM2KmouEhP36LqyXDrHr-ahN1p90Y2VqOzXepZrawURbPOWVjHOIwtHkfX0OR9G71TiP5gvI4AxlwkiYN9B-AOY_Q4En6iCCOrwKSEYT6p-2Cv7t60StPoMehA0ohsfyRmpPkt47g~~">Styling ::search-text and Other Highlight-y Pseudo-Elements</a></div>
<div class="spark-desc"><code>::search-text</code> just arrived in Chrome 144! In this tutorial for CSS-Tricks, Daniel Schwarz shows us how to use it along with relative color syntax to create contrasting highlights on searched text.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/fkUCpP445Bba0hiS7eaz9g~~/AABEfhA~/DN3TX34AHOA5tbAS2_zJzqv4Sq6XJRLtHswxMgYF-YavonnKqwyt-qNmA35FgwlHY76Rr3SNAmvT-zYmmn3ITQMv3zFZcJM7rTWxliX2fcky_8LjYFLDfK23Z-80jSajhDdkg28a9tXpfRYVfbcH7g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/binary-clock-prisoner849.png" alt="Binary Clock" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/fkUCpP445Bba0hiS7eaz9g~~/AABEfhA~/DN3TX34AHOA5tbAS2_zJzqv4Sq6XJRLtHswxMgYF-YavonnKqwyt-qNmA35FgwlHY76Rr3SNAmvT-zYmmn3ITQMv3zFZcJM7rTWxliX2fcky_8LjYFLDfK23Z-80jSajhDdkg28a9tXpfRYVfbcH7g~~">Binary Clock</a></div>
<div class="spark-desc">prisoner849 shares a slick timepiece in this Three.js scene. If you can't tell <a href="https://go.sparkpostmail2.com/f/a/a4_JXebWtbLfdZ-amEQbXA~~/AABEfhA~/DN3TX34AHOA5tbAS2_zJzjf_VUuJXm2Sa_MU-Cmu7yFHds0TmhYSmCAPZJvzSRN5SjLnDpZHKPkou2-2YDYYAi6Y1h-IzcWHFTOhw4UT4Sn_Ez4eifPp0JcRMVDzQBkiOd0ZqTgkV-ELE8PtHaCzew~~">binary time</a>, you can still enjoy the view — grab the clock to spin it around and check out the molded plastic sheen from every angle.</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>Lovingly Esoteric CSS</h3>
<p>Can you reason out the difference between a selector doing <a href="https://go.sparkpostmail2.com/f/a/A480D7A39TXYyxaScmGGDw~~/AABEfhA~/B0ZagzvSVbk88-UgR33_gadD7Gx3t5WtCItXNbzl8xQJi9Ukp16A-Uqm614-YkGyXJjjW3tqzxUSs04ysdZKJks5f4AvcGE6Uh7QakqypmndVdPsVSUHHknZ9R4Famgfv-FMQXFxxO71Al_MdByPXIWaZRqAmROI316O1IPnPtIhZYR8hfbXP0gABV2ev6fK-wleL58xPLYHQ_ax2EiWuC8p172oP2C84EZ2nE56jt7qUBzI-T-sVlqLru0eJOhC"><code>:has(:not) vs :not(:has)</code></a>? Kilian Valkhof wrote up that post I just linked to. I like how he teaches the way to think it out is to write out all the <em>implied</em> selectors at work. For instance:</p>
<pre><code class="css">.card:has(:not(img)) {
}
.card:not(:has(img)) {
}
</code></pre>
<p>is really:</p>
<pre><code class="css">.card:has(*:not(img)) {
}
.card:not(.card:has(img)) {
}
</code></pre>
<p>The latter becomes a lot more clear to me:</p>
<ol>
<li>Select all the stuff in a <code>.card</code> that isn’t an <code>img</code>.</li>
<li>Select the card as long as it doesn’t contain an <code>img</code>.</li>
</ol>
<p>Super different. I love stuff like this. Like Sudoku puzzles for CSS nerds.</p>
<hr />
<p>Speaking of <code>:has()</code>, <a href="https://go.sparkpostmail2.com/f/a/-kJOx2ei_G35hdr4lSgPZg~~/AABEfhA~/DI1Fv2sQgHQ4bF39tOZVEd3KmBUONQR53poaLqrw5qjmEJE__kxmtb1J7HecNOzbpZniYPE7WQIDuNU0fN0brxi6DPDPWlX0Cv6EVNr-DtplvtvdL_8xbeIvBr-Ewwtj20tgogoeLwKD-CcIHBrtm7KFlQXumF35xeIAvFirCZyZvYdz-MNPor6SBIT2VpaLBwCav1mfxzbIsRGkfAIAXVEEK5QHR6EFypcMKUwXRzE~">Heydon gets a bit philosophical with a “Sidebar” layout</a>, explaining how it can get a lot more flexible when we think of how to handle it with any particular layout that <em>just so happens to have a sidebar</em>. And <em>just so happens</em> is a specialty of <code>:has()</code>, polished up with a nice dollop of <code>@container</code>.</p>
<hr />
<p>I didn’t know this was coming, but I love it, and it makes intuitive sense to me. Una explains in <a href="https://go.sparkpostmail2.com/f/a/QiYt8mOI62RGM5cgWX8CRg~~/AABEfhA~/1aL5kfYHPpX3J7ShrPUIx-TZAHGaWCACqYdb-HZTgPgfiZaDnMJDYnzGSkTCBxshVM1XWDKdi_Q8cI88g6fFEp98bKZw0UNR-VCeNGelWXwLvpo6UuPYhHf1pTQWFuk44T3xH_NzvMpIjD6696cgLg~~">Range Syntax for Style Queries</a>.</p>
<pre><code class="css">/* Range query for rain percent (new) */
@container style(--rain-percent > 45%) {
.weather-card {
background: linear-gradient(140deg, skyblue, lightblue);
}
}
</code></pre>
<p>My brain goes right now how <code>line-height</code> often needs to get sucked in when the <code>font-size</code> goes up. So assuming those are custom properties powered, something like this could be cool:</p>
<pre><code class="css">
@container style(--font-size > 2rem) {
line-height: 1;
}
</code></pre>
<p>But my enthusiasm is tempered by the fact that you can’t do a container query on the same element you set the custom property on. So like this doesn’t work:</p>
<pre><code class="css">
h1,
h2,
h3 {
font-size: var(--header-font-size, 1.5rem);
@container style(--header-font-size > 2rem) {
line-height: 1;
}
}
h1 {
--header-font-size: 3rem;
}
</code></pre>
<p>You can see what I mean <a href="https://go.sparkpostmail2.com/f/a/xiKwO9JOz3Dr6xyOsguf6g~~/AABEfhA~/_JAuD-GnjBjfzDNA-QCz_ZkNexAN2avnZSZDlpMlnTp4Mt3YJHrvCnyz6aiEiLw1sIPHJeTRslmkxocC2LgJWZYYKP0_dmT9SKXZXUZkOVeGmu05-0F3JNBEg6DyB7EB56vR2rc7SV8PFYKCnQeL3gOgkgr9LymWa0b7q8mCDKhyxZsbTQ8jnkg59vWIqXWl">here with a working version</a>.</p>
<p>Because I’m setting <code>--header-font-size</code> at the same “level” as I’m testing it with<code> @container</code> it just doesn’t work. It would have to be set at least one DOM level higher, which is probably not what I’d be doing on an element like this. Oh well, it’s still cool.</p>
<hr />
<p>I appreciate <a href="https://go.sparkpostmail2.com/f/a/gmILHHnE65STfkcOx1B5ug~~/AABEfhA~/hh_w5HyCjDkIaCSZTUCj1zqSU2ixOFNAROxJrvm_4o-wu6jLGHBn73-06XC22NbC8PeZWb3lMsnUwcRMudCL6wIGfvRREdY2Ppc0TeR972KxWH6a4SEl69QpDgAqDlVt_6PQLSKkLplvEbGLgkg0Yg~~">Roma Komarov’s obsessing about a tiny detail here</a>. This website <a href="https://go.sparkpostmail2.com/f/a/n2nzUXIlKYKXKJrM6oQyCA~~/AABEfhA~/8F8EkNOZULS23yvcm6DK5AZsqg3Ac0rOaQBT7eyP0ssLyTFiy0vQMrpvxK5VjAwbh464yn7Js_gGgnGRvGPOy5BZyOxPcaYRTYLU7Tdt3sd7L8BCLxVaPw0wElCkjpCl">Ink & Switch</a> has these kinda rough hand-drawn underlines on it. But when they <em>wrap</em> the wrapping edge is “hard cut”. But it needn’t be so. The CSS property <code>box-decoration-break: clone</code> fixes it entirely. Beautiful. You can kinda forgive someone not knowing this as the browser support isn’t perfect. And more, the fact that it starts with <code>box-</code> kinda makes you think it’s gonna be related to <code>box-shadow</code> but really it’s (get this): <code>border-radius</code>, <code>border-image</code>, <code>box-shadow</code>, and <code>background</code>. That’s some good bar trivia right there for you and all your CSS buds.</p>
<hr />
<p>My toxic trait is that I like to declare winners of things. Like how <a href="https://go.sparkpostmail2.com/f/a/Yh6-dHZAKHRmylV4IisvLw~~/AABEfhA~/z5LZPCGinbU9ftM23rouXD5geVjlaqoG-r5c9ScpJz4DJp_CzH9c1cq6JoR4MVD-wGXN8Z4QEEzd_h9ryXoruY-AjLyMTEhlqIdOiSpjrOK_MMANwGcZiuwHq1JoGbQOroZPxWCubV2Hv25xY0xqikL0JRngRQJ0drEm8M0FW84~">Apple won with grid-lanes</a> 😬. Or how <code>oklch()</code> is the winning modern color format. Instead of giving those topics the nuance they deserve. I also have a lot of muscle memory for just using <code>rem</code> units everywhere, considering them the winning unit. But that one is almost certainly too narrow of an opinion. In fact, it’s probably not any one particular unit, but as Miriam says <a href="https://go.sparkpostmail2.com/f/a/8iHdK5MHQJ_JUMr3jKc2DQ~~/AABEfhA~/2hK_bBGTAjDt3tI_QwveQxxJ7suqvbxwaHClI8HzWvX25gHY40fYevwi2qLN0uKkFm72wegtg_UtCOGzQYPjf2ItIVvYTM0OgijhZbu3GWPz91ZDq44vy7r8ExfXg1tLSIeUWGi5R-vPTTU_SHUS4w~~">The Best CSS Unit Might Be a Combination: We don’t have to choose between px and rem for spacing</a>.</p>
<pre><code class="css">.card {
/* use 1lh, unless we run out of space */
--min: min(1lh, 2vi);
/* round-up to the nearest half-line */
--nearest-half: round(up, 2vi, 0.5lh);
}
</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/atpDji5p4wg72hqaM3MX0g~~/AABEfhA~/UlJJ67F3X8eRx_DeK2182-WVtRiHtRmlIQIfvnThIPI6Cl3LRlmGHMMt6aXzmbGMKbMYkni8BRrbYAQFJXbv75PMRtOq2JmerSHj3uNwA66fMXaotVir0Z_rPvOyEEQax6-HhTLagW7-EZB9mxibrg~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/FOfV7vMKwZob9bK_pXxDeA~~/AABEfhA~/j2h_3tZobvFp5PlYFbb3arDJ7LqzusIyen2s9WOzRPrfpzWL0-JLzeuIwiqdmEnAxbPcnGrsphTtNiPzjIJUxrzxFg3a_9nO94iz1CL2ZxNcKVRj2UGt1g_8DRcSHOmtryxNT1psLJQ6HOZcCGYDlTmxAzqMyJCQUuSVoB6tcmNXipC8YPrfGZNlWTd6pW4qV2Q7xKhb8Uk2VL3DPhglDefiw6yazrwmluBUI2-opqOFQoeNpRF1JSNfESaAmoiHTHrutXSBojwDxzYmPaPCN3Val0gnLCoqVaau2APcZsppuNiP179Umildu2NoMMURMVcihtp9vc7th_R2c_VCG3Y8Rnpc5F0C5Rd0CzXAqm8~"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/2q9cckURHE5E6SfBeuW2Mw~~/AABEfhA~/10ZVVpqomumq4Fj6ARYZY9hjJ8vemekvmkYxvPT-IMoo0JfmpDIlEDvQ9YoCp-FGKTmUie7bn3ZfWv-KEoR7J_bqcRG-uiXAzitSmjSRNiNOwWFw0AfC2sjKXR9cLecR">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/uaIiFgaaCfP_izK9NfQK_g~~/AABEfhA~/pYiizFlUMWnvabjlKrqXZN8RElo83HA6WgQl24hvgrcsh-iLrE8FOB23XOJbE39FGIRtpvqR6ETuY8EmDWBNykmLQJu7azQ4PNN9I9-6l0dS7ZnQ3FOedFn_BP_UzGUo">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/GJh7lbHimHhMvbvT8Tzidw~~/AABEfhA~/K3AqHUwa0GkVt4P4vrauXh1pnup4LHpCPEDea4KHgYfXCMrfuT-XOCUniQOOgHALNtngyv5nIaiEUZ6mpqyZlw~~">
</body>
</html>
