<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello with Lottie</title>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
</style>
</head>
<body>
<lottie-player
src="https://assets2.lottiefiles.com/packages/lf20_w51pcehl.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay>
</lottie-player>
</body>
</html>
CodePen Blog
Chris Corner: For The Sake of It
Somebody with good taste could’ve made my website, but then it wouldn’t be mine.
My website is ugly because I made it — Taylor Troesh
I love weird design ideas. Probably because so much of what we need to do as web designers is, appropriately, somewhat serious. We want things to be simple, clear, professional, so that people understand them and in many cases pay for them. So when the constraints relax, so can we. It’s unlikely that Taylor’s homepage would “perform well” in any sort of UX testing, but who cares? It’s not impossible to use, it’s just unusual. And crucially, it’s fun and memorable, which is likely a leg up on the last “dashboard” you saw.
It’s cool of Blackle Mori to have documented The Lost CSS Tricks of Cohost.org, a social network ultimately too cool for this world. I sort of suspect a lot of this trickery is available in advanced email clients too, where you definitely don’t have JavaScript, but do have access to more-modern-than-you’d-think HTML and CSS.
And high on the tranfixingly-weird scale is Amit Sheen’s CSS Spotlight Effect. Don’t write it off as a black page with a transparent circle moving with the mouse. I mean, it kinda is, but the filtering and scaling affects that come along for the ride are extremely cool. I actually just got to hang with Amit a bit at CSS Day in Amsterdam this past week. His talk was about building logic gates in CSS was pretty wild, and the whole thing end with him just showing off random amazing Pens of his on stage.
Sometimes design can feel impressive because of the extreme constraints of where you’re seeing it. I’m at an airport lounge right now where I’ve seen an exhibit of sculptures carved into the lead tips of pencils. It’s that same kind of feeling I get when I see art happen in the terminal, a place usually not regarded for it’s beauty. Like seeing a daisy grow from the cracks of a busted up sidewalk.
I like serious design as well. Certainly there is more money in it. I’m allowed to like them both, just like I enjoy both fine dining and fast food. I’ll just hit you with some quicker links though as I bet you’re tired of my going on.
* Chris Nager weighs in on Design Engineering from his experience with that title at Carta. “The most important skill design engineers possess is the ability to communicate with both designers and frontend engineers. They’re able to give feedback to both sides, and can act as translators between the two worlds through prototypes.” Emphasis mine, naturally.
* Lea Verou looks critically at a design change at GitHub in Minimalist Affordances: Making the right tradeoffs. Not only was it interesting, it showcases the power of blogging and making coherent points: GitHub noticed, talked with her, and improved the design.
* Grant Slatton on How to write a good design document. “Think of a design document like a proof in mathematics. The goal of a proof is to convince the reader that the theorem is true. The goal of a design document is to convince the reader the design is optimal given the situation.”
Chris Corner: For The Sake of It
Somebody with good taste could’ve made my website, but then it wouldn’t be mine.
My website is ugly because I made it — Taylor Troesh
I love weird design ideas. Probably because so much of what we need to do as web designers is, appropriately, somewhat serious. We want things to be simple, clear, professional, so that people understand them and in many cases pay for them. So when the constraints relax, so can we. It’s unlikely that Taylor’s homepage would “perform well” in any sort of UX testing, but who cares? It’s not impossible to use, it’s just unusual. And crucially, it’s fun and memorable, which is likely a leg up on the last “dashboard” you saw.
It’s cool of Blackle Mori to have documented The Lost CSS Tricks of Cohost.org, a social network ultimately too cool for this world. I sort of suspect a lot of this trickery is available in advanced email clients too, where you definitely don’t have JavaScript, but do have access to more-modern-than-you’d-think HTML and CSS.
And high on the tranfixingly-weird scale is Amit Sheen’s CSS Spotlight Effect. Don’t write it off as a black page with a transparent circle moving with the mouse. I mean, it kinda is, but the filtering and scaling affects that come along for the ride are extremely cool. I actually just got to hang with Amit a bit at CSS Day in Amsterdam this past week. His talk was about building logic gates in CSS was pretty wild, and the whole thing end with him just showing off random amazing Pens of his on stage.
Sometimes design can feel impressive because of the extreme constraints of where you’re seeing it. I’m at an airport lounge right now where I’ve seen an exhibit of sculptures carved into the lead tips of pencils. It’s that same kind of feeling I get when I see art happen in the terminal, a place usually not regarded for it’s beauty. Like seeing a daisy grow from the cracks of a busted up sidewalk.
I like serious design as well. Certainly there is more money in it. I’m allowed to like them both, just like I enjoy both fine dining and fast food. I’ll just hit you with some quicker links though as I bet you’re tired of my going on.
* Chris Nager weighs in on Design Engineering from his experience with that title at Carta. “The most important skill design engineers possess is the ability to communicate with both designers and frontend engineers. They’re able to give feedback to both sides, and can act as translators between the two worlds through prototypes.” Emphasis mine, naturally.
* Lea Verou looks critically at a design change at GitHub in Minimalist Affordances: Making the right tradeoffs. Not only was it interesting, it showcases the power of blogging and making coherent points: GitHub noticed, talked with her, and improved the design.
* Grant Slatton on How to write a good design document. “Think of a design document like a proof in mathematics. The goal of a proof is to convince the reader that the theorem is true. The goal of a design document is to convince the reader the design is optimal given the situation.”
SVG drawing animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Drawing Animation</title>
<style>
/* SVG styling */
.icon {
width: 400px;
height: 400px;
color: #F06529;
}
/* Path styling */
.icon path {
fill: none; /* Start with no fill for drawing effect */
stroke: currentColor; /* Use currentColor for stroke */
stroke-width: 1; /* Thin stroke for clarity */
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: var(--path-length);
stroke-dashoffset: var(--path-length);
animation: draw 2s ease-in-out forwards;
}
/* Drawing animation */
@keyframes draw {
0% {
stroke-dashoffset: var(--path-length);
fill: none;
}
80% {
stroke-dashoffset: 0;
fill: none;
}
100% {
stroke-dashoffset: 0;
fill: currentColor; /* Restore original fill */
}
}
</style>
</head>
<body class="dark"> <!-- Add 'dark' class to test dark mode -->
<svg class="icon w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
<path d="m3 2 1.578 17.824L12 22l7.467-2.175L21 2H3Zm14.049 6.048H9.075l.172 2.016h7.697l-.626 6.565-4.246 1.381-4.281-1.455-.288-2.932h2.024l.16 1.411 2.4.815 2.346-.763.297-3.005H7.416l-.562-6.05h10.412l-.217 2.017Z"/>
</svg>
<script>
// Get the path element
const path = document.querySelector('.icon path');
// Calculate the path's total length
const pathLength = path.getTotalLength();
// Set the path length as a CSS custom property
path.style.setProperty('--path-length', pathLength);
</script>
</body>
</html>
<picture> — Responsive image loading
<source> — Define media file formats
<dialog> — Create modal dialogs
<template> — Hidden HTML templates
<slot> — Insert custom content in Web Components
<main> — Marks the main content area
<mark> — Highlight text
<time> — Define a date or time
<meter> — Display scalar values (e.g. score)
<progress> — Show task progress (e.g. loading)
<output> — Display calculation results
<details> — Expandable/collapsible content
<summary> — Header for <details>
<figure> — Container for images or diagrams
<figcaption> — Caption for a <figure>
<source> — Define media file formats
<dialog> — Create modal dialogs
<template> — Hidden HTML templates
<slot> — Insert custom content in Web Components
<main> — Marks the main content area
<mark> — Highlight text
<time> — Define a date or time
<meter> — Display scalar values (e.g. score)
<progress> — Show task progress (e.g. loading)
<output> — Display calculation results
<details> — Expandable/collapsible content
<summary> — Header for <details>
<figure> — Container for images or diagrams
<figcaption> — Caption for a <figure>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Avatar Animation</title>
<style>
body {
margin: 0;
padding: 0;
background: #0f0f0f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Segoe UI', sans-serif;
}
.coder-avatar {
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 25px rgba(0, 255, 170, 0.5);
cursor: pointer;
}
.coder-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
z-index: 2;
position: relative;
transition: transform 0.5s ease;
}
.coder-avatar:hover img {
transform: scale(1.05);
}
.coder-avatar::before {
content: '';
position: absolute;
top: -25%;
left: -25%;
width: 150%;
height: 150%;
background: conic-gradient(
from 0deg,
#00ffcc,
#0066ff,
#00ffcc
);
animation: spin 5s linear infinite;
z-index: 0;
border-radius: 50%;
filter: blur(10px);
}
.coder-avatar::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #0f0f0f;
border-radius: 50%;
z-index: 1;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="coder-avatar">
<img src="https://i.pravatar.cc/300?img=12" alt="programmer">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Ably Real-Time Chat</title>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#messages {
border: 1px solid #ccc;
padding: 10px;
height: 300px;
overflow-y: scroll;
margin-bottom: 10px;
}
input, button {
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>💬 Ably Real-Time Chat</h2>
<div id="messages"></div>
<input type="text" id="msgInput" placeholder="Write a message..." />
<button onclick="sendMessage()">Send</button>
<script>
const ably = new Ably.Realtime('key');
const channel = ably.channels.get('chat');
channel.subscribe('message', function(msg) {
const p = document.createElement('p');
p.textContent = msg.data;
document.getElementById('messages').appendChild(p);
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
});
function sendMessage() {
const input = document.getElementById('msgInput');
const message = input.value.trim();
if (message) {
channel.publish('message', message);
input.value = '';
}
}
</script>
</body>
</html>
✨ Today's Code Tip
Add a stunning 3D glowing button to your portfolio or website with this CSS snippet:
This glowing button adds interactive and modern flair to your site.
More effects coming soon — stay tuned!
#html #css #frontend #code #development
Add a stunning 3D glowing button to your portfolio or website with this CSS snippet:
<button class="glow-btn">Click me</button>
<style>
.glow-btn {
padding: 12px 24px;
font-size: 16px;
color: #fff;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border: none;
border-radius: 12px;
box-shadow: 0 0 15px #6a11cb;
transition: all 0.3s ease;
}
.glow-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 25px #2575fc, 0 0 40px #6a11cb;
}
</style>
This glowing button adds interactive and modern flair to your site.
More effects coming soon — stay tuned!
#html #css #frontend #code #development
Html codes
Photo
CodePen Blog
Chris’ Corner: Liquid Ass
First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out with whoever shows up and make stuff and talk about front end web development and design. So:
* Me on Twitch
* CodePen on YouTube
Seems like those two platforms make the most sense for that, so here we go.
I made this super sick banner for Twitch, which you can’t even see because it’s covered by UI stuff lol. https://blog.codepen.io/wp-content/uploads/2025/06/Frame-1-1024x410.png Welp.
I suppose you knew that there’s no way I’m letting “liquid glass” slide by this week. Or should I say: https://blog.codepen.io/wp-content/uploads/2025/06/bafkreichpccmnpuyg6votcyb3vjza7b4zfpnpcbytuxhcxsesr43p6phd4.jpg Amazing.
Marie actually beat me to it doing a whole Spark issue on it last week. Obviously CodePen users are all over this design trend, as it’s an absolutely magnetic challenge in CSS. Kevin Powell did a video which happened to drop at the perfect time. Kevin is so good at these things I’m like sick with jealousy about it. Maybe my stream will level up my video teaching skills.
It’s not like CodePen is only now starting to have these glass-like effects. People have been doing it for ages. It had a particular boon when
Apple is actually quite serious about this, and released a video of the whole idea. Honestly I think it’s kinda awesome looking. https://blog.codepen.io/wp-content/uploads/2025/06/lg-controls-1024x662.jpeg But I did kinda 😬 about the accessibility of it. https://blog.codepen.io/wp-content/uploads/2025/06/glass-tabs-1024x486.jpg No chance the text “Nao” above is passing any contrast test. Nao way amiright?
Feels like text/background contrast has taken a hit. I haven’t seen a full throated takedown of it yet (there are some mentions though), but I imagine that’s coming. There are already settings in there to tone the effects down, I hear.
I thought out loud the other month: literally everything ships inaccessibly. And since having that thought I’ve seen a half dozen things ship that way. Certainly we’re not immune to it, but it’s good motivation to get some more accessibility testing done (we’ve done a good bit already!) on our new editor before it goes out.
Random thing before I sign off. The Oatmeal on Erasers is lovely.
Chris’ Corner: Liquid Ass
First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out with whoever shows up and make stuff and talk about front end web development and design. So:
* Me on Twitch
* CodePen on YouTube
Seems like those two platforms make the most sense for that, so here we go.
I made this super sick banner for Twitch, which you can’t even see because it’s covered by UI stuff lol. https://blog.codepen.io/wp-content/uploads/2025/06/Frame-1-1024x410.png Welp.
I suppose you knew that there’s no way I’m letting “liquid glass” slide by this week. Or should I say: https://blog.codepen.io/wp-content/uploads/2025/06/bafkreichpccmnpuyg6votcyb3vjza7b4zfpnpcbytuxhcxsesr43p6phd4.jpg Amazing.
Marie actually beat me to it doing a whole Spark issue on it last week. Obviously CodePen users are all over this design trend, as it’s an absolutely magnetic challenge in CSS. Kevin Powell did a video which happened to drop at the perfect time. Kevin is so good at these things I’m like sick with jealousy about it. Maybe my stream will level up my video teaching skills.
It’s not like CodePen is only now starting to have these glass-like effects. People have been doing it for ages. It had a particular boon when
backdrop-filter: blur(2px); became a thing — that’s more like “frosted” glass — but still, Apple is doing that, too. Maybe -webkit-box-reflect will get new life on the web also? Feels related. Sebastiaan de With fortold it nearly perfectly well. 👏👏👏. Little touches like the reflective progress bar are so cool. https://blog.codepen.io/wp-content/uploads/2025/06/Mica-Video-Playback-1-1024x527.png I don’t know if Apple is actually doing this particular detail, I don’t have the new OS yet, but Sebastiaan’s idea is awesome. Apple is actually quite serious about this, and released a video of the whole idea. Honestly I think it’s kinda awesome looking. https://blog.codepen.io/wp-content/uploads/2025/06/lg-controls-1024x662.jpeg But I did kinda 😬 about the accessibility of it. https://blog.codepen.io/wp-content/uploads/2025/06/glass-tabs-1024x486.jpg No chance the text “Nao” above is passing any contrast test. Nao way amiright?
Feels like text/background contrast has taken a hit. I haven’t seen a full throated takedown of it yet (there are some mentions though), but I imagine that’s coming. There are already settings in there to tone the effects down, I hear.
I thought out loud the other month: literally everything ships inaccessibly. And since having that thought I’ve seen a half dozen things ship that way. Certainly we’re not immune to it, but it’s good motivation to get some more accessibility testing done (we’ve done a good bit already!) on our new editor before it goes out.
Random thing before I sign off. The Oatmeal on Erasers is lovely.
🚀 Quick Tip: Animate with Ease!
Bring your web elements to life using simple CSS keyframe animations. Try this extended pulsing + shadow effect:
💡 This animation works beautifully for buttons, notification cards, or interactive banners.
✨ Make your UI more dynamic and modern with just a few lines of CSS!
#css #animation #webdesign #html #frontend #uiux
Bring your web elements to life using simple CSS keyframe animations. Try this extended pulsing + shadow effect:
<div class="pulse-box">Hover me!</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #121212;
margin: 0;
font-family: Arial, sans-serif;
}
.pulse-box {
display: inline-block;
padding: 20px 40px;
background: #00bcd4;
color: white;
font-size: 24px;
font-weight: bold;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0,188,212,0.4);
animation: pulse 2s ease-in-out infinite;
cursor: pointer;
transition: transform 0.2s;
}
.pulse-box:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(0,188,212,0.6);
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 20px rgba(0,188,212,0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 35px rgba(0,188,212,0.7);
}
100% {
transform: scale(1);
box-shadow: 0 0 20px rgba(0,188,212,0.4);
}
}
</style>
💡 This animation works beautifully for buttons, notification cards, or interactive banners.
✨ Make your UI more dynamic and modern with just a few lines of CSS!
#css #animation #webdesign #html #frontend #uiux
🎯 Code Hack: Neon Text Effect
Give your website a retro-futuristic feel with this simple glowing neon text effect using only CSS:
🌟 Add a cyberpunk flair to headers, banners, or titles.
More daily UI tricks and CSS magic right here 👉 @Html_codee
#neon #css #html #frontend #design #webeffects
Give your website a retro-futuristic feel with this simple glowing neon text effect using only CSS:
<h1 class="neon-text">Neon Vibes</h1>
<style>
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.neon-text {
font-size: 48px;
color: #fff;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
font-family: 'Courier New', monospace;
animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
}
20%, 24%, 55% {
opacity: 0.4;
}
}
</style>
🌟 Add a cyberpunk flair to headers, banners, or titles.
More daily UI tricks and CSS magic right here 👉 @Html_codee
#neon #css #html #frontend #design #webeffects
Html codes
Photo
CodePen Blog
Chris’ Corner: Modern CSS Features Coming Together
I like the term “content aware components” like Eric Bailey uses in the Piccalilli article Making content-aware components using CSS :has(), grid, and quantity queries. Does a card have a photo? Yes, do one thing, no, do another. That sort of thing. Eric has some good examples where a UI component has a bunch more “tags” than another, so the layout adjusts to accommodate them better. https://blog.codepen.io/wp-content/uploads/2025/06/Screenshot-2025-06-17-at-2.21.27 PM-960x1024.png Thanks to
Admittedly, the logic gets a little bit more complicated if you want like “3 or less tags”, but that’s exactly what Eric covers in the article, linking up the original ideas and resources, so you’re in luck.
At CSS Day the other week, I listened to Ahmad Shadeed have a wonderful idea on stage. Imagine a layout with one item, you show it. Two items? Side by side? Three items? Maybe two on top and one on the bottom. Four? Two by Two. Five? Well! That’s getting to be a lot of items. We could break them into a carousel. All entirely in CSS. That’s wild. I’d love to build that one day. Maybe I’ll try to stream it one of these days. (Of course, as I write this Kevin Powell put out a video that verges on the idea, and it’s very clever.)
Speaking of Ahmad, he’s got a great article introducing the big improvements that the
The number 2 above is a fallback. With a number like that, it makes me think that maybe-just-maybe, we could combine it with the newfangled
Ya know how Sass has
In other news, gap decorations are starting to be a thing and that’s wonderful. Hoping they’ll move right onto styling a grid area without needing an HTML element there, that would be just as wonderful. I’m still hesitant on making entire columns of article content into grids, but that’s a me-problem, I see others are coming around on the idea.
Chris’ Corner: Modern CSS Features Coming Together
I like the term “content aware components” like Eric Bailey uses in the Piccalilli article Making content-aware components using CSS :has(), grid, and quantity queries. Does a card have a photo? Yes, do one thing, no, do another. That sort of thing. Eric has some good examples where a UI component has a bunch more “tags” than another, so the layout adjusts to accommodate them better. https://blog.codepen.io/wp-content/uploads/2025/06/Screenshot-2025-06-17-at-2.21.27 PM-960x1024.png Thanks to
:has(), the idea of “quantity queries” (e.g. style an element if there are, say, 4 or more of an element) have gotten a lot easier. The way I figure it, we could do like: .card:has(.tag:nth-child(4)) {
/* apply styles to the card because there are at least 4 tags */
} Admittedly, the logic gets a little bit more complicated if you want like “3 or less tags”, but that’s exactly what Eric covers in the article, linking up the original ideas and resources, so you’re in luck.
At CSS Day the other week, I listened to Ahmad Shadeed have a wonderful idea on stage. Imagine a layout with one item, you show it. Two items? Side by side? Three items? Maybe two on top and one on the bottom. Four? Two by Two. Five? Well! That’s getting to be a lot of items. We could break them into a carousel. All entirely in CSS. That’s wild. I’d love to build that one day. Maybe I’ll try to stream it one of these days. (Of course, as I write this Kevin Powell put out a video that verges on the idea, and it’s very clever.)
Speaking of Ahmad, he’s got a great article introducing the big improvements that the
attr() function has gotten. I absolutely love how we can pluck attribute values out of HTML and actually have them be useful now. I think we’ll realize the power of that more and more. But it occurs to me here that it could factor into this quantity query situation. Say you trust your server to know and output stuff like this. So like: ... You can get your hands on 13, as an actual number not a string, in CSS now like: attr(data-cards type(<number), 2) The number 2 above is a fallback. With a number like that, it makes me think that maybe-just-maybe, we could combine it with the newfangled
if() commands in CSS (See Una’s great video) to write the same kind of “quantity query” logic. Ya know how Sass has
@mixin to repeat blocks of CSS? Native CSS doesn’t have that yet, but style queries are pretty close. I snagged this screenshot out of Kevin’s video (in CodePen, naturally): https://blog.codepen.io/wp-content/uploads/2025/06/Screenshot-2025-06-19-at-8.05.51 AM-1024x790.png See how he just flips on a --custom-property then the style query matches when that custom property is set and outputs a block of styles? That feels an awful lot like a mixin to me. Miriam has a nice homebase page for native mixins, which links to some very active discussion on it. At the pace CSS is moving I imagine we’ll have it before we know it. Just @applying a @mixin seems like a more straightforward approach than the style query approach, and more flexible as it’s likely they’ll take parameters, and possibly even slots. CSS carousels amount to a pretty hefty amount of CSS. Wouldn’t it be cool to make that into a hefty @mixin that takes parameters on what features you want? Ship it.In other news, gap decorations are starting to be a thing and that’s wonderful. Hoping they’ll move right onto styling a grid area without needing an HTML element there, that would be just as wonderful. I’m still hesitant on making entire columns of article content into grids, but that’s a me-problem, I see others are coming around on the idea.