Pull to refresh

Comments 144

Осталось сделать приложения на CCS3 :) предлагаю начать с калькулятора :)
у меня он тоже на первом месте в списке запланированных к реализации приложений ;)
у этого калькулятора как-то с графикой не очень позитивно сложилось :D
Нет уж сначала пусть айфон до полного функционала доделают.
Есть немного:) Но как и говорил в топике — вызов есть вызов, да и интересно было кодить все это.
а теперь можете расслабиться и сделать тоже самое для WP7 :)
Пока еще его даже не видел, возможно в недалеком будующем реализую;)
Что маньяк — это 100%! Но как улетно забацано!!! Просто лепота!
для солидарности с антиквариатом 3310 ?:)
Конечно, кто что поддерживает, того на том и рисуем. А стоп, хотя Nokia 3310 не поддерживает таблиц :(
а что она вообще поддерживает?) монохромные кубики?:)
Нууу, там есть змейка. Значит для нокии 3310 особым шиком должно считаться, играя в змейку выложить ей контуры самого телефона, с экраном и кнопками.
После иконок этого iPhone уже ничего не слабо :D
Я думал вы пошутили…
Зашел, разблокировал iPhone…
OMG… Шок…
Эх, все сначала думают что я шучу, но source не шутит и все ставит на свои места;)
Только после того, как на самой 3310 это можно будет просмотреть )
Ну, это уже что-то типа визитной карточки
можете прикинуть сколько времени ушло на работу?
Полторы недели по 2 часа после работы и два выходных. И чем дальше тем быстрее работалось. Последние иконки уже на уровне автоматизма пошли (правда их уже и надоедало делать под конец:))
Чтоб более кросбраузерно было. Анимация на jQuery казалось лучшим вариантом.
+ при дальнейшей доработке думаю удобнее будет использовать именно скриптовую анимацию.
можно сделать фолбек для старых браузеров. А вот цсс-аннимация (с гпу-акселерацией) теоретически могла бы решить проблему с тормозами на ios.
Неплохой вариант, реализую при первой же возможности! Спасибо!:)
Internet Explorer — я же перед ним извинился;)
вообще есть желание добавить вендорные свойства и для IE, но пока боюсь;)
UFO landed and left these words here
спасибо!)
ну, да, под 9-й можно еще подогнать, согласен — исправлюсь.
касательно символа — о нем я забыл и сделал просто буквой :)
UFO landed and left these words here
UFO landed and left these words here
Blackberry (6.0) напрягся и нарисовал. Жутко тормозит, но чего можно ожидать от iPhone на устройстве конкурента )))
этот iPhone и на самом iPhone работает не ахты быстро) все из-за огромного количества CSS3 теней, градиентов, скейлов и поворотов
Под Android в Opera Mobile — всё отлично, в дефолтном браузере — печалька, прям как в скрине выше.
Это я не к тому, что оно нужно) Просто для информации. За работу — уважуха. Надо будет посмотреть код, интересно как всё это сделано :)
спасибо) на самом деле деле очень интерестно как это все дело работает в разных браузерах, так-что если есть возможность сделать скрины — кидайте мне на мыло!)
а у меня на htc наоборот- в опере рисует квадрат, а дифолтный браузер отрисовывает все норм. правда с красным фоном. Но самое забавное что после загрузки дифолтный браузер редиректит страничку на главную htc, не из-за слова iphone в адресе ли? ;)
А опера мобайл или мини? Я в мобайле пробовал. Дефолтный тоже никуда не редиректил)
Опера мини. Сейчас еще раз проверил, не редиректит. Но я уверен, что мне не показалось)
Ну мини она на то и мини) Зачем она вообще вам? В мобайл так же есть турбо (когда ужимается трафик), куча плюшек и много всего поддерживается.
да, есть такое, но увы, поправить скорость рендера такого CSS3 врятле получится
Картинки что-то не вставились. Попробую ссылками.
Посмотреть на Яндекс.Фотках
Посмотреть на Яндекс.Фотках
Для картинок нужно больше К. Используй предпросмотр, Люк.
Об этом не писали :)
Могли бы скрыть те теги, которые я не могу использовать, когда жмешь на ссылку «можно использовать html-теги». А так вводят заблуждение меня :) Говорят, что теги использовать можно и я их использую, а то что они не пашут — это не я виноват :)
UFO landed and left these words here
Замечательно! Есть к чему придраться, но работа проделана отличная.

Было бы интересно почитать побольше подробностей про реализацию: наверняка же встретились разные особенности в применении трансформов и градиентов? Подобные примеры позволяют очень хорошо изучить всяческие грабли и подводные камни, об этом вполне можно написать серию статей :)

А, да: из придирок одну-таки упомяну: на js тут надо было сделать только тянущийся слайдер, а вот все остальные состояния было бы круто сделать тоже чисто на CSS, на :target или на :checked.
UFO landed and left these words here
Да, со слайдом «честно» мало что можно сделать )

Я быстренько, на основе вашего варианта сделал аналог на ховере: dabblet.com/gist/1522751 — особо его не прорабатывал, но идея должна быть понятна :)

(фф/вебкиты ок)
Круто! я даже и не думал по началу такое делать, а сейчас вот можно попробовать реализовать все на CSS! Спасибо, товарищи!)
clip2net.com/s/1r38g — это еще нужно постараться заметить, а навести вообще никак

PS но дабблет нериально крут )
Да, там иногда бывают проблемы из-за реализации тулбара. Но в любом случае переместил блок чуть ниже, чтобы он никогда не перекрывался тулбаром.
UFO landed and left these words here
Спасибо:)

