Xtra, Xtra, read all about it 🙂 That’s exactly what is on the agenda for this week resources. Experimenting with 3D CSS, a serious deep dive into webpack 4 and we can always count on Mary Lou to supply us with some inspiration. This time it’s about animated grid preview. Speaking about grid there’s also a nice tutorial about Grid Tile Layouts with Auto-fit and Minmax included. You can also learn a bit about masking. Enjoy!


Tricky CSS hover

Tricky CSS hover

Experimenting in 3D CSS with a VR inspired card layout featuring a skateboarding theme. Explore this CodePen to learn how it was achieved.


An Annotated Webpack 4 Config for Frontend Web Development

An Annotated Webpack 4 Config for Frontend Web Development

A serious deep dive article that’s not my cup of tea but maybe it’s yours. It’s a com­plete real-world pro­duc­tion exam­ple of a sophis­ti­cat­ed web­pack 4 config.


Animated Grid Previews

Animated Grid Previews

Mary Lou shows a template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an “explore” link is clicked.

Mask Animation with GSAP & SVG

Explore this CodePen to learn how this three words slider with Greensock, SVG and mask transitions was created.

Grid Tile Layouts with Auto-fit and Minmax

Nice tutorial on creating various “tile layouts” using CSS Grid.

Nurture your creativity! Please sit back and soak in all the design goodness I discover as I explore print & web design, photography, art, type, and more.
Go to original Source
Author:

Powered by WPeMatico