Градиентный текст над несколькими элементами навигации

Question

Я пытаюсь получить панель навигации с градиентом, который продолжается по всем элементам, таким как Градиентная навигация

Я кое-как пришел с использованием background-clip: text;, но это вызывает проблемы с font-awesome, и я не знаю, как установить верхнюю / нижнюю границу, чтобы следовать градиенту с текстом.

Другой способ, которым я пробовал это с градиентным фоном на родительском элементе и используя mix-blend-mode, но это вызывает случайный сбой между элементами. Градиентный сбой в режиме смешивания-смешивания

Мой вопрос: Каков наилучший способ добиться такой градиентной навигации?

Вот код ( background-clip: text;)

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.menu li {
  display: table-cell;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 32px 10px 30px 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  text-decoration: none;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

И с режимом смешивания:

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background: linear-gradient(90deg, #ff0066, #2850ff);
}

.menu ul {
  list-style: none;
  padding: 0;
}

.menu li {
  display: table-cell;
}

.menu li a {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 80px;
  display: inline;
  padding: 33px 10px;
  text-decoration: none;
  background-color: #ffffff;
  mix-blend-mode: screen;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  color: #000000;
  padding: 30px 10px;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
     <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

Answer 1

Ты почти справился со своим первым методом. Вам нужно сделать значок display:inline, чтобы переопределить inline-block, установленный Font Awesome, который мешает фоновой уловке.

Для цвета линии вы можете рассмотреть border-image с тем же градиентом, примененным к тот же элемент. Хитрость заключается в том, чтобы применить отрицательное поле к li, чтобы перекрыть этот градиент, и при наведении курсора вы сбросите поле, чтобы показать его.

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  height: 80px;
  background: #ffffff;
}

.menu {
  height: 100%;
  display:flex;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin:0;
  border-image-source:linear-gradient(90deg, #ff0066, #2850ff);
  border-image-slice:2 0;
  border-top:2px solid;
  border-bottom:2px solid;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
  display:flex;
  font-weight: 600;
  height: 100%;
  box-sizing:border-box;
}
li {
  display: flex;
  align-items: center;
  margin:-2px 0;
  border-top:2px solid white;
  border-bottom:2px solid white;
  transition: all 0.2s ease-in-out;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 0 10px;
  text-decoration: none;
}

.menu li:hover {
  margin:0 0;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
  display:inline;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

Вышеуказанное не работает в Safari, поэтому вы можете попробовать следующее:

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  height: 80px;
  background: #ffffff;
}

.menu {
  height: 100%;
  display:flex;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin:0;
  border-image-source:linear-gradient(90deg, #ff0066, #2850ff);
  border-image-slice:2 0;
  border-top:2px solid;
  border-bottom:2px solid;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 600;
  height: 100%;
  box-sizing:border-box;
}
li {
  height:calc(100% - 4px);
  float:left;
  margin:2px 0;
  outline:4px solid #fff;
  transition: all 0.2s ease-in-out;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height:75px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 0 10px;
  text-decoration: none;
}

.menu li:hover {
  outline:0px solid #fff;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
  display:inline;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

Answer 2

Это может быть возможно при использовании background-clip: text, а для выдачи значков шрифтов awesome вам необходимо использовать значки шрифтов awesome Unicode.

Пожалуйста, ознакомьтесь с обновленным фрагментом

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  background: linear-gradient(90deg, #ff0066, #2850ff);  
  background-clip: text;
  -webkit-background-clip: text;
}

.menu li {
  display: table-cell;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
/*   -webkit-text-fill-color: transparent; */
  color: transparent;
  padding: 32px 10px 30px 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.menu li a span {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.menu li a:hover {
  text-decoration: none;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><span>&#xf002;</span> Search</a></li>
    </ul>
  </div>
</div>

Answer 3

Я думаю, что вы можете go опередить второй, поскольку он способен удовлетворить ваш сценарий использования. Что касается линии между элементами, вы можете изменить ul на flex и убрать стиль ячейки таблицы в элементах списка.

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background: linear-gradient(90deg, #ff0066, #2850ff);
}

.menu ul {
  list-style: none;
  padding: 0;
  display:flex;
}

   

.menu li a {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 80px;
  display: inline;
  padding: 33px 10px;
  text-decoration: none;
  background-color: #ffffff;
  mix-blend-mode: screen;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  color: #000000;
  padding: 30px 10px;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
     <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>