Made a single element CSS clock powered by shape() and a custom property animation.

JS just set the initial time in seconds, which as far as I can't be done any other way.

https://codepen.io/editor/matthewmorete/pen/01a15944-6751-7d6a-8004-a3fabb0de22d?tab=%2Fstyle.css&orientation=left&panel=files&show=split

Hi everyone now in the VS code I copied 5 images then 1 by 1 I give every single picture different class and img property For example <div class="img1">

<Img src="img1.jpg" alt ="picture of dog ">then Same Class I get in the css while I tried to give height and width to images but size of the images do not changed.

Not my project.

The video is the figures page of their site: Terrain's pillars rise around the pointer, Phosphor's dots fade where it paints, and the card under the pointer in Riffle stands up. On the next shelf the pointer's height moves the elevator car and a flick spins the turntable. Then Terrain opens in the side panel and its intensity option goes from 0.50 to 1.00, so a wider area rises.

Repo: https://github.com/lucasmarkes/hairline

The colours are six CSS custom properties, but the motion is JS. Could the Terrain effect, with its falloff around the pointer, be done in CSS alone?

Not my project, it's antfu's.

Type kanji and the readings appear above them: 今日は桜が満開 gets きょう, さくら and まんかい, drawn by the font through ligatures. There's a romaji variant and a serif one. The one option on their page that needs JavaScript, okurigana readings, is off in the video, so everything you see comes from the font alone.

Repo: https://github.com/antfu/furifont

Curious how far ligatures can go here before the font file gets too big.

Bonjour à tous ! 👋

Passionné par le développement web, je travaille actuellement sur NEXORA, un concept de site vitrine pour une montre connectée, avec une identité visuelle futuriste et un univers cosmique violet.

✨ Ce qui rend mon projet particulier :

• ⭐ Des étoiles interactives qui révèlent des informations au survol.
• 💜 Des effets lumineux violets avec des halos et des dégradés.
• 🌌 Des lignes lumineuses qui s'étendent depuis les étoiles pour mettre en valeur les caractéristiques de la montre.
• 🎨 Des transitions fluides et une interface pensée pour offrir une expérience moderne et immersive.

Chaque étoile présente un élément différent du concept : verre résistant aux rayures, fonctionnalités liées à la santé, confort au poignet, écran haute définition et contrôle rotatif intelligent.

Je cherche maintenant à mettre mes compétences en HTML et CSS au service de petits projets web : pages d'accueil, sites de présentation ou interfaces personnalisées.

Je suis encore en apprentissage, mais je suis motivé, attentif aux détails et prêt à relever des défis adaptés à mon niveau.

💬 Tu as une idée de site web ? N'hésite pas à me contacter pour qu'on en discute et qu'on voie ensemble ce qui est réalisable !

📸 Voici un aperçu de mon projet NEXORA !

Merci d'avoir pris le temps de lire mon annonce ! 🚀Bonjour à tous ! 👋

Passionné par le développement web, je travaille actuellement sur NEXORA, un concept de site vitrine pour une montre connectée, avec une identité visuelle futuriste et un univers cosmique violet.

✨ Ce qui rend mon projet particulier :

• ⭐ Des étoiles interactives qui révèlent des informations au survol.
• 💜 Des effets lumineux violets avec des halos et des dégradés.
• 🌌 Des lignes lumineuses qui s'étendent depuis les étoiles pour mettre en valeur les caractéristiques de la montre.
• 🎨 Des transitions fluides et une interface pensée pour offrir une expérience moderne et immersive.

Chaque étoile présente un élément différent du concept : verre résistant aux rayures, fonctionnalités liées à la santé, confort au poignet, écran haute définition et contrôle rotatif intelligent.

Je cherche maintenant à mettre mes compétences en HTML et CSS au service de petits projets web : pages d'accueil, sites de présentation ou interfaces personnalisées.

Je suis encore en apprentissage, mais je suis motivé, attentif aux détails et prêt à relever des défis adaptés à mon niveau.

💬 Tu as une idée de site web ? N'hésite pas à me contacter pour qu'on en discute et qu'on voie ensemble ce qui est réalisable !

📸 Voici un aperçu de mon projet NEXORA ci dessus !

Merci d'avoir pris le temps de lire mon annonce ! 🚀

I was reading brown's rust book and they let you highlight stuff and leave notes while reading. I wanted that on a site I'm building but really didn't want to wrap text in spans, so I ended up building it on top of the CSS Custom Highlight API.

