π CTA βLβ sign CSS
CSS has gotten to the point where things that, a few years ago, I would have used SVG and JavaScript for I can now do in just HTML and CSS. Being able to rely on the browser for layout, plus :has()
, make things so much more flexible and responsive.
Last night I put together a quick demo of a Chicago Transit Authority βLβ sign generator.
See the Pen CTA βLβ sign CSS by Noah (@noleli) on CodePen.
There are a few things I like about this:
- The entire sign is sized based on the font size.
aspect-ratio
, combined withfr
andem
units, means that you set the font size, and the whole rest of the sign β its overall aspect ratio and the ratio between the colored bars and the rest of the sign β is proportionally correct..sign {
font-size: clamp(1.30rem, calc(-0.05rem + 6.73vw), 5.00rem);
height: 1.8em;
aspect-ratio: 8;
grid-template-columns: 1fr 4fr 1fr;
} - The train line color stripes are automatically laid out by a grid layout. Being able to add and remove stripes and have the rest of them adjust is very handy.
- As many others have noted, the
:has()
selector lets you easily hook up checkboxes and radio buttons to other parts of the DOM. Itβs new, so itβs neat :)
Most of this isnβt exactly new, but when it all comes together it can be quite powerful.