Piccalilli Newsletter - Issue #7

Welcome

Howdy!

This issue features CSS centering, grunge textures, rockets, CSS cities and sliders.

If you’re enjoying reading this newsletter as much as I’m enjoying creating it, please share it with your pals. It’ll be really appreciated if you do.

Enjoy! Andy

CSS Utility

Two simple methods to vertically and horizontally center content with CSS

Centering used to be hard with CSS, but these days, it’s easy! I show you how to build a little utility class that auto centers descendants horizontally and vertically.

Fancy

The Web Project Guide

This website is absolutely stunning. The attention to detail is just wild. I’m both envious and incredibly impressed.

I really wish grunge textures would make a comeback. Those were the good days of web design.

Stimmt - Agency Site

⚠️ Motion warning ⚠️

This site is pure visual pleasure and frankly, just showing off. It’s a bit like a Codrops thing, though—mega inspiring in terms of interaction and animation.

I daren’t look at the size of this thing in the network panel 🙈

NASA Saturn V Rocket animated in 3D using only CSS

⚠️ Motion warning ⚠️

This is cool as heck, by Hai Le. It’s refreshing to see a rare appearance of Less CSS, too.

CSSCities

⚠️ Motion warning ⚠️

Gosh darn it, Adam is smart as heck. He’s amongst a few folks that are gonna be getting permanent seats on this newsletter at this rate.

Smashing work.

Layout

100 years of Bauhaus

Grid-tastic work from Juan. Fire up the editor view on Codepen and the Firefox Grid Inspector and just soak it all in.

Articles

CSS Border-Radius Can Do That?

I was reminded by this article while I was doing some pretty difficult fancy stuff this week. The border-radius generator is super handy, too.

You can get pretty far in making a slider with just HTML and CSS

I can’t believe that this is the first CSS-Tricks article that I’ve posted on this newsletter. I owe so much to Chris for all of the material he produces that’s helped me out over the years.

This article is interesting. Sliders used to be a tangle of heavy JavaScript, but now, you can get far with just HTML and CSS. There’s a progressive enhancement target there, too.

Let’s just say I’m working on some stuff that relates to that...

Sponsor

This issue’s sponsor: my Patreon

This issue is sponsored by my Patreon. If you want to sponsor this newsletter, go ahead and back the position: sticky tier.

I want to spend more time working on stuff that benefits the web community, but I also need to feed my family, so I've created a Patreon!

I’d really appreciate your support so I can help folks learn the web platform. The Patreon will hopefully reduce the amount of time I work on client projects and increase the amount of time I can spend working on projects like this one.

Any support will be appreciated and you can select as little as $1 per month!

Thank you

That’s all, folks

If you have any comments, feedback or submissions, please get in touch via Twitter or Email.

Until the next issue, take it easy 🙂