Можно ли сделать такой элемент из макета в SVG?

Question

[maitre]

Вопрос по верстке. В PSD макете есть такие элементы (прикреплены).

Там где кнопка, я цвет фона задал через background, а заокругленность вырезал из фотошопа и вставил как png + добавил кнопке overflow: hidden;, чтобы овалы не вылезали за пределы кнопки.

А там где цена - я весь этот коричневый блок (без текста) вырезал из вставил как png на страницу.

В итоге верстка получилась Pixel Perfect, все ок. Но чувствую, что эти элементы нужно было вставить на страницу через SVG. В макете расширение этих элементов не SVG.

Подскажите, на сколько правильно/не правильно я сделал и можно ли это как-то сверстать через SVG или CSS? Спасибо

Comments

[ⓒⓢⓢ]

Hyubert,

Там где кнопка, я цвет фона задал через background, а заокругленность вырезал из фотошопа и вставил как png

А там где цена - я весь этот коричневый блок (без текста) вырезал из вставил как png

И качество в шлак на мобильных устройствах, и при масштабе.
Все границы у png поплывут. Улучшить качество - увеличится размер в разы

В итоге верстка получилась Pixel Perfect

Скорее не вёрстка, а картинки =)

ЗЫ. зачем страдать делая то что не нужно, если елементы не динамические?

Почему не сделать из всего макета картинку - зачем страдать то? :/
Да страдать не будешь, будут страдать пользователи и тот для кого верстается макет ...

[Hyubert]

JRK_DV, прочтите мой коментарий нормально, если елемент не динамический, ни кнопка, ни блок до мобильной версии (скорее всего) в размерах не измениться, ели не вставлять просто через background, а вынести в псевдоелементы, то все будет в порядке - без розмытия.

Но все же, если я настолько неправ, почему ни вы, ни оратор ниже не предоставит пример, еоторий будеть работать ie10+ (clip? css mask?)

[ⓒⓢⓢ]

Hyubert, про динамику я и слова не написал. Мой посыл в комменте был в сторону адаптива. На разных устройствах "+-" будет плыть границы из-за плотности дисплеев. Я так думаю про значения слова "динамика" мы друг друга явно не поняли ...

Но все же, если я настолько неправ, почему ни вы, ни оратор ниже не предоставит пример

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

Answer 1

[eternalfire]

я в шоке, в 2к18-м резать макет и вставлять картинками? средствами css всё это можно легко реализовать

Comments

[Одиночка Айс]

как же за*ла эта 2К деградация...

[Hyubert]

eternalfire , интересно посмотреть на вашу css реализацию этой красоты.

ЗЫ. зачем страдать делая то что не нужно, если елементы не динамические?

[eternalfire]

Hyubert, да можно, вот вам кнопка - ушло на неё полторы минуты
https://jsfiddle.net/1kn97j8s/15/

на нижний блок чуть больше времени

[eternalfire]

Hyubert, кнопка, да и не динамическая, ой да не смешите никого здесь, вам назад в прошлое пора с вашими пониманиями

[Hyubert]

eternalfire, я все же подожду нижнего блока

[maitre]

eternalfire, большое спасибо! Первый блок смог повторить и понял как, а второй все-таки не получился в CSS, он по сложнее будет)

[eternalfire]

maitre, ну да, там придётся с градиентами и псевдоэлементами поиграться, ну и ещё с box-shadow внутрь, но это реально сделать

Answer 2

[forspamonly2]

карамельный дизайн образца середины нулевых, такое нечасто сейчас встретишь.

наверное в таком случае верстать "как тогда" - это нормально :)

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