CSS lover & origami enthusiast. Co-organizer of @css__cafe
There was a time when anyone could be an artist 👨🎨 — if they loved the work enough.
Then came the professionals.
Then came the camera.
Today, it’s not paint that’s being replaced. It’s code.
https://9elements.com/blog/when-skill-became-obsolete-art-code-and-the-end-of-the-amateur/
@joshtumath @heydon first batch had to be black so that @heydon could wear it. 🌚
This year it’s pink and petrol.
@kizu Lovely photos – thanks so much! 😊
Would it be okay if I use the one with me in it for a post about the event?
@shadeed9 Thanks Ahmad 😊
@kizu I’ve just updated the original post to include the solution you provided, along with an explanation of how it works.
Big thanks to @kizu for suggesting another technique to adjust logo sizes in a logo strip. I've updated my blog post to include his clever suggestion.
@kizu I hope I'll have some time tomorrow so I can include this in the original post!
@kizu Yes, you're absolutely right.
I would like to make one final adjustment. I will reintroduce a "magic number," but this time it is called ---strength, and you can adjust the effect to your liking. When set to 1, you get the result you had in your pen; when set to 0, all icons have the same height. This way, I think it becomes a more flexible component rather than relying on a fixed magic number:
@kizu Wow, love the idea. I will definitely have another look at this. In this example, all logos apart from the owl have the same height (48px). I think it gets a lot more difficult when this is not the case (which I guess happens a lot in real life).
Here's a little preview of the final result.
Displaying a row of logos can be tricky due to their varying shapes and sizes. In my latest post, I share how I approach building the perfect logo strip by adjusting logo heights based on aspect ratios.
@argyleink i always thought “Mixins are really clever and you can probably do a lot of stuff with it that makes your life easier” and then I ended up never using them. Can’t really say why.
@eleventy no worries. Fun thing. After I wrote this here I thought “maybe shifting all the image transformation to a transform would be a good idea” once I had a rough prof of concept running I got back to the docs and found the transform method right there. Works perfect in my situation. 🎉
@eleventy I'm struggling with the async shortcode issue when using the image plugin. The asyncEach and ifAsync Nunjucks syntax works, but breaks every code formatter I've tried. 😞
My current solution, using statsSync, kind of works but will soon be deprecated.
Moving the entire project to webC doesn't seem feasible for me.
The docs mention I can use <eleventyImage> with the Render Plugin. Is there an example of how this would look?
@scottjehl @micahrl very clever. I’d love to use the tool you described. Right know I’m using a script that simply converts all black values to currentColor. That gives me at least the option to style mono colored icons.
We're back next week with another Winging It Live(stream) to talk about #CSS #Grids with our first guest, @5t3ph! We'll talk about some of the most common grid patterns, showing you how (and why) you can get started working grids into your CSS toolkit.
Tuesday, July 23 at 1pm ET
(select "Notify Me" on YT to get an alert for the event.)
I've written about bar charts in HTML & CSS Grid and how they make responsive design, internationalization and accessibility easier than SVG & JS layouting.
https://9elements.com/blog/responsive-bar-charts-in-html-and-css/
Collaboration with @nilsbinder and @sphinxc0re.
@SaraSoueidan i would love to know that there is a plant called “Fritz” in Lebanon… you should consider that. 😂😂
@SaraSoueidan instead of labeling things with what they are, I tend to give them names. A plant at my home is called „Fritz“ and a cleaning robot called „Ludovika“ …
