Web Design Link Picks
resources from newsletter #0136 #0137 #0138 & #139
Article written on Friday, 18 Dec 2020
Yeah, it's that time again for some lovely resources to learn from. So, you have struggling with CSS Grid, no problem as we have link to cure all that. Digging deeper into debugging it. Rachel Andrew teaches us all we need to know about CSS margins. I've also have some inspiration for CSS buttons, even with animations. Mary Lou is always topnotch when it comes down to inspiring us. This time with a Smooth Scrolling Image Effects. A collection of CSS gradients to check out and some Grid experiments. Plenty of good stuff to give your brain a jolt. There's more so dig in!
Smooth Scrolling Image Effects
Mary Lou presents a small set of ideas on animating images and other elements while smooth scrolling a page.
CSS Grid Experiments
Nice to see some editorial style designs amongst Jules Forrest’s CSS Grid experiments. Explore the CodePens to learn from the code.
Debugging CSS Grid - Part 3: Auto-flow, Order and Item Placement
In this article Michelle Barker takes a look at the different placement methods, how to use auto-flow to avoid having to explicitly place every item, and why sometimes grid items might not be placed where you expect them to be.
Everything You Need To Know About CSS Margins
Rachel Andrew with another interesting article. Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.
Top 25 CSS Buttons (+ Animations)
A big bunch of button ideas - some silly, some super pretty.
Gradient Magic
Nice collection of unique CSS Gradients.
Creating my Logo Animation
A step by step breakdown of Cassie's SVG path animation with CodePen's of course.
Flexbox and Padding
Chen Hui Jing explores some workarounds to the Flexbox padding behavior.
Menus with “Dynamic Hit Areas”
An interesting technique to solve the problem where you try and click on an open menu, and the menu disappears, by creating "dynamic hit areas".
Writing Modes And CSS Layout
Rachel Andrew has consistently written some the best explanations of modern CSS. She explains why understanding them is so important.
Making a Realistic Glass Effect with SVG
No Photoshop needed in this tutorial.
