• Для скачивания ресурсов Форума пользователь должен написать не менее 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
Просмотры
528
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • Robot Styling on Current Visitors
    Robot Styling on Current Visitors
    Упрощает быстрое различие роботов в списке текущих посетителей.
  • [Liam W] (RIP) Member Self Delete
    [Liam W] (RIP) Member Self Delete
    Удаление пользователями своих учётных записей.
  • [AddonsLab] Post Limit Per Node
    [AddonsLab] Post Limit Per Node
    Ограничение на количество создаваемых тем и сообщений, в заданный промежуток времени.
  • What's New Digest
    What's New Digest
    Рассылка новостей и что нового произошло на форуме.
  • [EAE] BumperRM
    [EAE] BumperRM
    Позволяет поднимать ресурсы в списке ресурсов.
Верх Низ