да, на самом деле у каждой иконки фактически своя история! а описывать все в этой статье (3395 строк кода css) не особо правильно:) потому наверное оставлю либо на потом, либо соберу еще самое интересное еще на статью:)

придирка стоит свеч, найду время и постараюсь реализовать:) еще раз спасибо!
в хромиуме 15.0.874.106 (Сборка для разработчиков 107270 Linux) Ubuntu 11.10

Оу, да, там юзается символ которого у вас в системе нету. Замечание учтено и поставлено в задачах на исправление ;)
Спасибо.
Идея не нова. Еще на одном из Субботников Яндекса показывали тоже вариант верстки айфона с иконками.
Но за монстрячество плюс! У меня бы терпения не хватило напечатать >3k строк css ради развлекухи)
Да, знаю что не нова, но все эти варианты как-то показались не реалистичными и не так похожыми на реальный iPhone. Да и иконки у этого не такие красочные и заморочливые.
Спасибо. У меня к завершению на последние иконки тоже терпения не хватало, но хорошо что добил таки)
Кстати, версия TjRusа без проблем работает в Opera 11.6, а вот этот вариант не работает. В Хроме отрисовывается нормально, но это же не так круто!
1. Вызов самому себе;
2. Это казалось очень хорошей демкой CSS3 возможностей (хоть и далеко не всех).
Не пойми привратно, создать такое действительно очень круто, просто вызов самому себе нужен только тебе, а о таких возможностях CSS3 все и так знают. Я не против таких забав, но было бы круто увидеть что-то реально новое, полезное для применения на различных проектах.
К примеру чашка чая Вадима Макеева по сравнению с этим выглядит довольно скудно, но для своего времени это было нечто потрясающе. Сейчас подобного рода вещи, расцениваются мной как просто забава.
Безусловно, что кто-то обязательно увидит нечто полезное для себя в этом посте. Здесь и выше исключительно моё личное мнение.
Понима, но у вас разве не бывало таких случаев в жизни, что глядя на чью-то работу вам хочется сделать что-то подобное, или вы понимаете что какая-нибудь идея что засела в голове таки стоит свеч и что ее не стоит откладывать. Я не думал стоит это сделать или нет. Мне просто хотелось это сделать.
Конечно бывало. Повторюсь, в интернете идея рисования средствами CSS3 раскрыта полностью. Лично я не вижу ничего нового либо побуждающего к созданию нового. Это как рисование в пейнте или картины в эксле. Круто, но не более того.
Так iPhone довольно таки мирное существо;)
UFO landed and left these words here
эм, если эпл скоро не пришлет повестку в суд, то нет (я надеюсь что нет) :)
UFO landed and left these words here
если и да, то уж точно не на CSS! хотя растровую графику на CSS рисовать не сложно, только не знаю пока как с этим браузер справится:)
Офигенно. По исходникам буду изучать CSS3 на практике :) Всегда мечтал, чтобы красивые сайты были без картинок.
да, сейчас весь UI красиво можно делать без использования картинок, только всякие красивости для визуального оформления пока еще их требуют.
ага, только не впадайте в крайности — там где можно сделать картинку на 5кб — не надо городить скриптов (ведь памяти для css браузер будет жрать больше чем чем для хранения битмапа).
Шикарно!
Мне бросали на него ссылку в твиттере пару дней назад, впечатлило.
Спасибо!
Я его в инет выложил 19-го декабра в 1:13 ночи по киевскому. Он почему-то больше всего китайский контингент заинтересовал — 50% трафа до вчерашнего дня. Сегодня хабр исправляет сей процент:)
UFO landed and left these words here
UFO landed and left these words here
увы нет, iPad будет несколькими месяцами позже, пока есть проектик покруче;)
по круче чем iPad? Вы знаете, почему-то, кроме iPad 2 и адронного коллайдера, круче iPad ничего в голову не приходит.
Пара идей по улучшениям.
Анимацию иконок при разблокировке можно сделать через transition + transform: translate(), как то так:
.icon
{

transform: translate(-100px, -100px); /* для каждой иконки будет свое смещение*/
transition: translate 1s .25s; /* подберете сами */
}
.phone_on .icon
{
transform: translate(0px, 0px); /* для всех иконок будет будет нулевое смещение */
}
Анимация должна получиться более плавная.
Так же в этом случае можно не использовать position: absolute, а использовать float (меньше кода для позиционирования).
Насчет анимации slide to unlock: для webkit можно попробовать сделать как здесь trentwalton.com/bgclip/
Автор — брутальный css3 маньяк и большой молодец ^_^
ps нужно попробовать сделать калькулятор или metro ui на html5.
супер, только пменяйте «iPhone4 on pure CSS3!» на «iPhone4 in pure CSS3!», так правильнее
за сегодня уже «28 214 Посещения» и «27 361 Уникальные посетители»
было бы удивительно если бы он таки открылся:D
там пока нет функционала для работы приложений
не думаю, что после самсунга эплу будет интересно меня тролить:)
эм, я думаю иконка не так страшна как iPhone, они ведь его тоже запатентовали:D
может не увидел, может кто-то уже написал, но тут есть маленькая недоработка, которая будет тормозить машину

у тебя в открытой менюшке, когда #iphone_slide2unlock принимает opacity: -1.19273 все еще работает и каждый span крутит opacity
Only those users with full accounts are able to leave comments. Log in, please.