Here in this article, I have compiled 15 most useful CSS tutorials, tips, tricks and techniques for you to bookmark and learn, enjoy!
Coloring SVGs in CSS Background Images
Using SVG in CSS backgrounds allows you to use CSS’s powerful background sizing and position properties. This makes sizing SVGs much simpler because the image easily scales to the size of your element. Plus you don’t have SVG cluttering up your markup.
CSS Spheres
Making use of CSS gradients to add shading and create the 3D effect on a single element.
Simplify Your Stylesheets With The Magical CSS Viewport Units
Viewport units have their uses and are worth experimenting with. They are straightforward to understand and can be extremely helpful in certain scenarios, where solutions with alternative CSS techniques will be more difficult or impossible to implement.
How To Create A Custom Preloading Screen
Are you building a one page parallax scrolling website and getting concerned about your page load time?
CSS Flipping Animation
One CSS effect somewhere in between is the CSS flip effect, whereby there’s content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.
How To Write Mobile-first CSS
Building responsive websites is a must-have skill for front-end developers today. When we speak about responsive websites, the term mobile-first pops into mind immediately.
Mega Dropdown
One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories… that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page.
CSS Guidelines
High-level advice and guidelines for writing sane, manageable, scalable CSS.
Intro to CSS 3D transforms
Tutorial, examples, and discussion all about CSS 3D transforms.
A Visual Guide to CSS3 Flexbox Properties
Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.
Designing For Print With CSS
In this article, we’ll take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media.
Loading CSS without blocking render
This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render.
Responsive Tables in Pure CSS
You can pull in content from HTML data attributes using content: attr(data-label) on the before/after pseudo classes. With this in mind, let’s take a look at how we can reorganize the table structure on mobile devices, creating a more “card” like design.
Pure CSS FizzBuzz
Divs are produced by JQuery (could be pure JS, but I made this easier on myself) so that using a variable is possible, manually inserting divs could also be done.
(Ab)using CSS3’s :nth-child selector to invent new ones
CSS3’s :nth-child and :nth-last-child selectors are powerful: not only can they replace :first-child and :last-child, but they can style more complex patterns like the first (or all but the first) three children, every fourth child, or combinations of the pattern “a*n+b”.
