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-imagein 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
Simple CSS – Media Queries Generator
Simple CSS Generator for returning CSS code for media queries, vendor prefixes and browser breakpoints.
Source: Simple CSS
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