CSS Тень маркера img в списке <ul>

Рейтинг: 0Ответов: 1Опубликовано: 22.08.2023

Подскажите, как можно задать тень списку и маркеру(img), чтобы получилось как на изображении ниже(прикрепил). ps. У меня получилось только с текстом. А картинка(маркер)остается без тени...

Что и как писал я:

ul {

    list-style: none;
    list-style-image: url(wow.png);
    font-size: 40px;
}

Задали png вместо стандартного маркера

li class="li1">html</li

Задали класс

в css прописал:

.li1 {
    color: blue;
    text-shadow: 5px 7px 2px pink;
}

По итогу тень pink накладывается только на сам текст. А картинка так и остается без тени.. Как-то можно через box-shadow, но у меня ничего не вышло. Здоровья вам и вашим близким! Буду ждать ответа)

spisok ul shadow

css ul
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Используем drop-shadow

https://caniuse.com/?search=drop-shadow ~ 95%

Пример

ul {
  list-style: none;
  font-size: 40px;
}

li {
  color: blue;
  filter: drop-shadow(5px 7px 2px pink);
}
<ul>
  <li>
    <svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 19.5L20 21M11 21H5.6C5.03995 21 4.75992 21 4.54601 20.891C4.35785 20.7951 4.20487 20.6422 4.10899 20.454C4 20.2401 4 19.9601 4 19.4V17.6841C4 17.0485 4 16.7306 4.04798 16.4656C4.27087 15.2344 5.23442 14.2709 6.46558 14.048C6.5425 14.0341 6.6237 14.0242 6.71575 14.0172C6.94079 14 7.05331 13.9914 7.20361 14.0026C7.35983 14.0143 7.4472 14.0297 7.59797 14.0722C7.74302 14.1131 8.00429 14.2315 8.52682 14.4682C9.13692 14.7446 9.8015 14.9218 10.5 14.9795M19 17.5C19 18.8807 17.8807 20 16.5 20C15.1193 20 14 18.8807 14 17.5C14 16.1193 15.1193 15 16.5 15C17.8807 15 19 16.1193 19 17.5ZM15 7C15 9.20914 13.2091 11 11 11C8.79086 11 7 9.20914 7 7C7 4.79086 8.79086 3 11 3C13.2091 3 15 4.79086 15 7Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> Html
  </li>
</ul>