Как мы сжимали шарики

[@QiT]

круто. удачи!

[@Storm2k]

Нельзя ли сделать, как просят в первом комменте, потрясти шарик?

[@dima117]

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

[@hmelyoff]

А каков адрес сайт? :)

Кстати, в сафари не обрезается все что вокруг шарика.

[@dima117]

www.8-ball.ru

[@Alder]

Предложение поддержать шарик залазит под сам шарик :) 1280х800, Firefox 3.6.8, Ubuntu 10.04.

[@dima117]

Проверьте, вроде сейчас должно быть все ок.

(объявление должно быть под шариком)

[@Alder]

да, сейчас всё отлично.

[@dima117]

Ага, в сафари фон по умолчанию отличается от остальных броузеров.

Если честно, в сафари не смотрели. Там на сайте нужно было выбирать, для каких броузеров оптимизировано приложение и там либо хром, либо сафари. Соответственно, мы выбрали хром и bp webkit-борузеров смотрели только в нем.

Потом поправим фон.

[@Valery4]

Не только в Сафари

[@dima117]

Правильно ли я понимаю, что у Вас Mac?
Возможно, проблема в этом. У меня в этой же версии Chrome под Windows все ок.

Жаль, что забыли залить цветом по умолчанию перед началом рисования картинки. Но уже ничего не поделаешь :(

[@Valery4]

Вы поняли совершенно верно.

[@dima117]

Видимо, серая заливка — особенность webkit от Apple

[@Valery4]

Возможно проблемма с Сафари только на Маках? Никто не проверял, ради интереса, в Сафари на Виндоус?

[@dima117]

Проверял.
Серый фон присутствует.

[@madhare]

и к сожалению не только на движках вебкита)

[@Elufimov]

Смотрится офигенно круто!

[@Roxis]

Интересно, сколько бы весил такой мяч в SVGz?

[@FloppyFormator]

В качестве альтернативы не пробовали рассматривать svg? На мой взгляд, это менее трудоёмко.
Однако ваш результат впечатляет. Удачи!

[@bazilxp]

SVG интересный вариант, ну получилось на canvas :)
Возможно с SVG Пришли бы к размеру половинки гифа

[@dima117]

Сейчас я тоже думаю, что SVG — менее трудоемко, но позавчера утром я, к сожалению, совсем ничего не знал ни про canvas, ни про SVG.

Мы схватили первое, что попалось под руку.

В любом случае, я не считаю, что мы впустую потратили время, т.к. получили опыт. Это очень важно для меня.

[@Serator]

Или даже на CSS3 (правда в IE поддержки не будет). Что-что, а сглаживание градиентов у CSS3 получше чем у canvas, проверено на собственном опыте.

[@alexxxst]

в общем-то, с canvas ее тоже нет :)

[@oxpa]

Помнится, у адидаса была реклама со слоганом «невозможное возможно». Почему-то почитав ваш топик сразу вспомнил эту фразу ;) Ведь невозможно сжать png изображение более чем в 3 раза!

[@kovyrlo]

Вы об этом адидасу скажите…

[@oxpa]

сказать адидасу что «невозможно сжать шарики в три раза»? Боюсь, они неправильно меня поймут.

[@vasfed]

(Про svg наверняка будет большинство коментов)
Можно было выбрать целевым браузером firefox и сделать генерацию inline svg

[@ultralamer]

Так там же по условиям конкурса обязательно должна быть кроссбраузерность.

[@vasfed]

Хм, действительно упустил
Благо требуется работа в IE9, FF и webkit, свежие версии всех троих уже умеют его отображать

[@alexxxst]

в ИЕ8 не открылось… где она, для 9-ки чтоль?

[@dima117]

Да, IE8 не поддерживает canvas.
В требованиях конкурса IE9 Platform Preview.

[@dima117]

Возможно, и не стоило.

На картинке есть небольшая потеря качества, которая появилась при сохранении в GIF (посмотрите на градиент сверху). При рисовании на JS потери качества нет.

Наверно, если бы мы додумались после еще раз сохранить картинку в PNG, то довольствовались бы таким вариантом.

[@bazilxp]

таки на канвасе без потери градиента. хотелось вид нормальный

[@hideo]

Супер, молодцы чуваки!

[@kovyrlo]

Молодцы! )
А небольшая треугольная рамка после исчезания треугольника должна оставаться? FF3.6.8

[@dima117]

Если честно, нет. Там небольшой косяк с заливкой.
Отправляли поздно вечером и голова уже плохо соображала.

[@jil]

Там в коментах жалуются, что нельзя его трясти :)
Надо было канву подергать перед ответом…

Можно ещё менять код? Или уже поздно?

[@dima117]

поздно :(

[@kovyrlo]

Жаль, но это не меняет нашего отношения к вам и вашему творению)

[@j0ker]

Добавил вам четырехсотый голос — пятерку :)
Отличная работа!

[@habrauser]

Раз приём заявок на конкурс закончился, может поголосуем за хабранарод?
Fontanero: статья 1, статья 2. На 10k.
10k World: статья на хабре, на 10к.
Twimage: статья на хабре, на 10к.
И ранее была статья о сервисе suncalc.net, вот версия на 10к.

[@dima117]

Отличные приложения!
Лично я уже за все их проголосовал.

Если честно, меня очень впечатлило Fontanero.
На мой взгляд, они достойны победы в конкурсе.

Я думаю, у нас есть шанс хорошо выступить в номинациях «лучший дизайн» и, возможно, «выбор пользователей». Но в любом случае, это будет сложно — на конкурсе много отличных работ.

[@habrauser]

20 Слов — краткий разговорник: статья на хабре, на конкурсе (10 слов).

[@bazilxp]

Cправедливо. ХабраНарод…
В следующих конкурсах тоже лучше списком…
Хорошие приложения написали другие пользователи.
Посмотрим как разложится карта.

[@Katasonov]

А что шарик такой пессемистичный? «Не думай об этом», «Думаю не стоит», «Не делай этого», «не сейчас»
все настроение испортил

[@Alkop]

Отличная работа!!! Молодцы — и… Удачи в конкурсе :)

[@Aquahawk]

А что ели теперь этот код генерации завернуть в png? Я извращенец, или не мне одному такая мысль пришла?

[@Radius]

С соседями на даче открыли шарик на смартфоне, долго задавали вопросы — хохотали весь вечер!!!

[@Radius]

Самый частый вопрос который задавала соседка — изменяет ли мне мой муж, шарик гордо отмазывал. Ни разу ни сказал да. Всем понравилось

[@n1tr0k1ll3r]

Столько всего интересного можно уместить в 10К. И наряду с этим существуют странички с с фотками, которые уменьшены из исходника атрибутами html :)

[@noma4i]

почему-то показывается заливка вокруг(safari5.0.1):

[@hacenator]

Ааааа, сволочи мой «10k World» скинули со второго места!
Всё, у меня стресс.

[@NeonXP]

Вот это да! Какая воля к победе! Сколько препятствий преодолели! Молодцы, так держать!

[@Mew]

Может я что-то не понимаю, но что мешало использовать старый добрый jpeg с белым фоном (а у сайта как раз таки белый фон)? Я поэксперементировал, в 7кб получается довольно таки сносное качество.

А вот еще идеи. Круг можно сдеать используя:
width:x;
height: x;
border-radius:x/2;
background:#000;

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

Идеем дальше. Триугольник в центре можно сделать используя лишь свойство border. Нюансов не помню, но можно получить почти любые сложные фигуры.

Самое сложное — блик. Но тут опять же, делаем эллипс с помощью border-radius, хотя не спорю, такой эллипс используя только это свойство получить трудно, но ведь у нас в рсоряжении css transform, сделать можно. А сам блик можно создать с помощью градиента, за вебкит и фф уверен, за ИЕ9 не очень, но думаю это не проблема.

и никакой графики.

[@Mew]

Опечатка. В центре делаем черный и *серый.

[@dima117]

Очень интересно Ваш вариант на CSS, но мне кажется, что добиться его корректной работы во всех броузерах было бы еще сложнее, чем рисовать все на canvas. Все-таки canvas везде рисуется одинаково (ну… кроме фона по умолчанию на маках и в сафари), в отличие от CSS.

Если пришлете реализацию отображения такого же шарика на CSS, буду Вам очень благодарен. Интересно было бы посмотреть.

[@Mew]

Не забывайте, что у нас в распоряжении хорошие браузеры, а не всякое старье. относительно несложные вещи они отрисуют одинаково. Но даже если не пиксель в пиксель — я не думаю, что это будет хоть как то заметно и станет поводом не взять этот вариант в конкурс.

Я не так крут в отрисовках с помощью ксса (особенно сложных градиентов), но точно знаю, что сделать подобное — можно. И я подозреваю, что весить будет меньше канваса.
Вечером дома попробую. Если получится — вышлю.

[@dima117]

Я полностью согласен с Вами, что, скорее всего, подобное можно сделать и оно будет занимать меньше места.

В своем предыдущем комментарии я имел в виду, что на отладку потребуется, по моему мнению, намного больше времени.

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

Рисование шарика — намного более сложная задача и я думаю, что если попробовать нарисовать шарик через CSS предложенным Вами способом, то это займет значительно больше времени. Причем если в случае с canvas в каждый момент времени мы подбираем параметры какого-то отдельного элемента картинки, то в случае с CSS, мы должны будем постоянно контролировать, чтобы не разъезжалась вся верстка.

Если сможете это реализовать — обязательно пришлите мне!

[@Mew]

Ну, собственно, кому интересно сырая версия, может до ума доведу как нить.
file.qip.ru/document/y6BFRy0i/ball.html

[@pepelsbey]

> К сожалению, теперь поздно что-то менять.

Остальные участники вполне успешно пишут патчи и как-то их публикуют. Что вам мешает?

[@dima117]

Сегодня ночью закончился срок приема работ на конкурс.
Вы уверены, что они публикуют патчи после этого срока?

[@pepelsbey]

А вот об этом не знал, но попробовать в любом случае стоит.