Comments on: CSS Grid and Custom Shapes, Part 1

By: Chris

Chris — Tue, 23 Aug 2022 21:35:32 +0000

Hey man, you just having too much fun! Wow!
I never seen these kind of or the coding and its funny I was thinkng of math and coding and here you putting up images in Rhombuses! What!!?? Yeah, rombuses. Totally cool stuff. It’s going to take me a minute to wrap my small brain round this stuff, but man, you just having too much fun doing this. Nice.

By: Daniel

Daniel — Tue, 23 Aug 2022 18:14:21 +0000

Me encanto tu tutorial!!!. Estoy aprendiendo mucho y estare muy atento al proximo.

Muchas gracias por pensar en los que nos iniciamos y que no siempre nos agrada mucho la matematica.

Saludos cordiales!!!

Daniel

By: Ivan Boothe

Ivan Boothe — Mon, 22 Aug 2022 21:36:06 +0000

As with Graeme, I’m seeing edge lines on the animated images (even before they animate) on Firefox Linux, and it looks like it’s an issue on Chrome mobile too:

https://stackoverflow.com/questions/51542919/clip-path-on-chrome-leaves-a-strange-line-on-the-edge

But that doesn’t take away from the bulk of the article which is fantastic. Going to dig into part 2 now.

By: Edalgrin

Edalgrin — Fri, 19 Aug 2022 12:44:35 +0000

It would be very cool to make it work with shape-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside but I think that’s just for texts, right?

By: Hamplus Tech

Hamplus Tech — Thu, 18 Aug 2022 17:35:35 +0000

You are a guru. Thanks. I look forward to the last sample not explained.

By: Graeme

Graeme — Thu, 18 Aug 2022 09:08:55 +0000

Nice demos

Chrome on Windows has a bad time with the scaling animation, and I get random bleeding at the edges of the image, similar to the example in this SO post: https://stackoverflow.com/questions/67736210/svg-mask-is-bleeding-on-canvas-edges

Something to do with anti-aliasing when it’s moving. Might be a hacky fix with a parent element to cover the edges, or might be just a wait for a Chrome fix!

By: Kishore

Kishore — Thu, 18 Aug 2022 03:19:34 +0000

Amazing articles as always …

By: fada

fada — Wed, 17 Aug 2022 08:23:36 +0000

this is awesome

By: Philipp

Philipp — Tue, 16 Aug 2022 09:07:04 +0000

These are neat demos.
How would you approach a flower shape, like in this image? Especially in regards to a different amount of leafs?

Could the leaf shape be done in CSS, or would it be better to aim for a SVG solution?

Thanks for any hints.

By: Gerrit for Bazeja

Gerrit for Bazeja — Tue, 16 Aug 2022 09:03:13 +0000

Tnx for sharing.

By: Temani Afif

Temani Afif — Mon, 15 Aug 2022 19:07:50 +0000

In reply to Aleksandr Hovhannisyan. I always try to have the right balance between the math and non-math content. I do have articles where I dig into fine detail about math formula but not all the time to not make the articles boring especially that not everyone will want to spend a lot of time with math. Since you like the math part here is another implementation where you don't need sin()/cos() but this time you specify the angles like you want ;) I let you dig into the logic behind the code :)

By: Aleksandr Hovhannisyan

Aleksandr Hovhannisyan — Mon, 15 Aug 2022 15:41:19 +0000

This is so cool! I’m always really impressed with your tutorials involving custom properties and math tricks.

I do think it would be helpful if you dove into the math a bit more in these types of posts or included diagrams. I had to draw the honeycomb on paper for the math to click, even though it is, in hindsight, just basic geometry.

For anyone else who’s wondering: the radius of the honeycomb circle is (size + gap), and we are positioning six images along its circumference, so they are spaced 360/60 = 60 degrees apart. Then just form the right triangles and do the math, plugging in sin(a) or cos(a) where needed.

I really wish CSS had trig functions. Then we could just assign angle values to each image. That way, we’d only need two calc functions: one for the x and one for the y. As the angle varies by image, so do the x/y coordinates!