If you haven't used it, it's pretty neat. You create Ranges, put them in a Highlight, register it with CSS.highlights.set('name', highlight) and style it with ::highlight(name). The DOM doesn't change at all.

Some things I ran into:

- ::highlight() only supports a few properties (color, background-color, text-decoration, text-shadow and a couple more). No padding, no border-radius, so no rounded highlights sadly

- overlapping highlights don't really layer, so I split them into segments and paint the innermost one on top

- support is Chrome 105+, Safari 17.2+, Firefox 140+. I went with no fallback since the whole point was not touching the DOM

For the UI styles I wrapped every selector in :where() so your CSS always wins, and everything can be themed with --penciled-* custom properties.

playground: https://penciled.org/playground/

repo: https://github.com/marcellosso/penciled

Curious if anyone else is using the Highlight API in production and what you ran into

https://github.com/P233/blanksheet

I built Blanksheet, a lightweight CSS reset that gives humans and AI agents a predictable starting point, without having to fight browser defaults.

It follows three principles:

• Blank — remove unwanted browser defaults.
• Normalize — make styles consistent across browsers.
• Survive — preserve useful defaults like focus indicators and link styling.

You can see what a page looks like with Blanksheet applied here: Live demo.

Every rule is documented, so both developers and AI agents can understand exactly what they're starting with.

I'd love to hear your thoughts!

button:focus {outline:0;} doesn't work.

Hi, I was wondering if you use any AI tool or not AI to automate the boring part of front-end (at least for me, i like back-end) specifically CSS and design. Is there something out there that is really good at almost everything and gives you the complete package? so responsive, very good UI and not a clone etc...

Hey everyone!

I've been working on a few animation-related side projects lately and decided to put them together in a personal portfolio.

I tried to make the portfolio itself a bit more interactive, with animations throughout the site and a showcase for some (imo cool) stuff/ideas.

Curious what you think of the design and how everything feels to use. Especially interested in feedback on the animations, mobile experience and whether it's clear what each project actually does.

PS: Check out the Showcase section for some cool stuff I like to experiment on

Portfolio

npm | github

Any feedback is welcome!

What is the difference between <html> and <body> tags ? When do use one or another?

html {

)

body (

)

Sometimes I get a bit obsessive over a few pixels

Not sure if the takeaway here is to try not to sweat the small things or just that GitHub is trash

A pure CSS spherical marquee with nine looping text bands

Perspective and opacity create the depth, and hovering a phrase pauses the animation
Includes controls for speed, direction, and text visibility

CodePen: https://codepen.io/Maseone/pen/01a13b15-8c28-7327-a226-4be8e09e4c89

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio

Reposting with an update now that the season is here. halloween.js is a free library that adds Halloween effects to a page, and the styling is meant to be done in CSS, not JS.

Everything reads custom properties: --halloween-color (defaults to currentColor, so it follows your theme), --halloween-eyes-width/-height and the same pair for witch, spider and tombstone, --halloween-screen-corner-size, --halloween-page-opacity and --halloween-page-z-index if you need the layer below a modal or cookie banner. Intensity presets (subtle, normal, party) are just body classes, and a value you set yourself always wins over the preset.

The effects live in a fixed overlay layer, so nothing shifts the layout. Turn on prefers-reduced-motion and the animations stop right away, no reload needed.

https://halloween.js.org
https://github.com/rogulia/halloween.js

check it out - https://www.shreyashtech.me/components/flow-sidebar

this is the code i've got so far, it should be centered, but it doesn't work for some reason

div.menu { /*menu*/

text-align: center;

background-color: darkblue;

margin: 2rem;

border-width: 0.2rem;

border-style: dotted;

border-color: blue;

border-radius:2rem;

float: left;

width: 8rem;

height: 29rem;

}

div.menu h2 {

color: white;

}

div.menu ul {

display: inline-block;

text-align: left;

list-style-type: none;

list-style-position: inside;

}

div.menu ul li {

background-color: lightblue;

border-radius: 1.5rem;

margin: 0.5rem;

padding:0.5rem;

text-align: center;

}

div.menu ul li:nth-child(odd) {

background-color: lightgrey;

}

hi! i've been trying to implement a linear scroll in my top bar, but its not animating. https://yuri-uran.nekoweb.org anyone know if i've missed something simple?