Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp yesterday
#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

#CSS #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Text that can wrap depending on available space in the bottom left corner of a card with padding. At the limit between the card's padding area and content area, there's an inner border interrupted in the bottom left corner by the text box. The text is contenteditable.
Text that can wrap depending on available space in the bottom left corner of a card with padding. At the limit between the card's padding area and content area, there's an inner border interrupted in the bottom left corner by the text box. The text is contenteditable.
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp yesterday
#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

#CSS #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Text that can wrap depending on available space in the bottom left corner of a card with padding. At the limit between the card's padding area and content area, there's an inner border interrupted in the bottom left corner by the text box. The text is contenteditable.
Text that can wrap depending on available space in the bottom left corner of a card with padding. At the limit between the card's padding area and content area, there's an inner border interrupted in the bottom left corner by the text box. The text is contenteditable.
Andreu Botella :verified_enby:
@andreu@mastodon.andreubotella.com  ·  activity timestamp 3 days ago

Did you know that Safari supports a percent value for -webkit-line-clamp?

I thought I'd look into it; maybe it could be precedent for a line-clamp-related discussion in the CSS Working Group

Turns out, not only didn't it do what I thought, but its implementation has an off-by-one error 😭

#css

alcinnz
alcinnz boosted
Joe Crawford
@artlung@xoxo.zone  ·  activity timestamp 4 days ago

Thursday is the 35th instance of #IndieWeb Front End Study Hall. In a time of trouble gathering with others to learn to make better websites with #HTML and #CSS with folk of all skill levels is terrific. Bring www wishes & confusions and let's learn together. https://events.indieweb.org/2025/08/front-end-study-hall-035-bkD9G9V4HZaz

alcinnz
alcinnz boosted
Samuel Plumppu
@Greenheart@fosstodon.org  ·  activity timestamp 5 days ago

Wow! You know that #Web#Tech is getting really good when you are able to replace significant amounts of #JavaScript with a few lines of #HTML and #CSS. Best part is the fact that you get #a11y out of the box with native widgets 🙌

A few examples: <dialog closedby="any">, stylable <select> and even HTML autocomplete/typeahead using the <datalist>.

#WebDev#UseThePlatform
Samuel Plumppu
@Greenheart@fosstodon.org  ·  activity timestamp 5 days ago

Wow! You know that #Web#Tech is getting really good when you are able to replace significant amounts of #JavaScript with a few lines of #HTML and #CSS. Best part is the fact that you get #a11y out of the box with native widgets 🙌

A few examples: <dialog closedby="any">, stylable <select> and even HTML autocomplete/typeahead using the <datalist>.

#WebDev#UseThePlatform