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

Explore a Site's CSS with Chrome DevTools CSS Overview

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

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

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

Use CSS @keyframes to Create a Basic Loading Animation

Use CSS filter to Create a Drop Shadow

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

Use CSS Variables to Maintain the Aspect Ratio for an Element

Use Multiple Background Images to Create Single Element CSS Art

Use CSS Variables Almost like Boolean Values with Calc

Use CSS Transforms to Create Configurable 3D Cuboids

Use CSS Variables with Calc and HSL to Implement Dark Mode

Use CSS Scroll Behavior for Animated Anchor Scrolls

Use CSS Scroll Margin to Give Content Breathing Room

Use CSS @property to Animate and Transition Custom Properties

Use CSS Resize to Create Resizable Elements

Use CSS aspect-ratio to prescribe an aspect ratio for an element

CSS Tips and Tricks

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).

https://app.egghead.io/api/v1/lessons/css-use-css-aspect-ratio-to-prescribe-an-aspect-ratio-for-an-element/transcript

CSS Tips and Tricks

Use CSS aspect-ratio to prescribe an aspect ratio for an element

Social Share Links