Course

CSS Tips and Tricks

1
Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
3m 43s
2
Explore a Site's CSS with Chrome DevTools CSS Overview
1m 58s
3
Create an Animated Underline Effect using CSS Transition and CSS Background Position
4m 31s
4
Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
2m 47s
5
Use content-visibility: auto to Improve Initial Page Load Time
2m 6s
6
Use CSS @keyframes to Create a Basic Loading Animation
2m 36s
7
Use CSS filter to Create a Drop Shadow
1m 28s
8
Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
2m 24s
9
Use CSS Variables to Maintain the Aspect Ratio for an Element
1m 19s
10
Use Multiple Background Images to Create Single Element CSS Art
4m 22s
11
Use CSS Variables Almost like Boolean Values with Calc
3m 59s
12
Use CSS Transforms to Create Configurable 3D Cuboids
5m 17s
13
Use CSS Variables with Calc and HSL to Implement Dark Mode
2m 5s
14
Use CSS Scroll Behavior for Animated Anchor Scrolls
1m 41s
15
Use CSS Scroll Margin to Give Content Breathing Room
1m 49s
16
Use CSS @property to Animate and Transition Custom Properties
2m 56s
17
Use CSS Resize to Create Resizable Elements
1m 14s
18
Use CSS aspect-ratio to prescribe an aspect ratio for an element
1m 7s

Use Multiple Background Images to Create Single Element CSS Art

InstructorJhey Tompkins

Share this video with your friends

Send Tweet

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.

View code for this lesson

CSS Tips and Tricks

Use Multiple Background Images to Create Single Element CSS Art

Social Share Links