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 101by Ahmad Shadeed
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.
Full-Bleed Layout Using CSS Gridby Josh Comeau
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.
A Deep Dive Into CSS Grid minmax()by Ahmad Shadeed
Ahmad again. In this tutorial he brings us a deeper look into the MINMAX() function, which is not easy to understand and to use.
Create Diagonal Layouts Like It's 2020by Nils Binder
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.
Using calc to figure out optimal line-heightby Jesús Ricarte
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.
Drop-Shadow: The Underrated CSS Filterby Michelle Barker
There are two shadow properties in CSS:
drop-shadow. Michelle show us how to use the one or the other properly.
A Guide to the Responsive Images Syntax in HTMLby Chris Coyier
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.
Centering in CSSby Adam Argyle
Centering elements can be a mess, but not for Adam who shows all possibilities with PRO’s and CON’s.
How to trigger a CSS animation on scrollby Nick Ciliak
CSS Scroll Snapby Ahmad Shadeed
And finally once again Ahmad. In this tutorial he deals comprehensively with CSS’s
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, or by leaving a good old comment with your GitHub account.
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...