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

Question

[sasha_ka]

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

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

Буду очень благодарен за помощь!

Answer 1

[D']

У вас у всех CSS головоного мозга?
Почему просто не сделать эту картинку бекграундом, и сверху наложить текст? По-моему очевидное и простое решение.

Comments

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

Ну, растр теряет качество при масштабировании, например.

[D']

Liquidos: 100500 лет использовали картинки, и ничего не терялось. Тут вдруг начало терять в качестве.
Нужно делать правильно, тогда ничего не потеряется.

[copal]

D' Normalization: что Вы бред несете... Как это у всех теряет, а у Вас нет.

[D']

copal: руки выпрямляйте.

[millwright]

Очевидно, что так проще, но вопрос поставлен не так.

[sasha_ka]

Спасибо большое за дискус! действительно проще вставить картинку но всетаки искал решение кодом css. Один человек подсказал идею с использованием before , after и фоновой картинки вот что вышло codepen.io/anon/pen/pgvYzq

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

D' Normalization: мне очень интересно узнать, каким образом обеспечить увеличение растровой картинки без потери качества) При условии, что картинка только в одном варианте размеров, и отображаемые размеры совпадают с исходными)

[Вадим Полухин]

D' Normalization: время идет, начинают появляться экраны с большой плотностью пикселей

[D']

Вадим Полухин: Время идет, начинают появляться @2x картинки....

Answer 2

[Денис Букреев]

никак
css не ps и, надеюсь, никогда не станет поддерживать бредовые ненужные функции, захламляющие код

Answer 3

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

Мне кажется стоит использовать тот же принцип, что и в фотошопе: там такая витиеватая окантовка получается за счет смешения двух эффектов - бевела и строука.

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

Answer 4

[millwright]

Можно попробовать через border-image и градиенты, такой сложный градиент скорее всего нереально сделать на чистом CSS, но что-то похожее можно, правда придётся добавлять ::after.