@css-only.dev
CSS stuff by Temani Afif (https://support.temani-afif.com) 💡 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
If, like many developers, you struggle to know when to use min() and max(), check this:
css-tip.com/min-max/
A simple trick to help you know which one to use. You no longer need to try both until one of them works.
Web Weekly 186 - Chrome’s new release cycle - window.stop() - Trusted Types on the baseline - <geolocation> style restrictions - HTML table mysteries - theme-color in Safari
The new Web Weekly is about to hit all the inboxes in just a moment! 🫣
If you're into web dev news close to the platform (you know, browser features, specs, and all the good stuff), you should check it out!
webweekly.email/archive/web-...
Three "Temani" in this one! I holding a new record, thanks for the mentionS 😁
btw, the link for the anchor article is wrong. You used the one for the of if() tip.
If, like many developers, you struggle to know when to use min() and max(), check this:
css-tip.com/min-max/
A simple trick to help you know which one to use. You no longer need to try both until one of them works.
Screenshot of my first work featured un the codepen spark
I still remember my first Spark 😇 (That took me weeks to notice and understand why I am getting so many notifications 😅)
codepen.io/spark/238
One day you're like "we should send a weekly newsletter about the cool stuff on @codepen.io and around".
Then 500 weeks go by. 🎉
codepen.io/spark/500
And I know most of you are looking for the hexagon shape, so in addition to the generator, here is another code with CSS variables to easily control the radius and the rotation.
css-tip.com/rounded-hexa...
Yes, you can have cool hover effects and animations!
Yes, might be a good idea. Will take note of it 😜
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!
css-generators.com/polygon-shape/
Adjust the setting, then copy the code.
It appears that I accidentally implemented the Squircle shape with my new generator! 👀
I extracted the code and added a variable to easily control the radius.
css-tip.com/squircle/
We need a "Mad CSS Working Group" edition 😁
codepen.io/beta
border-shape is going to be a lot of fun! 👀
Stay tuned ...
Amazing how we went from not being able to style selects, to doing things like this with them codepen.io/editor/cbols... (and this codepen.io/t_afif/pen/P...)
Here is a @codepen.io demo to compare the shape() implementation with the corner-shape one. Very close to each other.
codepen.io/t_afif/pen/K...
a CSS-only idea? 🧐
Here is a @codepen.io demo to compare the shape() implementation with the corner-shape one. Very close to each other.
codepen.io/t_afif/pen/K...
How many ways can you select <html> in CSS? @dxnny.fun says “challenge accepted” building off an exercise @css-only.dev did a little while back.
css-tricks.com/the-differen...
css-tip.com/root-selecto...
It appears that I accidentally implemented the Squircle shape with my new generator! 👀
I extracted the code and added a variable to easily control the radius.
css-tip.com/squircle/
minimal demo: codepen.io/t_afif/pen/G...
Body and tooltip are inside the same containing block , body has relative and tooltip fixed so tooltip is laid out after so at the end the anchor is laid out before and it works.
If your anchor is having pos: absolute and is after the Tooltip, then it's dead ... The only solution in this case (a crazy one) is to make the tooltip have pos: fixed and body have pos: relative so you trap the anchor inside a containing block (body) and tooltip is outside of it.
Demo: codepen.io/t_afif/full/... via @codepen.io
To celebrate the new "border-shape" property being tested in @developer.chrome.com I made a nice little tool for helping you generate CSS shape functions.
Try it here:
ailab.nordcraft.site/pen-tool
Demo: codepen.io/t_afif/full/... via @codepen.io
Something to play with.
And it's live!
A new CSS generator for fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well!
css-generators.com/fancy-frame/
It's responsive and works with any elements, including images.
Play with the settings and show me your best frame 👇
And it's live!
A new CSS generator for fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well!
css-generators.com/fancy-frame/
It's responsive and works with any elements, including images.
Play with the settings and show me your best frame 👇
Now that's what I call a select demo.
Don't give me such ideas 😆
This is the kind of content I’m here for 😂
