zoukankan      html  css  js  c++  java
  • [CSS 3] Use Multiple Background Images to Create Single Element CSS Art

    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;
    }

  • 相关阅读:
    1128项目跟进
    冲刺一 (day 3)
    1118 冲刺1-需求文档(初稿)
    1117 新冲刺 day1
    0622 总结与回顾
    0621 第三次冲刺
    0617 主存空间的分配和回收
    学习进度条
    软件工程学期总结
    学术诚信与职业道德
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13812586.html
Copyright © 2011-2022 走看看