Web Design Link Picks
resources from newsletter #0120 #0121 #0122 & #123
Article written on Tuesday, 10 Mar 2020
Ready for another filled to the brink Web design resources list? A very interesting list starting with 'All you need to know about hyphenation in CSS' by Richard Rutter. Another pro helps you out with how to 'properly align with CSS'. Doubting on installing a dark/light theme? CodyHouse has a tutorial. There's a follow up as well included that talks about how to save the user theme selection. Andy Clarke tells the story behind Art Direction for the Web. Andy also shows us that there's also Art Direction For The Web Using CSS Shapes. In this list I was especially interested in Animating SVG with CSS. Dan Cederholm also chats with Meagan Fisher on all things web design and whether designers should learn to code in this day and age. There also a tutorial on how to create a Fullscreen Scroll Slideshow. There's more so be ready :)
How to Create a Dark\Light Mode Switch in CSS and Javascript
CodyHouse always has nice tutorials. In this one you'll take a look at how to create a dark theme for your web project, and how to switch from a default (light) theme to a dark one with the help of CSS Custom Properties.
How to Store Theme Color Preferences Using the Local Storage API
This is a follow up to the create a dark theme article I've shared earlier. Claudia Romano shows you how to save the user theme selection so that it's preserved while navigating the website.
The Story Behind Art Direction for the Web
I have Andy Clarke's 4th book on my desk ready to read but I'm too busy fighting deadlines. Here's the design story of how it all happened.
Animating SVG with CSS
Hope Armstrong has a detailed article out on how to make lightweight, scalable animations using SVGs and CSS.
Diagonal Containers in CSS
In this tutorial Sebastiano Guerriero of CodyHouse shows how to create full-width, diagonal sections in CSS using the clip-path property.
Hyphenation in CSS
Richard Rutter has always been somebody you listen to when he talks about typography on the web. Here he shares "All you need to know about hyphenation in CSS"
How To Align Things In CSS
There’s a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. Rachel Andrew shares a few rules to help you remember how to properly align with CSS.
Art Direction For The Web Using CSS Shapes
In a new tutorial for Smashing Magazine, Andy expands on the topic of Art Direction for the Web with CSS Shapes to create exciting and inspired new design ideas.
Owltastic’s Meagan Fisher on Adapting to the Modern Landscape of Web Design
Dan Cederholm chats with Meagan Fisher on all things web design and whether designers should learn to code in this day and age. Made me feel better in just sticking with HTML & CSS. It's a great listen so don't want to miss it!
Fullscreen Scroll Slideshow
What Yoichi Kobayashi created could be useful for presentations, it's a fullscreen slideshow that works on scroll.
CSS Masonry with Flexbox, :nth-child(), and Order
Tobias Ahlin explores a CSS-only way of creating a Masonry layout.
