Как сверстать карточки с градиентным фоном и иконкой?

Question

[ArtemKornishon]

Взял на верстку в качестве пет-проекта макет.
В одном блоке стоит задача сверстать вот такие карточки в блоке:

Решил синюю карточку реализовать через ховер. Т.е. по дефолту карточка серая, но при ховере меняет цвет.
Сначала я сделал вот так, но проблема в том, что ховер из градиента просто все перекрывает. Можно вписать иконку в ховер тоже, но тогда для каждой карты потребуется писать отдельный ховер, а хотелось бы обойтись максимально лаконичным решением:


Второе решение стало вот таким, но тут проблема в том, что все картинки разные по размеру и их сложно спозиционировать. К тому же они через тег img не плотно прилегают к краям родителя как в макете:


Хотелось бы получить подсказку опытных ребят как лучше и проще реализовать такую карточку. Тут сложность в градиенте, который я прописывал через css + иконки на кажду карточку. Как обычно поступаете? Релевантно будет скопировать иконку и градиентную заливку одним фоном из фигмы и вставить через background? Решение вроде простое, но на сколько будет корректно?

Comments

[imko]

Для иконки не картинку а маску просто сделай, залей ее полупрозрачным серым/белым, а вонф карточки крась

Answer 1

[HARDOOPS]

I. Надеюсь, что фон изменить через linear-gradient() не проблема.
II. Иконки оформляем в SVG.
III. Задаëм SVG fill="currentColor" и меняем цвет (color) при :hover на родительском элементе.

Итого:

<div class="card"><!-- На этом :hover -->
    <div class="text"><!-- Текст с карточки --></div>
    <svg fill="currentColor" ...>...</svg>
</div>

Comments

[ArtemKornishon]

Работает только с цветом, но не с градиентом. иконки сами по себе так же градиентом залиты. Т.е. чтоб реализовать это - приходится у path убирать fill, иначе он не перезапишется через css. А в color градиент подтянуть нельзя.

[HARDOOPS]

ArtemKornishon, было бы крайне странно, если бы через color можно было задавать градиент. \_(:])_/

В таком случае, внутри тега svg создаёте linearGradient, естественно внутри defs (//developer.mozilla.org/ru/docs/Web/SVG/Element/li...), с необходимым градиентом (с помощью stop-color). В стилях пишете:

.card:hover svg linearGradient stop {
    transition: <Необходимый переход>;
}

.card:hover svg linearGradient stop:first-child {
    stop-color: <Цвет 1>;
}

.card:hover svg linearGradient stop:last-child {
    stop-color: <Цвет 2>;
}

[ArtemKornishon]

HARDOOPS, этот вариант работает. Правдка кода многовато, но реализовался крутой эффект.
Примного благодарю за помощь!

Answer 2

[Rsa97]

IMHO, отрисовать все картинки в SVG одного размера. Тогда и позиционирование будет одинаковое, и по hover можно будет цвет заливки/контура SVG менять.

Comments

[ArtemKornishon]

Правильно я понял идею - сравнять иконки в макете, выгрузить в svg и закинуть отдельным эелементом через img?

Если я правильно понял, то в целом идея рабочая, но хотелось бы избежать изменений в макете, грубо говоря - как заказчик дал, так и надо.

[Rsa97]

ArtemKornishon, Не выгрузить, а полностью перерисовать. Ну или найти подходящие. У вас сейчас растровый PNG, а нужны векторные SVG.