Как верстать тень у иконки?

Question

[Иван]

Здравствуйте !

Уважаемые разработчики,начинаю верстаю бесплатный макет, ради опыта и проверки своих скиллов. И в стал ступор с тенями у иконок. Подскажите, как можно это реализовать? Точнее, как наиболее "правильно" это реализовать. Сам думаю копать в сторону иконочного шрифта, либо svg, но ни с тем,и не с другим ещё не сталкивался.. Прошу вашей помощи!

Answer 1

[Flur]

Бля пацаны не смешно. Вы работаете вместе что ли или проходите стажировку ?

Как лучше сверстать такую тень?

А делается всё просто: блок с градиентом трансформируешь и абсолютом запихиваешь в relative контейнер с иконкой

Comments

[Иван]

Огромное спасибо!

И нет, я скачал из интернета данный макет,и пытаюсь сверстать. Он не сложный , но только с этим эффектом встал вопрос..

[Flur]

Иван: ясно) да пжлста)

[Иван]

Flur: На самом деле,сложновато новичку искать эффект,которого даже название не знаешь:)

[Иван]

Flur: Но как я понял, в png формате,это работать не будет?Лучше в иконочный шрифт ,да?

[Саша]

Иван: иконочный шрифт прошлое.
сейчас лучше использовать иконки в SVG формате.
но к ним не применить text/box-shadow.

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

[Иван]

Саша: Ну вот вроде понимаю,но как сделать чтобы эта псевдотень начиналось строго от границ самой иконки..Ума не приложу..Уж извините за тупость)

[Саша]

Иван в этом и есть костыль)
просто позиционируете так, что бы она оказалась как надо.
в данном случае это несколько элементов, у каждого своя тень.

[Иван]

Саша: Как понимаю,значит в любой момент может костыль появится)

А если делать иконочном шрифтом(да,понимаю что метод старый,но и макет не совсем новый) будет менее костыльнее ,но наиболее неправильно,я правильно понял?)

[Саша]

Иван костыль потому что как итог будет куча кода, потому что иконок таких наверняка больше, чем одна.

иконочный шрифт вполне подойдет для реализации
https://codepen.io/salahuddin/pen/gLQWxL

[Иван]

Саша: теперь окончательно понял,что в верстке(войне)любое средство хорошо,которая подходит под задачи и требования,огромное спасибо от новичка :)

[Саша]

Иван: не за что!)

[Нерон Лордов]

Саша:

иконочный шрифт прошлое.
сейчас лучше использовать иконки в SVG формате.

Почему?

[Flur]

Nekto_Habr: по сути это одно и то же. Можно любой svg преобразовать в иконочный шрифт. Пример, тот же Font Awesome

[Нерон Лордов]

Flur: но если это одно и то же, как можно говорить что один из них лучше?

Я спрашиваю т.к. сам вебдиз и люблю иконочные шрифты. Удобно. Вместо возни с свг указываешь просто параметры шрифта, которые еще и через стили можно контролировать.

[Саша]

Nekto_Habr: Flur: svg иконки лучше потому что:
- отсутствует запрос на сервер
- отсутствует ошибка, когда вместо иконок артефакты (как бывает с шрифтом)
- не будут размыты

ребят, вы как дизайнеры должны знать это лучше верстальщиков :)

[Иван]

Саша: Размыты?а почему?Это же тот же вектор

[Саша]

Иван: вектор это SVG, а шрифт там свои кривые, которые объяснить увы не могу.

[Нерон Лордов]

Саша:

ребят, вы как дизайнеры должны знать это лучше верстальщиков :)

Ну если следовать такой логике, то и верстальщики должны разбираться в дизайне не хуже дизайнеров.

Запрос на сервак в каком случае отсутствует? Когда свг-код напрямую внедрён в хтмл? По-моему, чаще загружается мастер-свг, со всеми иконками, откуда уже посредством кода дёргаются отдельные иконки. Сильно похоже на скачивание шрифта и отображение его глифов. Нет?) Я не утверждаю, сам не очень разбираюсь в общении между клиентом и сервером.

А вот по поводу размытия очень спорно. Размытие возникает из-за некорректно заданных размеров иконки. Тут совершенно неважно, как она реализована - шрифтом или свг, т.к. если контуры не попадают в пиксельную сетку - никак свг-формат не спасёт от антиалисинга. Тут что в шрифте, что в свг нужно правильно подбирать размер иконки.

И в шрифте вектор точно такой же, как и в свг. Свг это просто формат, который понимают браузеры. Для проверки, закинь в люстру свг-иконку и рядом напечатай ее же через шрифт и преврати шрифт в кривые (материальные иконки в помощь) - прокликай контуры, сравни узлы, всё то же самое.

[Саша]

Nekto_Habr: запрос на сервер отсутствует по причине использование иконок как кода, а не отдельного файла как в случае с шрифтом.

не помню, что бы была информация о размытости svg иконок, а вот у иконочного шрифта бывает)