Cascading Style Sheets bring order and beauty to our applications.

A collection of CSS tricks to tackle various problems.

In this lesson, we dive into using CSS border-radius. We will look at how you can use it to create not only basic shapes but complex ones too.

We will start with a shorthand notation that allows us to define a uniform radius for an element. Then we will progress onto a longhand notation. That will give us the power to define the horizontal and vertical radius for each corner of an element.

Let's turn a square head into an egg head!

Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius

Check out the new and currently experimental "CSS Overview" feature in Chrome's DevTools.

Use it to get an overview of details such as colors, fonts, media queries, and even unused declarations.

chrome-devtools

Explore a Site's CSS with Chrome DevTools CSS Overview

In this lesson, we cover how to replace the default text-decoration for links with an animated underline.

We use multiple background images with a fixed height to create an underline effect. And then using CSS transition we can make one background image travel across the other.

To make it maintainable, we use CSS variables.



Create an Animated Underline Effect using CSS Transition and CSS Background Position

In this lesson, we demonstrate how leveraging the power of scoped CSS variables in combination with the HSL color space can be used to quickly prototype UI variants. In this demonstration, we create some button variants.

We create four different variants where new variants can be created with only a few lines of CSS!

Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants

In this lesson, we look at how you can use `content-visibility: auto` to significantly improve page load performance by applying it to `section` elements. The property tells the browser to skip rendering an element if it is off-screen and below the fold on the initial load. 

This can introduce some scroll jumping which we walk through how to combat with `contain-intrinsic-size`.

• Read more about `content-visibility` and `contain-intrinsic-size` here: https://web.dev/content-visibility/

Use content-visibility: auto to Improve Initial Page Load Time

In this lesson, we style a static element and turn it into a loading animation using `@keyframes`.

We look at how to write a basic set of `@keyframes` and how to apply it to a static element turning it into a loading animation.



Use CSS @keyframes to Create a Basic Loading Animation

In this lesson, we look at how you can use the CSS `filter` property to create a drop shadow effect around an element's content. We use the `drop-filter` function on an image to start and then a combination of elements.

Use CSS filter to Create a Drop Shadow

In this lesson, we use CSS pseudo-elements and the `mix-blend-mode` property to create a duotone effect for an image.

We wrap the image in a container element and overlay it with pseudo-elements that have different background colors. Then using `mix-blend-mode`, we blend those overlays through the stacking context to create a duotone style effect.

Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect

In this lesson, we look at how you can use CSS variables with the calc function to maintain and configure the desired aspect ratio for elements.

Use CSS Variables to Maintain the Aspect Ratio for an Element

In this lesson, we create a face for a head using layered comma-separated background images.

CSS allows us to layer as many background images as we want in a declaration. Using different styles of gradient we can create different shapes. Combined with background-size and background-position, we can then position and size these shapes accordingly to create different compositions.

Use Multiple Background Images to Create Single Element CSS Art

In this lesson, we explore how you can use CSS variables almost like Boolean values in combination with calc().

By setting a variable to 1 or 0 and then using logical operators, we can abstract and decouple areas of our CSS. This can ease maintenance when our CSS starts to get complicated. In this example, we walk through how a variable could be used to dictate part of an element's transform.

Use CSS Variables Almost like Boolean Values with Calc

In this lesson, we use CSS transforms to create configurable 3D cuboids.

Using CSS transforms in combination with scoped CSS variables, we are able to configure the height, width, and depth for cuboids without ever having to repeat those styles.

Use CSS Transforms to Create Configurable 3D Cuboids

In this lesson, we use CSS variables with calc and hsl to implement a rudimentary dark mode.

We can do this by adjusting the lightness of our colors based on a binary value and some basic arithmetic.

Use CSS Variables with Calc and HSL to Implement Dark Mode

In this lesson, we take a look at how to implement animated anchor scrolling using CSS scroll-behavior. We can do this whilst respecting our users' preference for motion and in a way that shouldn't annoy them when searching the page.

Use CSS Scroll Behavior for Animated Anchor Scrolls

In this lesson, we take a look at how you can use CSS scroll-margin-top to give your content breathing room when using anchor scrolling.

Combine this with CSS variables and calc to combat fixed-position nav layouts.

Use CSS Scroll Margin to Give Content Breathing Room

In this lesson, we take a look at how to animate and transition custom properties with CSS Houdini @property. It hasn't been possible to animate and transition background-images and other properties until now. This demo will show you how to define custom properties and define type checking for them.

Check for [Browser Compatibility](https://caniuse.com/mdn-css_at-rules_property).

Use CSS @property to Animate and Transition Custom Properties

In this lesson, we look at how to create resizable elements with CSS resize. You can also constrain resizing in horizontal and vertical directions.

Use CSS Resize to Create Resizable Elements

In this lesson, we take a look at the CSS aspect-ratio property and see how we can define different aspect ratios for elements.

Check for [browser compatibility](https://caniuse.com/mdn-css_properties_aspect-ratio).

CSS Tips and Tricks

Jhey Tompkins

Free Community Resource

Free Community Resource

Course Content