Разноцветные участки на одной иконке - PullRequest
Новая
       79

Разноцветные участки на одной иконке

1 голос
/ 06 апреля 2020

У меня есть несколько стилей, определенных для иконок Fontawesome, чтобы цвета браузера соответствовали их фирменному цвету. Значит, значок Opera красный, IE синий и Firefox оранжевый.

Но поскольку Chrome имеет 4 разных цвета и очень жестко разделены, мне интересно, можно ли имитировать c что-то близкое к этому только с CSS?

Самое близкое, что я знаю, это градиенты, но, очевидно, это не совсем похоже на правильное изображение. 

i.fa-chrome {
  font-size: 3rem;
  background-image: linear-gradient(to bottom right, yellow, limegreen, crimson, blue, blue);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-3">
  <i class="fa fab fa-chrome"></i>
</div>

Можно ли здесь сделать что-то еще с некоторой отсечкой фона и CSS взломом, чтобы приблизиться к визуальной идентичности исходного значка?

1 Ответ

1 голос
/ 06 апреля 2020

С несколькими фонами вы можете сделать это, но, как я писал в этот очевидный ответ , он остается определенным c для этой конкретной иконки: 

.fa-chrome {
  font-size: 3rem;
  background: 
      linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
      linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
     
      radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
      linear-gradient( 47deg,        #34a853 42%,transparent 43%),
      linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
      linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
  background-repeat:no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-chrome fa-8x"></i>
<i class="fab fa-chrome fa-5x"></i>
<i class="fab fa-chrome fa-3x"></i>

Тот же код с V4 Font Awesome 

.fa-chrome {
  background: 
      linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
      linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
     
      radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
      linear-gradient( 47deg,        #34a853 42%,transparent 43%),
      linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
      linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
  background-repeat:no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-chrome fa-5x"></i>
<i class="fa fa-chrome fa-4x"></i>
<i class="fa fa-chrome fa-2x"></i>
...