Beer Barrels
Discoveries

Discoveries #12 - Tutorials

Some great articles from CSS masters

This months discoveries it’s all about CSS tutorials. You will find some of the best articles of profound CSS masters like Ahmad Shadeed or Josh Comeau. All tips are vital to bring your CSS to the next level. Happy learning…

  • CSS Variables 101
  • Full-Bleed Layout Using CSS Grid
  • A Deep Dive Into CSS Grid minmax()
  • Create Diagonal Layouts Like It's 2020
  • Using calc to figure out optimal line-height
  • Drop-Shadow: The Underrated CSS Filter
  • A Guide to the Responsive Images Syntax in HTML
  • Centering in CSS
  • How to trigger a CSS animation on scroll
  • CSS Scroll Snap

CSS Variables 101

by Ahmad Shadeed 
https://ishadeed.com/article/css-vars-101/

CSS variables (or ‘custom properties’) are a huge helper to structure your CSS code and make it more maintainable. Ahmad shows us how to use their complete power.

CSS Variables 101

Full-Bleed Layout Using CSS Grid

by Josh Comeau 
https://www.joshwcomeau.com/css/full-bleed/

Today it can be tricky to layout websites for small devices like smartphones and very large desktop screens. Josh shows us how to utilize CSS Grid on a classic 3-column layout the smart way.

Full-Bleed Layout Using CSS Grid

A Deep Dive Into CSS Grid minmax()

by Ahmad Shadeed 
https://ishadeed.com/article/css-grid-minmax/

Ahmad again. In this tutorial he brings us a deeper look into the MINMAX() function, which is not easy to understand and to use.

A Deep Dive Into CSS Grid minmax()

Create Diagonal Layouts Like It's 2020

by Nils Binder 
https://9elements.com/blog/pure-css-diagonal-layouts/

Over 90% of all websites have an easy to understand rectangular layout, I guess. Nils shows us how to bring some disruptions into those layouts, by implementing diagonal sections, to make them less boring.

Create Diagonal Layouts Like It's 2020

Using calc to figure out optimal line-height

by Jesús Ricarte 
https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/

Text on the web must be easy to read and one of the probably most underrated options on styling text is the line height. Jesús shows us, how to calculate the line height for an optimal reading experience.

Using calc to figure out optimal line-height

Drop-Shadow: The Underrated CSS Filter

by Michelle Barker 
https://css-irl.info/drop-shadow-the-underrated-css-filter/

There are two shadow properties in CSS: box-shadow and drop-shadow. Michelle show us how to use the one or the other properly.

Drop-Shadow: The Underrated CSS Filter

A Guide to the Responsive Images Syntax in HTML

by Chris Coyier 
https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

Chris must not be missing in a list of CSS tutorials. As CSS has a bunch of tags and properties to show images in responsive layouts, he shows us how to use them effectively.

A Guide to the Responsive Images Syntax in HTML

Centering in CSS

by Adam Argyle 
https://web.dev/centering-in-css/

Centering elements can be a mess, but not for Adam who shows all possibilities with PRO’s and CON’s.

Centering in CSS

How to trigger a CSS animation on scroll

by Nick Ciliak 
https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/

Animations, cleverly used, give a page the finishing touches. But it is important to control them. Nick shows us how to achieve this using CSS and a bit JavaScript.

How to trigger a CSS animation on scroll

CSS Scroll Snap

by Ahmad Shadeed 
https://ishadeed.com/article/css-scroll-snap/

And finally once again Ahmad. In this tutorial he deals comprehensively with CSS’s scroll-snap feature.

CSS Scroll Snap

You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention.

In case your blog software can't send Webmentions, you can use this form or send it manually via webmention.app or Telegraph:

Webmentions

No Webmentions yet...

Related