• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Градиенты иконок Font Awesome

Разработка Градиенты иконок Font Awesome

Нет прав для скачивания
Реализация градиентов иконок Font Awesome.
Делаем разметку HTML:
HTML:
<div class="container text-center">
  <div class="row">
    <div class="col-sm-12">
      <h1>Gradient icons</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"><i class="fas fa-user fa-5x icon-blue"></i></div>
    <div class="col-sm-2"><i class="fas fa-frog fa-5x icon-green"></i></div>
    <div class="col-sm-2"><i class="fas fa-certificate fa-5x icon-orange"></i></div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"><i class="fas fa-heart fa-5x icon-red"></i></div>
    <div class="col-sm-2"><i class="fas fa-football-ball fa-5x icon-brown"></i></div>
    <div class="col-sm-2"><i class="fas fa-fighter-jet fa-5x icon-gray"></i></div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"><i class="fas fa-cookie fa-5x icon-beige"></i></div>
    <div class="col-sm-2"><i class="fas fa-globe fa-5x icon-greenblue"></i></div>
    <div class="col-sm-2"><i class="fas fa-cube fa-5x icon-purple"></i></div>
  </div>
</div>
Пишем LESS:
Less:
.icon-gradient() {
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.icon-blue {
  background-image: linear-gradient(45deg, #4481eb 0%, #04befe 100%);
  .icon-gradient();
}
.icon-green {
  background-image: linear-gradient(315deg, #9be15d 0%, #00e3ae 100%);
  .icon-gradient();
}
.icon-orange {
  background-image: linear-gradient(135deg, #FDD819 10%, #E80505 100%);
  .icon-gradient();
}
.icon-red {
  background-image: linear-gradient(45deg, #FF512F 20%, #DD2476 100%);
  .icon-gradient();
}
.icon-brown {
  background-image: linear-gradient(135deg, #FFAA85 10%, #B3315F 100%);
  .icon-gradient();
}
.icon-gray {
  background-image: linear-gradient(135deg, #616161 0%, #9bc5c3 100%);
  .icon-gradient();
}
.icon-greenblue {
  background-image: linear-gradient(0deg, #209cff 0%, #68e0cf 100%);
  .icon-gradient();
}
.icon-beige {
  background-image: linear-gradient(315deg, #772f1a 0%, #f2a65a 74%);
  .icon-gradient();
}
.icon-purple {
  background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
  .icon-gradient();
}
i {
  margin-top:50px;
}
Получаем результат:
543354.png
Автор
baltun
Скачиваний
0
Просмотры
459
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Верх Низ