💡CSS Tip! Create a tooltip that follows an anchor... with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!show more

💡 CSS Tip! Two circles, one arrow, and CSS... magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.show more

A list (with code) of cool framer-motion and Tailwind... CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointershow more

No JavaScript needed 2 lines of CSS to create... a swipe animation ✨show more

i'm late to this but CSS Minecraft (by Benjamin... Aster) is the coolest CSS hack i've ever seen and it's not close. what a feat. there's no javascript on this page!!show more

💡 CSS Tip! Do you know that One-Time password... field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.show more

hardcoded tooltip CSS works until it meets the edge... bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct originshow more

The power of @ property Without it → CSS... treats --progress as text → no animation With it → CSS knows it's percentage → smooth animationshow more

it's finally time... this is css clicker, a fully-featured... incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!show more

How to create a Simple Sushi 🍣 Restaurant Landing... Page. I’ll provide you with the HTML, CSS, and JavaScript code snippets to build it step by step.show more

you can create a CSS only carousel with CSS... `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript requiredshow more

2020: All I need to learn is HTML, CSS,... and JavaScript, some backend, and get a good job. Tech is the future. 2026:show more

I used ChatGPT to create the Matrix in 49... lines of HTML/CSS/JS. Hard to believe this took just 5 mins.show more

How I build with Claude Fable 5 1. CSS... position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️show more

reminder that you can also create lighting effects with... a little css + svg filters <feSpecularLighting> + <fePointLight> bound to pointer position 👨‍🍳show more

Tip: *only* using CSS you can apply styles to... a number input conditionally depending on whether its value is within our out of range 🤯show more

TIL multiple CSS transform functions of the same type... are additive. I used it to add a turbulence effect that doesn't overwrite existing or in-progress transforms.show more

A little sneak peek into one of many animations... done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.show more

Claude Sonnet 3.7 Coding Test Prompt: Create a single... HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.show more

One of the most underrated CSS props is definitely... scroll snapping, it feels insane to me that these carousels are possible with CSS alone 🤯 This just went live on AtoBeach - meaning gesture support now works! 🥳show more

CSS is mind-blowing 🤯 Browser does what it can... to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">show more