[CSS 3] Use Multiple Background Images to Create Single Element CSS Art

2024-04-01 19:15:10

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.

.head {
  --eyebrow--left: linear-gradient(#000, #000) 25% 15% / 6vmin 2vmin;
  --eyebrow--right: linear-gradient(#000, #000) 75% 15% / 6vmin 2vmin;
  --twinkle--left: radial-gradient(circle at 40% 40%, #FFF 10%, transparent 10%) 25% 35% / 5vmin 5vmin;
  --eye--left: radial-gradient(#000 50%, transparent 50%) 25% 35% / 5vmin 5vmin;
  --twinkle--right: radial-gradient(circle at 40% 40%, #FFF 10%, transparent 10%) 75% 35% / 5vmin 5vmin;
  --eye--right: radial-gradient(#000 50%, transparent 50%) 75% 35% / 5vmin 5vmin;
  --mouth: radial-gradient(circle at 50% 0, #FFF 44%, transparent 44%) 50% 100% / 10vmin 10vmin;
  height: 25vmin;
  width: 25vmin;
  background:
    var(--eyebrow--left),
    var(--eyebrow--right),
    var(--twinkle--left),
    var(--eye--left),
    var(--twinkle--right),
    var(--eye--right),
    var(--mouth),
    #ffe330;
  background-repeat: no-repeat;
}

码农公寓