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

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

  • Alert Improvements by Xon
    Alert Improvements by Xon
    Сборник небольших изменений для стандартной системы оповещений XenForo 2.
  • Hestia Pro
    Hestia Pro
    WordPress шаблон.
  • [Audentio] Feeds
    Идеально подходит для структуры форума и взаимодействия с пользователем.
  • [cXF] Membership Page
    [cXF] Membership Page
    Создайте страницу повышений и настройте ее с помощью множества настроек и стилей.
  • Tickets
    Tickets
    Полноценная система тикетов.
Похожие ресурсы
Назад
Верх Низ