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
- 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…
-
View full threadoh wow, that's actually way simpler than what I was trying with animations! I'm implementing this right away, thanks!
- and if the width is fixed/known you can get rid of margin and use translate: calc(-100% + w). Or you make the parent a container and use translate: calc(-100% + 100cqw)
- like this: codepen.io/t_afif/pen/q... ?
- 📝 New CSS Article! My first article about using shape() is live. I am officially a shape() spammer so get ready 🫣 Learn the "arc" command by creating flower-like shapes.
- Downside is Firefox still won't render it. I *think* it's in pre-release at the moment.
- There is a warning at the beginning of the article:
- ⚙️ 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
-
View full threadAnd is probably something that would be good outside of CSS as well? Anyhow, as I said, I’m sorry
- no, because I want it in the CSS to apply it to elements and rely on CSS features. The goal is not to have standalone shapes and include them in HTML. Two recent examples I made (and I still have many for the future): css-tip.com/rounded-hexa... css-tip.com/arrow-like-b...
- That just shows that paths should not be limited to the SVG spec but live and prosper on its own and be able to be expressed in alternative ways
- keep reading the spec until the example ... it's not only path expressed differently. Shape can be built using variables, calc, different units, math functions, etc etc ... path uses numbers that are nothing but hard-coded pixel values. This makes a huge difference.
- I collaborated a bit with ChatGPT to flesh out the ideas: gist.github.com/voxpelli/e7c... I do not mean that SVG is enough, rather that the path element should be allowed to shine on its own as it can do stuff like what you are pointing out :)
- path cannot do what I want. The converter I am sharing is not the goal of using shape(), it's a tool to help with more complex stuff I want to achieve. See the Spec to understand why shape() was created: drafts.csswg.org/css-shapes-2...
- [Not loaded yet]
- But we will have a "new" fun. Imagine a shape() where you can add var(), calc(), etc ... A lot of possibilities for drawing and animating 😉
- If combined with a couple of other basic operations on top, like in Android’s VectorDrawable, then it’s pretty much all that one need for most things
- I am not understanding what you mean exactly but if you meant SVG alone is enough to do most of the things then let me tell you that for me it's very very limited and it fails to achieve (at least in a flexible way) most of the things I want.
- This looks great. One question: how is the aspect ratio determined?
- It's the ratio of the smallest rectangle where the shape can fit. Inspect the code of the examples and you will notice no extra white space around the shape
