Why I 
the web.
WebTUI is a modular #CSS library that brings the beauty of Terminal UIs to the browser. 
webtui.ironclad.shWebTUIModular CSS Library that brings the beauty of Terminal UIs to the browser
Recent searches
Search options
#frontend
30 posts18 participants1 post today
Some nice #SVG tricks. Animated "Knight Rider" bars, table of contents tweaks, and more.
Continued thread
You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
Continued thread
And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.
Live demos on @codepen
#Development #Announcements
Default 'h1' styles are changing · What this means for front-end developers https://ilo.im/1639ni
_____
#Headings #UserAgent #Styles #Sections #Rendering #Specification #HTML #Browser #WebDev #Frontend
"Default styles for h1 elements are changing"
MDN Web DocsDefault styles for h1 elements are changing | MDN BlogBrowsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.
Continued thread
Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.
So basically, it's again just one `background` + one `background-blend-mode` property.
Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER
Continued thread
And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.
Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!
Continued thread
A much newer @codepen demo: smoothly connected cards https://codepen.io/thebabydino/pen/azbLBJy - continuous backgrounds across all, concave roundings + drop shadows, responsivity.
Ever want a box where the padding or content box (inner) rounding is bigger than the border-radius?
You can do it with a single element, no pseudos! Here's my take on it, including the particular case where you don't want any outer rounding, but sharp corners https://www.reddit.com/r/css/comments/1jvs81s/comment/mmeibts/
Live demo on @codepen
https://codepen.io/thebabydino/pen/rNJbEqM
#tinyCSStip `clip-path` or `mask` are applied after `filter`.
This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.
We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.
No Web Without Women 
Love this website which shows the important role women played on the invention of the World Wide Web :)
No Web Without WomenNo Web Without WomenAn educational website featuring a collection of innovations by women in the fields of computer science and technology.
Here's a quick breathing box demo with `clip-path: shape()` on @codepen.io: https://codepen.io/thebabydino/pen/ZYENVOQ
Working in Chrome 135 and Safari 18.4! 
GIF
Continued thread
Here's also a stepped `conic-gradient()` effect, with a grain effect applied https://cdpn.io/pvoBeZP
For more on the grain effect, check out this older post https://mastodon.social/@anatudor/110394395163731287
Continued thread
By the way, the code is heavily commented https://codepen.io/thebabydino/pen/MYWxeew
So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.
GIF
Continued thread
Same visual result in both cases, it's just that the #CSS version specifies the entire RGBA value + (equidistant) stop positions for each stop, while the #SVG #filter one only specifies the alpha values for each stop. Given those are equidistant too, a `steps()` way of setting them would make sense.
More stepped gradient examples on @codepen
https://codepen.io/thebabydino/pen/jOoLmBv
These all use the same SVG filter.
Continued thread
If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!
Here's a @codepen demo illustrating this https://codepen.io/thebabydino/pen/VYwObZN
Pure #CSS, no SVG.
I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:
From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.
See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz
#Development #Previews
Better typography with ‘text-wrap: pretty’ · Safari brings unmatched polish to web typography https://ilo.im/1637w9
_____
#Typography #Justification #Hyphenation #Design #WebDesign #WebPerf #WebDev #Frontend #CSS
WebKit · Better typography with text-wrap prettySupport for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web.