A lot of articles have been written about cool CSS features, but not all of them can be described as “automagical.” Here’s dictionary.com’s definition of the term, edited a little bit for clarity:
[a process] (especially in relation to the operation of a computer process) [that is executed] in a way that seems ingenious, inexplicable, or magical.
So in other words, “automagical” is that which makes the complex appear simple, often in a dazzling way. So without further ado, here are the top five automagical features in CSS, as I see them:
5. Animation and Transition
See the Pen Top Ten Auto-Magic CSS Features: Part 9 by Float Nine (@floatnine) on CodePen.
See how the star hovers up and down as suspended in air? That’s CSS animation at work. Now hover over it with your mouse. See how it spins? That’s a CSS transition. Transition and animation are very similar, the main differences being you can trigger transitions on user input (like mouse hover), while animations occurs on page load and can be fine tuned a bit more. They also work in tandem with each other, to create ever more automagical effects.
4. Linear and Radial Background Gradients
See the Pen Top Ten Auto-Magic CSS Features: Part 2 by Float Nine (@floatnine) on CodePen.
Linear and radial gradients let you design and create really cool background effects with just a few lines of code. You can make your gradients as simple or complex as you want by using multiple colors, repeated patterns, blending colors or creating hard color stops, and stacking gradients on top of images or even other gradients to create complex effects. There is a ton of creative potential with gradients, and the fact that they function like background images means that they don’t interfere at all with the rest of your layout.
3. :nth-child Expressions
See the Pen Top Ten Auto-Magic CSS Features: Part 5 by Float Nine (@floatnine) on CodePen.
Take a look at the list items above. Each has a different color, yet no classes or ids have been assigned to the elements. That’s because the :nth-child pseudo-selector is being used to target specific elements in the list. For example, li:child(5) selects the fifth list item, while li:child(even) selects every evenly numbered one.
The really automagical part of :nth-child expressions though is found in the use of expressions, which are short algebraic phrases that the browser interprets when the page is rendered. “n” here is an algebraic variable that starts at zero and counts up in increments of 1. For an example, here’s how we calculate the expression 3n + 4 (aka li:nth-child(3n + 4):
3 x 0 + 4 = the 4th list item
3 x 1 + 4 = the 7th list item
3 x 2 + 4 = the 10th list item
3 x 3 + 4 = the 13th list item
...repeat until we reach the end of the list...
For even more automagical effects, use negative factors of n to count up the list of items instead of down. Here is how li:nth-child(-1n + 3) is interpreted by the browser:
-1 x 0 + 3 = the 3rd list item
-1 x 1 + 3 = the 2nd list item
-1 x 2 + 3 = the 1st list item
...stop, we've reached the beginning of the list...
2. Centering Elements with Flex-Box
If you’re not already using this centering technique, I recommend that you take a couple seconds to learn it here. It will save you a ton of time in the long-run.
For ages, centering items in their parent containers was more difficult than it should have been. We had to rely on hacky solutions like absolute positioning, negative margins, carefully calculated fixed length positioning, and other hacks like “transform: translateY(-50%)”. Then flex-box came along and made centering possible with two declarations:
See the Pen pZVoPR by Float Nine (@floatnine) on CodePen.
When combined, “display: flex” and “margin: auto” do perfectly what developers have been hacking at for years. What’s even cooler is that this technique is completely responsive, as “margin:auto” item stays centered in flex-box no matter the width or height of the container. Flex-box can do a lot more than this, but this centering technique is an automagical feature that is worth hilighting.
See the Pen Top Ten Auto-Magic CSS Features: Part 8 by Float Nine (@floatnine) on CodePen.
Transform allows you to rotate, skew, and scale elements on your webpage. Combined with transition, you can achieve some really cool effects, like the card flipping demo above. To learn how to create flippable with CSS transform, check out this article.
That’s it for now. Stay tuned for more features and automagical CSS tricks in the future.