@sasha_ka

Как реализовать в сss photoshop эффект тиснение?

Здравствуйте ! суть вопроса есть вот такой элемент d5b3f8798130490c9e76b9496446c5cb.png я его реализовал кроме такой золотистой как бы металлической обводки которая в Photoshop делается с помощью эффекта тиснения
вот мой код codepen.io/anon/pen/pgvYzq

Подскажите пожалуйста как быть с ней? для большего понимания ситуации прикладываю psd макет этого элемента (145 Кб) https://www.dropbox.com/s/iepy9ajgwj4ap19/maketik....

Буду очень благодарен за помощь!
  • Вопрос задан
  • 2394 просмотра
Решения вопроса 1
Denormalization
@Denormalization
У вас у всех CSS головоного мозга?
Почему просто не сделать эту картинку бекграундом, и сверху наложить текст? По-моему очевидное и простое решение.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
никак
css не ps и, надеюсь, никогда не станет поддерживать бредовые ненужные функции, захламляющие код
Ответ написан
Комментировать
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Мне кажется стоит использовать тот же принцип, что и в фотошопе: там такая витиеватая окантовка получается за счет смешения двух эффектов - бевела и строука.

Возможно, стоит рыть в сторону создания и наложения друг поверх друга двух окружностей с разными градиентами, интерференция которых будет похожа на сабж.
Ответ написан
Комментировать
@millwright
Можно попробовать через border-image и градиенты, такой сложный градиент скорее всего нереально сделать на чистом CSS, но что-то похожее можно, правда придётся добавлять ::after.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы