Применить плавный градиент цвета для списка

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

    <li class = "nav-find-item active">
      <a class = "nav-find-link " href = "#!dashboard">
        <i class = "fa fa-tachometer menu-icon"></i> 
        <span class = "menu-title"> Dashboard</span>
      </a>
    </li>

вот мой стиль css:

.sidebar-find .nav-find .nav-find-item.active {
  background-image: linear-gradient(to right, #FFB88C, #191F28 10%);
}

.sidebar-find .nav-find .nav-find-item:hover {
  background-image: linear-gradient(to right, #FFB88C, #191F28 10%);
}

Вот рабочий пример

Но это не дает мне желаемого результата. Что я хочу: Применить плавный градиент цвета для списка

И что я получаю: Применить плавный градиент цвета для списка

Мне не нужна иконка, только цвет.

html css

25.06.2019 09:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы также можете добавить значение к первому значению, поэкспериментировать, пока не получите желаемый эффект, что-то вроде этого выглядит нормально для меня:

background-image: linear-gradient(to right, #FFB88C -30%, #191F28 10%);

25.06.2019 09:38

попробуй это:

background: -moz-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,184,140,0.38)), color-stop(100%, rgba(25,31,40,0)));
background: -webkit-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -o-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -ms-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: linear-gradient(to right, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);

Или поиграться с настройками здесь

25.06.2019 09:40

Другие вопросы по теме

Bootstrap 4 Responsiveness не работает должным образом

Как напечатать имя входного файла рядом с кнопкой загрузки в html

Файл CSS неправильно связывается с html в отдельных папках

Как получить высоту img через машинопись

Изменение цвета ссылок навигационной панели начальной загрузки при наведении

Цвет фона для элемента UL не работал

Как использовать SASS для перезаписи пользовательских методов CSS из внешнего модуля Vue?

Изменить цвет текста с помощью Switch/Toggle Css/javascript

Установите начальную высоту текстовой области в соответствии с ее содержимым

Почему элемент кнопки не зависит от CSS?

Применить плавный градиент цвета для списка

Ответы 2

Другие вопросы по теме

Похожие вопросы