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