Pull to refresh

Comments 49

Идея — конечно верная. Давно уже нужна технология для отрисовки интерфейсных компонент. Использование картинок — не кашерно.

В вашем примере.
Если масштабировать в Хроме — у кнопок появляется прокрутка. При возвращении к нормальному масштабу, надпись у кнопок не на своем месте.
Про масштабирование в Хроме я как раз хотел упомянуть во второй статье. :-)
UFO landed and left these words here
К сожалению, о возможностях CSS3 пока ещё слишком мало знаю я. SVG мне показался самым логичным решением, поэтому я начал разбираться именно с ним. Скорее всего, теперь буду копать именно в сторону CSS3.
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
что мешает воспользоватся средствами css3?
+ градиент легко сымитировать однопиксельным растром. В CSS3 фоновую картинку можно масштабировать. Скругленные бордеры есть. К тому же размер кнопки можно через JS контролировать.
П.С.: а в Silverlight есть такое свойство «SnapsToDevicePixels» ;)
К сожалению, отмасштабированный растровый градиент всё равно не сравняется с векторным: при больших размерах он будет полосчатым из-за толстых, растянутых пикселей. В реальном применении, конечно, этого видно не будет — такие большие кнопки не используются, но останется некий внутренний дискомфорт из-за того, что сделано «некошерно». :-)
если уж css3, то никто не мешает использовать и нативную css градиентную заливку пример
UFO landed and left these words here
не всё так гладко с CSS3. мало-мальски сложные вещи часто рендерятся с отвратительным качеством
Например, кнопка со скруглёнными краями, градиентом, тенью и одно-пиксельным бордером получается вот такой

И во всех браузерах немножко по-разному!
Походил на практике — хотел прогрессивно кнопочки сделать.
Так можно же SVG из градиента использовать как фоновую картинку в CSS.
Задание SVG в качестве фона через CSS пока работает только в Хроме. Ни Опера, ни FF это делать не умеют.
опера умеет, причём давно. а вот фф только недавно научился.
Возможно, есть трюки, но есть страничка с примерами разных способов внедрения SVG: вариант CSS background у меня отобразился только в Хроме. В Опере 10.63/11.00 и FF 3.6.13 не захотел (четвёрку не тестировал).
Проверьте с простым div, всё будет работать. А тут какой-то нюанс, связанный с таблицами, мешает.
UFO landed and left these words here
В моём случае основная проблема в том, что масштабирование должно выполняться непропорционально: в одном измерении сильнее, чем в другом. В результате вертикальные и горизонтальные линии получают разную толщину, что выглядит некрасиво.
UFO landed and left these words here
Не знаю, по каким соображениям вы схлопотали первый минус. Идея игр на svg вполне имеет право на жизнь. Вот, например, кто-то уже балуется: пост, сама игра
Нет. SVG — слишком медленный для игр. Он просто поразительный тормозок! =))) И всё, что выходит за пределы статической картинки — ужасно медленно работает.


Если хотите писать на html5 игрушку — используйте Canvas — с ним реально сделать хоть что-то.
Вот игры на фреймворке LibCanvas:



UFO landed and left these words here
Ну Canvas — растровый. И более глючный, чем Флеш, будем честными =)
LibCanvas — вносит много векторных примитивов. Например, Rectangle: libcanvas.com/ru/tutorial/shapes/rectangle
Документация пока сыроватая, но она в процессе и можно задавать вопросы лично разработчику по емейлу shocksilien@gmail.com
FF 3.6.13 завис после минуты Астероидов.
скоро будет новая версия с новыми оптимизациями =)
Но даже это большее достижение, чем на базе SVG =)
Для использования SVG лучше воспользоваться js-библиотекой по типу Raphaël
А такую банальную кнопку можно и средствами CSS выполнить, пример:
ок, не знал что тут все иhttps://habrastorage.org/getpro/habr/comment_images/085/7c2/ca4/0857c2ca4437c1a410e5eb7d78acbbcd.pngдеалисты…
мои принципы
где есть градиент и цвета выходят за пределы безопасной палитры — нету места gif (разве что в самых простых случаях)
где есть текст — нету места jpg (в любом случае)
поэтому тут выход — только png

эту картинку (та что jpg) в gif я бы ещё пережил. но даже при -2 у комментария уже видно то зло которое случилось с текстом при jpeg сжатии.
Странно, вроде обещали поддержку SVG в IE9. Я в нём ещё не тестировал — проблем с остальными браузерами хватило выше крыши…
UFO landed and left these words here
Толщина линий 0.01 хороша в абстрактном представлении или когда требуется общая масштабируемость картинки для рассматривания деталей. В моём случае применение SVG оказалось довольно специфично: масштабирование применяется не для увеличения/уменьшения как такового, а для конкретной цели, изначально с масштабированием ничего общего не имеющей (растягивание кнопочного фона — и только фона, к тому же ещё и анизотропное).

Пиксели я здесь писал, чтобы дополнительно подчеркнуть, что часть размеров у нас меряется в процентах, а часть — в пикселях.
UFO landed and left these words here
Естественно, разница видна. Ну задал я толщину 0.01 — граница, само собой, тут же исчезла: кто ж её отрисует-то в одну сотую пикселя? А в сто раз увеличивать кнопку, чтобы границу рассмотреть — это какой-то весьма нестандартный подход к работе с веб-интерфейсами.
Sign up to leave a comment.

Articles