Meet the Pseudo Class Selectors

Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

Source: Meet the Pseudo Class Selectors

Full Page Background Video Styles

I bet you’ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, “background”), which is an interesting effect that you don’t see every day. The biggest reason you don’t, probably, is that you can’t set a movie file as the background-image in CSS. You’ll have to do some layout trickery to get it done.

Source: http://mediatemple.net/blog/tips/full-page-background-video-styles/

Learning and Referencing CSS for WordPress: 150+ Resources

When it comes to learning and remembering CSS, there’s no reason why you need to commit every property and class to memory when you can quickly look up anything you need to know in just a few seconds.

Source: Learning and Referencing CSS for WordPress: 150+ Resources

Some Extremely Handy `:nth-child` Recipes as Sass Mixins | CSS-Tricks

There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child and :nth-last-child, you can get some surprisingly complex information without ever leaving your stylesheet.

This post will assume that you have a basic understanding of how the :nth-child pseudo-selector works. If you need a quick refresher, Chris has a great post covering that topic.

Source: Some Extremely Handy `:nth-child` Recipes as Sass Mixins | CSS-Tricks

Understanding CSS Grids for Modern WordPress Website Design

With responsive design now no longer optional, CSS grids are quickly becoming the go-to for creating consistent website layouts that look great on multiple devices. In a nutshell, CSS grids provide a quick way to scaffold a site. You know all those floats and absolute and fixed positioning properties we’ve been using? Yeah, those are becoming outdated as CSS evolves. CSS3 grids make creating and changing sites a snap.

Source: Understanding CSS Grids for Modern WordPress Website Design

Understanding CSS3 Flexbox for Clean, Hack-Free Responsive Design

Remember how hard it used to be to vertically center content on your site? If you’re struggling with the words “used to be” in that last sentence, you obviously haven’t cottoned onto flexbox yet and need to read on. CSS wasn’t originally designed to handle the complex template styling that we see on the web these days, forcing developers to come up with CSS hacks to get content looking right.

Source: Understanding CSS3 Flexbox for Clean, Hack-Free Responsive Design

Fluid Width Equal Height Columns | CSS-Tricks

Equal height columns have been a need of web designers forever. If all the columns share the same background

Source: Fluid Width Equal Height Columns | CSS-Tricks

Simple CSS – Media Queries Generator

mediaq

Simple CSS Generator for returning CSS code for media queries, vendor prefixes and browser breakpoints.

Source: Simple CSS

Hamburger Icon Animations

Codepen – hamburger menu icons

Source: Hamburger Icon Animations

Stick your landings! position: sticky lands in WebKit  |  Web  |  Google Developers

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

Source: Stick your landings! position: sticky lands in WebKit  |  Web  |  Google Developers