CSS by T. Afif
𝗖𝗦𝗦 stuff by 𝗧𝗲𝗺𝗮𝗻𝗶 𝗔𝗳𝗶𝗳
💡 https://css-tip.com
🧩 https://css-shape.com
💫 https://css-loaders.com
📝 https://css-articles.com
⚙️ https://css-generators.com
🏆 https://css-challenges.com
🎨 https://css-pattern.com
🎨 https://css-only.art
- [Not loaded yet]
- CSS challenge for @kizu.dev, @css-only.dev, @ishadeed.com and all the other CSS wizards: I'm trying to define an animation on hover that scrolls truncated text to reveal the entire sentence. Except somehow make the text stop at the right moment instead of scrolling completely out of view…
- like this: codepen.io/t_afif/pen/q... ?
- oh wow, that's actually way simpler than what I was trying with animations! I'm implementing this right away, thanks!
- 🤩 I’m very (VERY!) excited about CSS `ident()` – a feature I proposed and specced – getting prototyped. This allows me to reduce the amount of CSS I have to write when multiple items that behave in the same need to have a unique name. See brm.us/ident for an intro.
- So much great new content about CSS shape()! I love it where we can release a feature without too much noise and the users of the feature are the ones to tell its story.
- Creating Flower Shapes using clip-path: shape() Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.
- [Not loaded yet]
- Meet Temani, the CSS shape() expert 😎 Great work as usual!
- ⚙️ New CSS Generator! Save this link for the future. A tool to easily convert any SVG shape into a CSS one in no time. Powered by the new shape() function! 🤩 css-generators.com/svg-to-css/ ✅ Single-element ✅ Responsive ✅ No more ViewBox headaches
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
- Want gradient text? Confused about whether you still need a prefix for `background-clip: text`? Do you still need to use `-webkit-text-fill-color` or you can use it unprefixed or just use `color`? All answers here www.reddit.com/r/css/commen... complete with demos + animation + gradient glow. #CSS
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
- ⚙️ New CSS Generator! Save this link for the future. A tool to easily convert any SVG shape into a CSS one in no time. Powered by the new shape() function! 🤩 css-generators.com/svg-to-css/ ✅ Single-element ✅ Responsive ✅ No more ViewBox headaches
- [Not loaded yet]
-
View full threadIt will soon be possible with a simple copy/paste, stay tuned 🫣
- Another generator coming in 3, 2, 1... 🤫
- #CSS only with scroll driven animation rad work @donotfold.bsky.social try it codepen.io/donotfold/pe...
- It's always about creating shortcuts — a race to ship. This *will* be used and it'll make designers feel empowered. It's just sad that the perceived empowerment chips away at the value of the craft. My hope is the good designers are gonna see this for what it is: a gimmick or at best, a prototype
- wooahh Figma's new Sites thing produces no semantic HTML at all. Every single element is a div. Incredibly inaccessible Example: plugin-value-scrum.figma.site
- Using <div> everywhere is the same as naming every object in the world "thing". We use words like "bike", "plant", and "table" because they give meaning to what you are talking about. The same applies to HTML: If you show a heading then it should be a heading and not a "thing" that looks like one.
- wooahh Figma's new Sites thing produces no semantic HTML at all. Every single element is a div. Incredibly inaccessible Example: plugin-value-scrum.figma.site
- shape(): A New Powerful Drawing Syntax in CSS from @chriscoyier.net on @frontendmasters.com frontendmasters.com/blog/shape-a... #CSS #FrontEnd #WebDev #WebDesign
- Some history of how the shape() function started: techblog.wikimedia.org/2020/11/23/w... Tl;dr: I was annoyed that the wikipedia popup balloons were JS-sized SVGs.
- shape(): A New Powerful Drawing Syntax in CSS from @chriscoyier.net on @frontendmasters.com frontendmasters.com/blog/shape-a... #CSS #FrontEnd #WebDev #WebDesign
- [Not loaded yet]
- The @codepen.io logo using the new shape() function. codepen.io/t_afif/full/... Do you think SVG is hard? Wait until this beast becomes widely supported 😈
-
View full threadPolishing a few things and I will release it soon 👍
- 👀
- [Not loaded yet]
- [Not loaded yet]
- And a new version... I like it, but maybe I should get rid of the lightsaber to make it less evil (CSS is inherently evil anyway, but deep down is good).
- [Not loaded yet]
- Let's play a CSS game. Your HTML code is nothing but a random text inside the body. What is the smallest code to center it horizontally and vertically? (hacky code allowed!) Here is my attempt: 1 selector, 2 properties, 47 characters (minified) Can you find shorter?
- I had the bright idea of posting comiCSS daily on Bluesky and LinkedIn, to promote the comic and gain some engagement. It has been going for 10 days and so far it has resulted in a gain of -3 followers in each platform 😅😭 Follow @comicss.art here or on LinkedIn: www.linkedin.com/company/comi...
- If you like my work, remember that praise doesn't pay for it... but you can! So please consider supporting it... and getting smarter with me! For example see how to code a cool animated cube with minimal HTML, under 30 #CSS declarations & an under 350 bytes #SVG #filter! ko-fi.com/post/Cool-CS...
- Want a checkerboard pattern? No need to use multiple `linear-gradient()` layers anymore. `conic-gradient()` has been supported cross-browser since 2020! PS: if you can, upvote stackoverflow.com/a/65129916/1... to make it the top answer and get more people (and AI) to use modern, well supported #CSS
- [Not loaded yet]
- [Not loaded yet]
- What's something about the CSS or the way you think about it that's completely different compared to 3 years ago? Did you change a habit, approach, or technique? Think of layout, usage of custom properties, how you work with color, etc.
- [Not loaded yet]
- ⚙️ New CSS Generator It's finally possible. A blob shape using only CSS! 🤩 css-generators.com/blob/ Play with the setting and get a cool shape in no time. ✅ Single element (works with images) ✅ One line of code ✅ Responsive ⚠️ Limited support (Chrome and Safari for now) ⚠️
- [Not loaded yet]
- <details> elements don't have to be so fugly try this one nerdy.dev/nice-details
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
- This weeks CodePen challenge got me testing the very new, very experimental, and very cool CSS Carousel spec. Horizontal and Vertical carousels, ::scroll-marker, position-anchor, and more. Demo only works on Chrome 135+ 100% CSS 🤯 #CodePen #CodePenChallenge #CSS
- [Not loaded yet]
- while on garden leave… I suppose I'll tend to a #CSS Zen Garden ⤷ nerdy.dev/zen-garden-l...
- [Not loaded yet]
- [Not loaded yet]
- Irregular shaped image with both convex & concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport. Because someone asked how to www.reddit.com/r/css/commen... Live on @codepen.io codepen.io/thebabydino/... #CSS #subgrid + #SVG #filter magic.
- [Not loaded yet]
- [Not loaded yet]
