Víctor Fernández de Alba from https://kitconcept.com on Tailwind and Plone #plone #plone6 #wpd2025 #CMS #Python #React #volto #opensource #community #tailwindcss #css #webdesign https://youtu.be/sqPtMBCgbOY
Recent searches
Search options
#css
74 posts55 participants3 posts today
#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.
RCSS：結合 Rust 語法的 CSS 擴展
➤ 運用 Rust 語法打造更強大的 CSS
✤ https://github.com/ved-patel226/RCSS
RCSS 是一個新穎的樣式語言，它將 Rust 的語法結構引入 CSS，旨在提供更強大的功能和更好的可維護性。它結合了 Rust 的可靠性以及類似 SASS 的特性，如巢狀結構和變數。目前已完成核心功能，包含 Rust 風格的語法解析、變數與巢狀結構的支援、無參數函式的支持，以及 VS Code 語法高亮擴展。未來計畫包含支援參數化的函式、導入功能、程式碼格式化工具、更完善的錯誤處理機制，以及 WASM 支援。
+ 「這個想法很棒！如果真的能將 Rust 的強大功能帶入 CSS，那絕對能解決很多前端開發的痛點。」
+ 「看起來很有潛力，但還需要看看它的實際效能和易用性如何。希望未來能有更多實際案例分享。」
#開發工具 #CSS #Rust
GitHubGitHub - ved-patel226/RCSS: just an extension of css with rust syntaxjust an extension of css with rust syntax. Contribute to ved-patel226/RCSS development by creating an account on GitHub.
CSS Carousels, by @geoff (@csstricks):
CSS-Tricks · CSS Carousels | CSS-TricksChrome has prototyped these features and released them in Chrome 135. Adam Argyle has a wonderful explainer over at the Chrome Developer blog. Kevin Powell has an equally wonderful video where he follows the explainer. This post is me taking notes from them.
#Development #Approaches
CSS custom properties vs. Sass variables · How you can combine both with a hybrid approach https://ilo.im/1637te
_____
#Sass #CSS #CustomProperties #Browser #DesignSystems #WebDesign #WebDev #Frontend
New CSS Article!
Excited about the new attr() function? Learn how I am using it to style the native progress element with a few lines of CSS. It's the article where I using if() as well 
https://frontendmasters.com/blog/custom-progress-element-using-the-attr-function/
frontendmasters.comCustom progress element using the attr() function – Frontend Masters BlogNow that we're starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with is easier.
"UA+ (User agent plus) is a different type of reset style sheet. Instead of mostly resetting and normalizing properties, we focus on improving existing user agent styles and adding new styles only where browsers fall short." #CSS https://fokus.dev/tools/uaplus/
fokus.devuaplus.css | fokusUA+ (User agent plus), a different type of reset style sheet
Et tu, Grammarly? "Basically the #CSS variable `--rem` is now 'considered harmful' because Grammarly are bad web citizens. They could generate a random variable name. They could also not inject their code into every web page ever, unless the extension is actually used." https://dbushell.com/2025/03/29/et-tu-grammarly/
dbushell.comEt tu, Grammarly?
More from 
David Bushell
Bouncy Range Slider!
Demo: https://codepen.io/t_afif/full/ogNRWMN via @CodePen
A funny (and useless) CSS-only experimentation using modern features.
Chrome-only
GIF
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.
Sur #Gemini, c'est tous les jours, le jour nu sans #CSS ! https://css-naked-day.org/
css-naked-day.orgCSS Naked DayApril 9 is CSS Naked Day!
Happy CSS Naked Day! 
I am participating in #CSSnakedDay for the first time in my life!
If you wanna see some #HTMLporn… My website is naked! 
This celebration would be the perfect occasion to get a couple of fun HTML stickers I made 
Get them here, and, if you’d like, leave a donation to support my work! 
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.
Expanding CSS Shadow Effects, by @frontendmasters.com:
https://frontendmasters.com/blog/expanding-css-shadow-effects/
frontendmasters.comExpanding CSS Shadow Effects – Frontend Masters BlogShadows don't have to be used for... shadows. Inset shadows can layer over backgrounds and because they are animatable, it's just another tool for drawing what we want to the page.
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
