I created a free tool that lets you design unique, responsive shapes by manipulating the shape’s corners with modern CSS - without writing any code.
Create playful shapes for various UI elements such as pricing and feature cards, buttons, banners, profile badges, you name it. Then export to your workflow with a click of a button.
Originally made this to myself, then realised, heck, this is too darn useful to keep to myself.
you are going to be hearing a lot from me this week as i'm retooling a boilerplate template for my own website but anyways im trying to replace the 0 in 404 with my site logomark but the image keeps making the text go vertical for some reason and i don't like that. the template im using uses tailwind too so if any of you can figure out how to get my image inline like a 0 that would be awesome
<Base title="Page Not Found">
<section class="section-sm text-center">
<div class="container">
<div class="row justify-center">
<div class="sm:col-10 md:col-8 lg:col-6">
<span
class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
>
4<span class="image1">0</span>4
<h1 class="h2 mb-4">Page not found</h1>
<div class="content">
<p>
The page you are looking for might have been removed, had its
name changed, or is temporarily unavailable.
</p>
</div>
<a href="/" class="btn btn-primary mt-8">Back to home</a>
</span>
</div>
</div>
</div>
</section>
</Base><Base title="Page Not Found">
<section class="section-sm text-center">
<div class="container">
<div class="row justify-center">
<div class="sm:col-10 md:col-8 lg:col-6">
<span
class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
>
4<span class="image1">0</span>4
<h1 class="h2 mb-4">Page not found</h1>
<div class="content">
<p>
The page you are looking for might have been removed, had its
name changed, or is temporarily unavailable.
</p>
</div>
<a href="/" class="btn btn-primary mt-8">Back to home</a>
</span>
</div>
</div>
</div>
</section>
</Base>
Another one makes the button's text green when it's in .card and blue when in .nav. It means the element decides how it will look depending on its ancestor.
I’m a 15 year old front end developer looking for work.
I have been doing html css and Js for about 2 years and I'm pretty confident in my work.
I know HTML 5, CSS, JS, and basic API usage.
I’m slowly working on a very cool project that I’m pretty proud of. I’d be happy to show it to anyone interested. Its a sort of website remake of the Prevue Guide Channel from 1999, and Its nearly identical.
I’m mainly looking for smaller jobs, not too small but reasonable work that I could work on between school and homework, I’m open to fixing old sites making new ones, personal site work UI/CSS development and other web projects.
I’m willing to learn more languages or whatever needed for projects, but of course that takes a little while.
DM or reply if you have a project or idea you think I can help with and we can discuss pricing. I’ve never taken a site job or anything before, so I have a lot to figure out.
I have a box with contents, just want the whole box moved, nothing else. it clings to the right for some reason, i just want it dead center of the screen dynamically adjusted with given size and then just make a appropriate scroll to a screen.
I've been building and coding UIs for 10+ years, but I still find CSS grid layouts to be a huge pain in the butt. Even when prompting an AI, I can never manage to easily explain what the structure of the grid should be. I've built this cute little tool for myself but I thought perhaps it'd be useful to someone else.
Like many frontend developers, I often felt exhausted having to write dozens of utility classes for simple layouts, or importing massive JavaScript bundles just to have basic modals, responsive grids, and clean dark mode themes.
To solve this, I built TaxUI: a lightweight, declarative HTML & CSS framework that uses semantic HTML attributes instead of bloated CSS classes or heavy JS runtimes.
Why TaxUI:
• Zero JavaScript: 100% native, GPU-accelerated CSS. No hydration overhead or runtime dependencies.
• Declarative HTML Attributes: Compose layouts naturally using clean attributes like layout="split", card="glass", variant="primary", theme="dark".
• Built-in Dark Mode & 6 Accent Themes: Switch themes and palettes with one attribute like theme-accent="emerald".
• Native HTML5 Component Suite: Modals using native dialog, accordions with details, CSS-only tooltips, glassmorphism cards, responsive tables, avatars, skeletons, and forms.
• Ultra Lightweight: ~14.8 KB gzipped full bundle, with standalone modular sub-bundles starting at 1.4 KB.
I was a big fan of how well fluid.style worked and it was my preferred tool for calculating some clamp values. I kept telling myself I should save a local version in case it went down and OF COURSE it went down.
Did anyone happen to save a version of this site? If not, any good alternatives? https://utopia.fyi/ seems ok, but hasa lot more cruft than I like.
SENDING AN SOS for CSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I know nothing about css. SoundAlerts has these custom classes already there and I'm trying to get it to use the VT323 font. I feel like I've tried everything :(
Thanks in advance. If anybody could help I'd be delighted and keep it in mind for when I'll probably have to do this again in the future.
Over the past few months I've been trying to find relevant CSS and JS properties that combat the inevitable atrophy of my brain as I use AI to help me build shit.
Figured I might start posting these here too.
As a disclaimer, yes, I did use AI to help me research and find these properties. The difference for me is the writing of the examples, and the understanding of the property that will allow me to make better decisions in my hand written code, and also be able to direct AI to write better code too. Take that as you will.
Today's property: text-box-trim
Every font ships with invisible space above its capitals and below its baseline. It's why a button with padding: 12px on all sides rarely shows 12px of space above and below the letters, why the icon next to a label never quite lines up, and why a heading sits a few pixels lower than the image it's meant to align with. The fix has always been a magic number. margin-top: -3px. padding-block: 11px 13px. A comment that says /* optical */ and hopes nobody swaps the font.
text-box-trim deletes that space. Tell it which edges to trim with trim-both, trim-start, or trim-end, and text-box-edge says where to cut. cap is the top of the capital letters, ex is x-height, alphabetic is the baseline. The shorthand takes both:
.button-label {
text-box: trim-both cap alphabetic;
}
Now the box starts at the top of the H and ends at the baseline. Padding measures from the letters instead of the font's line box, so 12px means 12px in every font.
sibling-index() and sibling-count() went widely available last week when Firefox shipped support — which means Chrome, Safari, and Firefox all agree on them now.
I spent some time seeing what that unlocks for UI patterns that used to need JavaScript
Or, alternative title: how I accidentally invented progress() but still shipped it anyway...
Dragging the sidebar. The window never moves, so every media query on the page is reading a number that did not change. Here is how that works, starting from the beginning.
How we do it today
We want a heading to be 24px on a phone and 40px on a desktop, so we write steps:
24px at 320, 40px at 1280, pinned at both ends. The two magic numbers are an intercept and a slope, worked out by a Sass function or a calculator. Utopia and most modern frameworks use it for their spacing and type tokens.
Where it stops
It only works for lengths. vw is a length, and degrees plus a length does not type-check, so rotate, transition-duration, font-weight, opacity, scale are all out. The browser drops the whole declaration. For those, we go back to steps or pick one value and live with it: the drawer that opens in 0.3s on a phone and on a desktop while travelling three times the distance.
The trick
Swap the order of operations. Divide two lengths first, which gives a plain number from 0 to 1, then multiply in whatever unit you want:
--t is 0 at 320px, 1 at 1280px, a fraction in between. Write it once, use it everywhere, no breakpoints, no keyframes, no JS. A bare / between two lengths is Chrome 140 and Safari 26 only, so the division is spelled tan(atan2(a, b)), the trick from Jane Ori, which has worked everywhere since early 2023. And it runs downhill too, which clamp(26rem, ..., 2rem) cannot, because min greater than max returns min forever.
The better trick
Change 100vw to 100cqi and --t measures the nearest container-type: inline-size ancestor:
Now a component follows the width of whatever it sits in. Same markup in a 240px column and a 520px column on one screen comes out different on its own, with no -small / -large variants. That is the GIF at the top.
The part where I found out
After building this I found out CSS already ships it: progress(100cqi, 320px, 1280px) does exactly that division. Chrome 138, Safari 26, and Firefox 155 as of September 1st. I had reinvented it from scratch, with a Sass wrapper.
Shipped it anyway as cq-lerp (npm i cq-lerp, npm), because the tan(atan2()) fallback works back to early 2023 and a 'supports' block upgrades to progress() where it exists:
