Comments 65
круто. удачи!
Нельзя ли сделать, как просят в первом комменте, потрясти шарик?
прием заявок на конкурс уже закончился, а на сайте шарика сделаем
А каков адрес сайт? :)
Кстати, в сафари не обрезается все что вокруг шарика.
Кстати, в сафари не обрезается все что вокруг шарика.
Ага, в сафари фон по умолчанию отличается от остальных броузеров.
Если честно, в сафари не смотрели. Там на сайте нужно было выбирать, для каких броузеров оптимизировано приложение и там либо хром, либо сафари. Соответственно, мы выбрали хром и bp webkit-борузеров смотрели только в нем.
Потом поправим фон.
Если честно, в сафари не смотрели. Там на сайте нужно было выбирать, для каких броузеров оптимизировано приложение и там либо хром, либо сафари. Соответственно, мы выбрали хром и bp webkit-борузеров смотрели только в нем.
Потом поправим фон.
Смотрится офигенно круто!
Интересно, сколько бы весил такой мяч в SVGz?
В качестве альтернативы не пробовали рассматривать svg? На мой взгляд, это менее трудоёмко.
Однако ваш результат впечатляет. Удачи!
Однако ваш результат впечатляет. Удачи!
SVG интересный вариант, ну получилось на canvas :)
Возможно с SVG Пришли бы к размеру половинки гифа
Возможно с SVG Пришли бы к размеру половинки гифа
Сейчас я тоже думаю, что SVG — менее трудоемко, но позавчера утром я, к сожалению, совсем ничего не знал ни про canvas, ни про SVG.
Мы схватили первое, что попалось под руку.
В любом случае, я не считаю, что мы впустую потратили время, т.к. получили опыт. Это очень важно для меня.
Мы схватили первое, что попалось под руку.
В любом случае, я не считаю, что мы впустую потратили время, т.к. получили опыт. Это очень важно для меня.
Или даже на CSS3 (правда в IE поддержки не будет). Что-что, а сглаживание градиентов у CSS3 получше чем у canvas, проверено на собственном опыте.
Помнится, у адидаса была реклама со слоганом «невозможное возможно». Почему-то почитав ваш топик сразу вспомнил эту фразу ;) Ведь невозможно сжать png изображение более чем в 3 раза!
(Про svg наверняка будет большинство коментов)
Можно было выбрать целевым браузером firefox и сделать генерацию inline svg
Можно было выбрать целевым браузером firefox и сделать генерацию inline svg
UFO just landed and posted this here
Супер, молодцы чуваки!
Молодцы! )
А небольшая треугольная рамка после исчезания треугольника должна оставаться? FF3.6.8
А небольшая треугольная рамка после исчезания треугольника должна оставаться? FF3.6.8
Там в коментах жалуются, что нельзя его трясти :)
Надо было канву подергать перед ответом…
Можно ещё менять код? Или уже поздно?
Надо было канву подергать перед ответом…
Можно ещё менять код? Или уже поздно?
Добавил вам четырехсотый голос — пятерку :)
Отличная работа!
Отличная работа!
Раз приём заявок на конкурс закончился, может поголосуем за хабранарод?
Fontanero: статья 1, статья 2. На 10k.
10k World: статья на хабре, на 10к.
Twimage: статья на хабре, на 10к.
И ранее была статья о сервисе suncalc.net, вот версия на 10к.
Fontanero: статья 1, статья 2. На 10k.
10k World: статья на хабре, на 10к.
Twimage: статья на хабре, на 10к.
И ранее была статья о сервисе suncalc.net, вот версия на 10к.
Отличные приложения!
Лично я уже за все их проголосовал.
Если честно, меня очень впечатлило Fontanero.
На мой взгляд, они достойны победы в конкурсе.
Я думаю, у нас есть шанс хорошо выступить в номинациях «лучший дизайн» и, возможно, «выбор пользователей». Но в любом случае, это будет сложно — на конкурсе много отличных работ.
Лично я уже за все их проголосовал.
Если честно, меня очень впечатлило Fontanero.
На мой взгляд, они достойны победы в конкурсе.
Я думаю, у нас есть шанс хорошо выступить в номинациях «лучший дизайн» и, возможно, «выбор пользователей». Но в любом случае, это будет сложно — на конкурсе много отличных работ.
20 Слов — краткий разговорник: статья на хабре, на конкурсе (10 слов).
Cправедливо. ХабраНарод…
В следующих конкурсах тоже лучше списком…
Хорошие приложения написали другие пользователи.
Посмотрим как разложится карта.
В следующих конкурсах тоже лучше списком…
Хорошие приложения написали другие пользователи.
Посмотрим как разложится карта.
А что шарик такой пессемистичный? «Не думай об этом», «Думаю не стоит», «Не делай этого», «не сейчас»
все настроение испортил
все настроение испортил
Отличная работа!!! Молодцы — и… Удачи в конкурсе :)
А что ели теперь этот код генерации завернуть в png? Я извращенец, или не мне одному такая мысль пришла?
С соседями на даче открыли шарик на смартфоне, долго задавали вопросы — хохотали весь вечер!!!
Столько всего интересного можно уместить в 10К. И наряду с этим существуют странички с с фотками, которые уменьшены из исходника атрибутами html :)
почему-то показывается заливка вокруг(safari5.0.1):
Ааааа, сволочи мой «10k World» скинули со второго места!
Всё, у меня стресс.
Всё, у меня стресс.
Вот это да! Какая воля к победе! Сколько препятствий преодолели! Молодцы, так держать!
Может я что-то не понимаю, но что мешало использовать старый добрый jpeg с белым фоном (а у сайта как раз таки белый фон)? Я поэксперементировал, в 7кб получается довольно таки сносное качество.
А вот еще идеи. Круг можно сдеать используя:
width:x;
height: x;
border-radius:x/2;
background:#000;
По аналогии делаем два центарльных круга, черый и черный. Просто черный слегка сдвигаем.
Идеем дальше. Триугольник в центре можно сделать используя лишь свойство border. Нюансов не помню, но можно получить почти любые сложные фигуры.
Самое сложное — блик. Но тут опять же, делаем эллипс с помощью border-radius, хотя не спорю, такой эллипс используя только это свойство получить трудно, но ведь у нас в рсоряжении css transform, сделать можно. А сам блик можно создать с помощью градиента, за вебкит и фф уверен, за ИЕ9 не очень, но думаю это не проблема.
и никакой графики.
А вот еще идеи. Круг можно сдеать используя:
width:x;
height: x;
border-radius:x/2;
background:#000;
По аналогии делаем два центарльных круга, черый и черный. Просто черный слегка сдвигаем.
Идеем дальше. Триугольник в центре можно сделать используя лишь свойство border. Нюансов не помню, но можно получить почти любые сложные фигуры.
Самое сложное — блик. Но тут опять же, делаем эллипс с помощью border-radius, хотя не спорю, такой эллипс используя только это свойство получить трудно, но ведь у нас в рсоряжении css transform, сделать можно. А сам блик можно создать с помощью градиента, за вебкит и фф уверен, за ИЕ9 не очень, но думаю это не проблема.
и никакой графики.
Опечатка. В центре делаем черный и *серый.
Очень интересно Ваш вариант на CSS, но мне кажется, что добиться его корректной работы во всех броузерах было бы еще сложнее, чем рисовать все на canvas. Все-таки canvas везде рисуется одинаково (ну… кроме фона по умолчанию на маках и в сафари), в отличие от CSS.
Если пришлете реализацию отображения такого же шарика на CSS, буду Вам очень благодарен. Интересно было бы посмотреть.
Если пришлете реализацию отображения такого же шарика на CSS, буду Вам очень благодарен. Интересно было бы посмотреть.
Не забывайте, что у нас в распоряжении хорошие браузеры, а не всякое старье. относительно несложные вещи они отрисуют одинаково. Но даже если не пиксель в пиксель — я не думаю, что это будет хоть как то заметно и станет поводом не взять этот вариант в конкурс.
Я не так крут в отрисовках с помощью ксса (особенно сложных градиентов), но точно знаю, что сделать подобное — можно. И я подозреваю, что весить будет меньше канваса.
Вечером дома попробую. Если получится — вышлю.
Я не так крут в отрисовках с помощью ксса (особенно сложных градиентов), но точно знаю, что сделать подобное — можно. И я подозреваю, что весить будет меньше канваса.
Вечером дома попробую. Если получится — вышлю.
Я полностью согласен с Вами, что, скорее всего, подобное можно сделать и оно будет занимать меньше места.
В своем предыдущем комментарии я имел в виду, что на отладку потребуется, по моему мнению, намного больше времени.
Когда я верстал самую первую версию странички, где использовалась обычная кратинка и не было ограничения по размеру, мне уже тогда пришлось приложить некоторые усилия и немножко поизвращаться, чтобы оно выглядело так, как нужно и одинаково работало во всех броузерах.
Рисование шарика — намного более сложная задача и я думаю, что если попробовать нарисовать шарик через CSS предложенным Вами способом, то это займет значительно больше времени. Причем если в случае с canvas в каждый момент времени мы подбираем параметры какого-то отдельного элемента картинки, то в случае с CSS, мы должны будем постоянно контролировать, чтобы не разъезжалась вся верстка.
Если сможете это реализовать — обязательно пришлите мне!
В своем предыдущем комментарии я имел в виду, что на отладку потребуется, по моему мнению, намного больше времени.
Когда я верстал самую первую версию странички, где использовалась обычная кратинка и не было ограничения по размеру, мне уже тогда пришлось приложить некоторые усилия и немножко поизвращаться, чтобы оно выглядело так, как нужно и одинаково работало во всех броузерах.
Рисование шарика — намного более сложная задача и я думаю, что если попробовать нарисовать шарик через CSS предложенным Вами способом, то это займет значительно больше времени. Причем если в случае с canvas в каждый момент времени мы подбираем параметры какого-то отдельного элемента картинки, то в случае с CSS, мы должны будем постоянно контролировать, чтобы не разъезжалась вся верстка.
Если сможете это реализовать — обязательно пришлите мне!
Ну, собственно, кому интересно сырая версия, может до ума доведу как нить.
file.qip.ru/document/y6BFRy0i/ball.html
file.qip.ru/document/y6BFRy0i/ball.html
> К сожалению, теперь поздно что-то менять.
Остальные участники вполне успешно пишут патчи и как-то их публикуют. Что вам мешает?
Остальные участники вполне успешно пишут патчи и как-то их публикуют. Что вам мешает?
UFO just landed and posted this here
UFO just landed and posted this here
Sign up to leave a comment.
Как мы сжимали шарики