📝 CSS-Tricks 198: The Future of CSS Layout and CSS Shadow Parts

View this newsletter on the web.

There’s exciting things on the horizon for CSS layout

Michelle Barker has the scoop on all the upcoming things to get excited about, such as:

  • Support is coming soon for the gap CSS property when used with Flexbox in Chrome (yay!).
  • Masonry-style layouts will soon be possible Firefox.
  • Chrome previewing a new Grid inspector, which looks like this:

📝 CSS-Tricks 197: CSS Generators, generic-components, and Alpine.js

View this newsletter on the web.

Setting text inside a circle with CSS

I totally forgot that this is possible with the shape-outside CSS property. As Kerry Smyth shows in this demo, we can use that property twice to force text to float around two different paths, giving us shape on both sides (in this case, a circle). It’s neat that browser tools have come so far as to give us this really nice visual representation as we build it, too:

As Kerry mentions in this post, I’m excited for shape-inside which will let us create a shape to wrap the content within an element more naturally, too.

📝 CSS-Tricks 195: Text adventures and better form inputs

View this newsletter on the web.

Howdy y’all!

[Robin]: This week I got really weird with it. My pal is having a birthday soon (shhhh) and he adores two things in life: text adventure games and Animal Crossing. So, I thought, what if I made a website that’s a text adventure game based in the Animal Crossing universe? Is that too much as a gift? (No! Friendship is eternal!)

I’ve been making this thing with Twine which is “an open-source tool for telling interactive, nonlinear stories.” What you do is write bits of text and then connect them together in their app or on their website:

Then you can export a HTML file with all the markup, styles, and JavaScript bundled inside it. And there you have it: a custom made text adventure game. I knew all I had to do after the export was edit the styles to make it look the way I wanted and then: boom!

My realization this weekend whilst hacking away on this thing isn’t anything technical. It was something else. I knew that a website can be a worry stone, something you throw all your anxiety and stress at. But I didn’t know that a website can be a gift as well. 🎁