наложение цветов с помощью HTML / CSS

#html #css #sass

#HTML #css #дерзость

Вопрос:

Я пытаюсь воссоздать логотип letterboxd с помощью HTML и CSS. У меня возникли проблемы с достижением эффекта перекрывающихся кругов, когда цвета смешиваются друг с другом, становясь темнее на пересечениях кругов. Есть ли способ, которым я могу манипулировать z-индексом и / или непрозрачностью для достижения этого эффекта? Спасибо.

HTML:

 <div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

SCSS:

 .circles {
    display: flex;

    .circle {
        height: 30px;
        width: 30px;
        border-radius: 50%;

        amp;:first-child {
            background: #FF8000;
        }

        amp;:nth-child(2) {
            background: #05E156;
            transform: translateX(-5px);
            z-index: 2;
        }

        amp;:nth-child(3) {
            background: #40BCF4;
            transform: translateX(-10px);
        }
    }
}

Codepen

Желаемый эффект:

Текст

Ответ №1:

Одним из вариантов является использование mix-blend-mode . Это не совсем то, что вам нужно, и поддержка не на 100%, но я думаю, что это лучшее, что вы можете сделать, используя только CSS.

 .circles {
  display: flex;
}

.circle {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #99AEBA;
}

.circle:first-child {
  background: #FF8000;
}

.circle:nth-child(2) {
  background: #05E156;
  transform: translateX(-5px);
  z-index: 2;
  mix-blend-mode: multiply;
}

.circle:nth-child(3) {
  background: #40BCF4;
  transform: translateX(-10px);
}

 <div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Если вы хотите, чтобы это было точно так же, как на вашей картинке, я бы предложил вместо этого использовать SVG. Проверьте Vectr, если вам интересно. Это бесплатно и действительно просто в использовании.

Ответ №2:

Вы можете просто добавить opacity в .circle класс, например:

 .circle {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    opacity: 0.7;
}

Вероятно, вам нужно будет поиграть с z-index , чтобы указать каждому, в каком порядке укладывать для достижения желаемого эффекта.

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

1. Хорошо, итак, если я хочу сохранить эти же цвета, но также иметь непрозрачность, мне нужно будет начать с более темных цветов, а затем уменьшить непрозрачность, пока я не доберусь до своих текущих цветов?

2. Точно. Я бы поиграл с цветами в Chrome или FF Dev Tools, пока вы не получите правильный оттенок с непрозрачностью.

Ответ №3:

Вам нужно добавить z-индекс так, как вы укладываете div, и добавить непрозрачность с помощью background-color.

  .circles {
  display: flex;
}
.circles .circle {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #99aeba;
}
.circles .circle:first-child {
  background-color: rgba(225, 128, 0, 0.5);
  z-index: 1;
}
.circles .circle:nth-child(2) {
  background-color: rgba(5, 255, 86, 0.5);
  transform: translateX(-7px);
  z-index: 2;
}
.circles .circle:nth-child(3) {
  background-color: rgba(64, 188, 244, 0.5);
  transform: translateX(-15px);
  z-index: 3;
}

 <div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Ответ №4:

В других ответах упоминалось использование непрозрачности для 3 кругов, но я думаю, что только средний круг полупрозрачен, и он находится поверх двух других.