mastodon 4.7.3CSS stuff by Temani Afif
💡 https://css-tip.com
🧩 https://css-shape.com
💫 https://css-loaders.com
📝 https://css-articles.com
⚙️ https://css-generators.com
🎨 https://css-pattern.com
✨ https://css-only.art
🎮 https://css-games.com
❓ https://css-quizzes.com
I verified myself because I know I am a real person. You can trust me, I know who I am.
It seems we can now customize the select element, right? right?!
Demo: https://codepen.io/t_afif/pen/PwGPJOB via :codepen: @codepen@fosstodon.org
Bending a straight line using pure CSS?! 👀
Another cool demo in progress powered by border-shape. It's coming to :chrome: Chrome next week! 🤩
📝 New CSS Article!
If you have seen my graph theory demo and wondered how it works, then the article is finally live!
https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/
I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm.
Modern CSS is fun!
What's the best way to showcase modern CSS features? By making games!
This time it's the famous :chrome: Dino Game 🦖
https://css-tip.com/dino-game/
100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀
Don't search for the JS, there is none.
A classic rounded button: boooring!! 🥱
A squishy animated button: Yes, please!! 🤩
https://css-tip.com/squishy-button/
Another cool demo powered by the powerful shape() function
I thought I had found a bug that prevented counter() from working properly, but it was a feature!
https://css-tip.com/counter-gotcha/
Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working.
Thanks to @mia@front-end.social for the insights
Now that shape() is available in all major browsers, let me remind you that you can use my online generator to create any polygon with ... rounded corners!
https://css-generators.com/polygon-shape/
Adjust the setting, then copy the code.
Stack Overflow asked me to propose a CSS Challenge, and I couldn't refuse.
https://stackoverflow.com/beta/challenges/79908564/challenge-17-the-accurate-selection
It's about Selectors and more! There is nothing to win (except a profile badge), but it's a fun challenge to illustrate your creativity.
💡 CSS Tip!
A sliding liquid reveal effect, because why not! 🫗
https://css-tip.com/sliding-liquid/
Another demo powered by shape() and made easy with my online generators: https://css-generators.com/wavy-divider/
It's been a while since my last CSS Pattern, so let's work on new ones!
Who found the easter egg in my CSS-only Dino game? 🥚
A "rocket mode" to fly above everything! 👀
Give it a try: https://css-tip.com/dino-game/
💡 CSS Tip!
Add an infinite wobbling animation to your image with a simple code.
https://css-tip.com/wobbling-animation/
Powered by "complex" shape()s that you can easily get from my online generator!
💡 CSS Tip!
For years, we've had the "z-index, stacking context" nightmare, but we will soon have a worse nightmare related to Anchor Positioning 😱
When it doesn't work, it's frustrating, so it's time to learn how it really works.
https://css-tip.com/anchor-issues/
It's not as simple as you might think!
RE: @csstricks@mastodon.social
Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math.
Now, using the shape() function, I can easily create complex shapes and animate them! 👇
@ppk It would be the same complexity as what you are doing for --contentmd since it only changes when that variable changes.
Another alternative is to make the p element container-type: inline-size and you have max-width: 100cqw (but the float behavior will be slightly different as they will wrap as a block)
a11y question: Let's suppose I have an empty html element somewhere on the page with 0 content, invisible*, having position:absolute (or fixed). It has no purpose in the HTML (only used for some CSS stuff).
Is it a good idea to add the "inert" attribute? Or should I do nothing?
