CSS by T. Afif
@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
π‘ 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
Pinned
CSS by T. Afif
@css-only.dev
Β· Apr 15
Advertise with CSS Tip
Promote your product with a personalised and attractive ad starting from 150$/month.
css-tip.com
If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work!
Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.
css-tip.com/advertise/
Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.
css-tip.com/advertise/
Reposted by CSS by T. Afif
January 12, 2026 at 1:30 PM
January 12, 2026 at 1:30 PM
yet another grifter making money (using ads) with other people works π
January 12, 2026 at 7:33 AM
yet another grifter making money (using ads) with other people works π
The fixed dimensions are just the initial configuration as I am adding a resize to update them later. My intention wasn't to use fixed sizes.
January 11, 2026 at 12:30 PM
The fixed dimensions are just the initial configuration as I am adding a resize to update them later. My intention wasn't to use fixed sizes.
Chrome-only (maybe safari as well) using unit division: codepen.io/t_afif/pen/W...
Untitled
...
codepen.io
January 11, 2026 at 11:10 AM
Chrome-only (maybe safari as well) using unit division: codepen.io/t_afif/pen/W...
Good to know!
I have 50 crashes there π
I have 50 crashes there π
January 11, 2026 at 9:15 AM
Good to know!
I have 50 crashes there π
I have 50 crashes there π
Two more bugs while I am on it
issues.chromium.org/issues/47481...
issues.chromium.org/issues/47482...
issues.chromium.org/issues/47481...
issues.chromium.org/issues/47482...
Chromium
issues.chromium.org
January 11, 2026 at 9:08 AM
Two more bugs while I am on it
issues.chromium.org/issues/47481...
issues.chromium.org/issues/47482...
issues.chromium.org/issues/47481...
issues.chromium.org/issues/47482...
I am a "lazy bug reporter", but that's not a good strategy ...
I have been avoiding a bug for a few months, but it has started to annoy me too much π
issues.chromium.org/issues/47482...
I have been avoiding a bug for a few months, but it has started to annoy me too much π
issues.chromium.org/issues/47482...
Chromium
issues.chromium.org
January 11, 2026 at 8:10 AM
I am a "lazy bug reporter", but that's not a good strategy ...
I have been avoiding a bug for a few months, but it has started to annoy me too much π
issues.chromium.org/issues/47482...
I have been avoiding a bug for a few months, but it has started to annoy me too much π
issues.chromium.org/issues/47482...
Reposted by CSS by T. Afif
January 8, 2026 at 7:33 PM
Reposted by CSS by T. Afif
π‘CSS Tip!
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
January 8, 2026 at 10:35 AM
π‘CSS Tip!
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
And another cool property that I am sure will be underrated in the future is position-area that can simplify the code.
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
January 8, 2026 at 7:47 PM
And another cool property that I am sure will be underrated in the future is position-area that can simplify the code.
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
January 8, 2026 at 7:33 PM
Reposted by CSS by T. Afif
comiCSS has games!
Games about CSS, built with CSS. The first one is an anagram challenge focused on properties. Can you find all 26 CSS properties by unscrambling the letters?
Try it here: comicss.art/games/1/
#css #games #anagrams
Games about CSS, built with CSS. The first one is an anagram challenge focused on properties. Can you find all 26 CSS properties by unscrambling the letters?
Try it here: comicss.art/games/1/
#css #games #anagrams
comiCSS
comiCSS Games: games about CSS. Coded in CSS (mostly).
comicss.art
January 8, 2026 at 2:25 PM
comiCSS has games!
Games about CSS, built with CSS. The first one is an anagram challenge focused on properties. Can you find all 26 CSS properties by unscrambling the letters?
Try it here: comicss.art/games/1/
#css #games #anagrams
Games about CSS, built with CSS. The first one is an anagram challenge focused on properties. Can you find all 26 CSS properties by unscrambling the letters?
Try it here: comicss.art/games/1/
#css #games #anagrams
π‘CSS Tip!
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
January 8, 2026 at 10:35 AM
π‘CSS Tip!
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! π
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Reposted by CSS by T. Afif
The same code can be slightly adjusted to obtain more shapes, such as a Rhombus and an Octagon!
Demo: codepen.io/t_afif/pen/W... via @codepen.io
Demo: codepen.io/t_afif/pen/W... via @codepen.io
January 6, 2026 at 7:16 PM
The same code can be slightly adjusted to obtain more shapes, such as a Rhombus and an Octagon!
Demo: codepen.io/t_afif/pen/W... via @codepen.io
Demo: codepen.io/t_afif/pen/W... via @codepen.io
css-tip.com
January 7, 2026 at 2:10 PM
Reposted by CSS by T. Afif
π‘ CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
January 6, 2026 at 10:38 AM
π‘ CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
The same code can be slightly adjusted to obtain more shapes, such as a Rhombus and an Octagon!
Demo: codepen.io/t_afif/pen/W... via @codepen.io
Demo: codepen.io/t_afif/pen/W... via @codepen.io
January 6, 2026 at 7:16 PM
The same code can be slightly adjusted to obtain more shapes, such as a Rhombus and an Octagon!
Demo: codepen.io/t_afif/pen/W... via @codepen.io
Demo: codepen.io/t_afif/pen/W... via @codepen.io
also the new calc-size() for the future: codepen.io/t_afif/pen/q...
Twice width/height
...
codepen.io
January 6, 2026 at 11:59 AM
also the new calc-size() for the future: codepen.io/t_afif/pen/q...
1fr of grid can do it. If one row/column have content, the others (even if empty) will get the same dimension
codepen.io/t_afif/pen/j...
codepen.io/t_afif/pen/j...
Untitled
...
codepen.io
January 6, 2026 at 11:37 AM
1fr of grid can do it. If one row/column have content, the others (even if empty) will get the same dimension
codepen.io/t_afif/pen/j...
codepen.io/t_afif/pen/j...
Another idea by @anatudor.bsky.social π
Because I saw a @codepen.io demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...
Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints codepen.io/thebabydino/...
Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints codepen.io/thebabydino/...
January 6, 2026 at 10:39 AM
Another idea by @anatudor.bsky.social π
π‘ CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
January 6, 2026 at 10:38 AM
π‘ CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Reposted by CSS by T. Afif
10 Cool @codepen.io demos from December 2025: alvaromontoro.com/10-cool-code...
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
10 Cool CodePen demos
10 Cool CodePen demos from December 2025
alvaromontoro.com
January 6, 2026 at 6:58 AM
10 Cool @codepen.io demos from December 2025: alvaromontoro.com/10-cool-code...
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
Reposted by CSS by T. Afif
This has been in the making for over a year, and I'm super excited about the new Web Weekly site!
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. π₯°
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. π«£
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. π₯°
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. π«£
January 5, 2026 at 1:51 PM
This has been in the making for over a year, and I'm super excited about the new Web Weekly site!
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. π₯°
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. π«£
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. π₯°
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. π«£
Reposted by CSS by T. Afif
Wake up, wake up, wake up!
If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you π and second, I've just published a massive post about an improved technique for flexible irregular shapes.
βοΈ ko-fi.com/post/New-yea...
βοΈ www.patreon.com/posts/new-ye...
#CSS #SVG #filter
If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you π and second, I've just published a massive post about an improved technique for flexible irregular shapes.
βοΈ ko-fi.com/post/New-yea...
βοΈ www.patreon.com/posts/new-ye...
#CSS #SVG #filter
January 5, 2026 at 10:45 AM
Wake up, wake up, wake up!
If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you π and second, I've just published a massive post about an improved technique for flexible irregular shapes.
βοΈ ko-fi.com/post/New-yea...
βοΈ www.patreon.com/posts/new-ye...
#CSS #SVG #filter
If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you π and second, I've just published a massive post about an improved technique for flexible irregular shapes.
βοΈ ko-fi.com/post/New-yea...
βοΈ www.patreon.com/posts/new-ye...
#CSS #SVG #filter