Вопрос по верстке. В PSD макете есть такие элементы (прикреплены).
Там где кнопка, я цвет фона задал через background, а заокругленность вырезал из фотошопа и вставил как png + добавил кнопке overflow: hidden;, чтобы овалы не вылезали за пределы кнопки.
А там где цена - я весь этот коричневый блок (без текста) вырезал из вставил как png на страницу.
В итоге верстка получилась Pixel Perfect, все ок. Но чувствую, что эти элементы нужно было вставить на страницу через SVG. В макете расширение этих элементов не SVG.
Подскажите, на сколько правильно/не правильно я сделал и можно ли это как-то сверстать через SVG или CSS? Спасибо
Там где кнопка, я цвет фона задал через background, а заокругленность вырезал из фотошопа и вставил как png
А там где цена - я весь этот коричневый блок (без текста) вырезал из вставил как png
И качество в шлак на мобильных устройствах, и при масштабе.
Все границы у png поплывут. Улучшить качество - увеличится размер в разы
В итоге верстка получилась Pixel Perfect
Скорее не вёрстка, а картинки =)
ЗЫ. зачем страдать делая то что не нужно, если елементы не динамические?
Почему не сделать из всего макета картинку - зачем страдать то? :/
Да страдать не будешь, будут страдать пользователи и тот для кого верстается макет ...
JRK_DV, прочтите мой коментарий нормально, если елемент не динамический, ни кнопка, ни блок до мобильной версии (скорее всего) в размерах не измениться, ели не вставлять просто через background, а вынести в псевдоелементы, то все будет в порядке - без розмытия.
Но все же, если я настолько неправ, почему ни вы, ни оратор ниже не предоставит пример, еоторий будеть работать ie10+ (clip? css mask?)
Hyubert, про динамику я и слова не написал. Мой посыл в комменте был в сторону адаптива. На разных устройствах "+-" будет плыть границы из-за плотности дисплеев. Я так думаю про значения слова "динамика" мы друг друга явно не поняли ...
Но все же, если я настолько неправ, почему ни вы, ни оратор ниже не предоставит пример
Потому что тут вам, никто нечего не должен и тем более в чём-то убеждать.
Если у тебя что-то не получается сверстать, так и задай вопрос про это, спроси что именно не получается, тут всегда рады помочь.
карамельный дизайн образца середины нулевых, такое нечасто сейчас встретишь.
наверное в таком случае верстать "как тогда" - это нормально :)
полукруглые блики на кнопке и блоке можно сделать радиальным градиентом, низ блоку тоже им можно срезать, хотя и некрасиво. а вот блик по верху блока чистым css не сделать, да и не нужно.
