Комментарии 144
Круто получилось!
Спасибо!
Осталось сделать приложения на CCS3 :) предлагаю начать с калькулятора :)
у меня он тоже на первом месте в списке запланированных к реализации приложений ;)
Уже есть :) habrahabr.ru/blogs/css/131507/
эмм, а закончить CSS-OS?
Нет уж сначала пусть айфон до полного функционала доделают.
Маньяк :)
Автор знает толк.
mad skills detected!
Nokia 3310 слабо? :-)
Нокия 3310 на css3 это моветон.
После иконок этого iPhone уже ничего не слабо :D
Только после того, как на самой 3310 это можно будет просмотреть )
Можно вместо резюме высылать
Ты реально крут, мен.
можете прикинуть сколько времени ушло на работу?
а почему аннимации средствами джс, а не цсс?
Кто-то должен был это сделать:
Blackberry (6.0) напрягся и нарисовал. Жутко тормозит, но чего можно ожидать от iPhone на устройстве конкурента )))
Под Android в Opera Mobile — всё отлично, в дефолтном браузере — печалька, прям как в скрине выше.
Это я не к тому, что оно нужно) Просто для информации. За работу — уважуха. Надо будет посмотреть код, интересно как всё это сделано :)
а у меня на htc наоборот- в опере рисует квадрат, а дифолтный браузер отрисовывает все норм. правда с красным фоном. Но самое забавное что после загрузки дифолтный браузер редиректит страничку на главную htc, не из-за слова iphone в адресе ли? ;)
iPhone на iPhone :)
Подлагивает конечно знатно.
Подлагивает конечно знатно.
НЛО прилетело и опубликовало эту надпись здесь
Мсье знает толк.
Суров. Очень суров.
Замечательно! Есть к чему придраться, но работа проделана отличная.
Было бы интересно почитать побольше подробностей про реализацию: наверняка же встретились разные особенности в применении трансформов и градиентов? Подобные примеры позволяют очень хорошо изучить всяческие грабли и подводные камни, об этом вполне можно написать серию статей :)
А, да: из придирок одну-таки упомяну: на js тут надо было сделать только тянущийся слайдер, а вот все остальные состояния было бы круто сделать тоже чисто на CSS, на :target или на :checked.
Было бы интересно почитать побольше подробностей про реализацию: наверняка же встретились разные особенности в применении трансформов и градиентов? Подобные примеры позволяют очень хорошо изучить всяческие грабли и подводные камни, об этом вполне можно написать серию статей :)
А, да: из придирок одну-таки упомяну: на js тут надо было сделать только тянущийся слайдер, а вот все остальные состояния было бы круто сделать тоже чисто на CSS, на :target или на :checked.
НЛО прилетело и опубликовало эту надпись здесь
Да, со слайдом «честно» мало что можно сделать )
Я быстренько, на основе вашего варианта сделал аналог на ховере: dabblet.com/gist/1522751 — особо его не прорабатывал, но идея должна быть понятна :)
(фф/вебкиты ок)
Я быстренько, на основе вашего варианта сделал аналог на ховере: dabblet.com/gist/1522751 — особо его не прорабатывал, но идея должна быть понятна :)
(фф/вебкиты ок)
Круто! я даже и не думал по началу такое делать, а сейчас вот можно попробовать реализовать все на CSS! Спасибо, товарищи!)
clip2net.com/s/1r38g — это еще нужно постараться заметить, а навести вообще никак
PS но дабблет нериально крут )
PS но дабблет нериально крут )
НЛО прилетело и опубликовало эту надпись здесь
Спасибо:)
да, на самом деле у каждой иконки фактически своя история! а описывать все в этой статье (3395 строк кода css) не особо правильно:) потому наверное оставлю либо на потом, либо соберу еще самое интересное еще на статью:)
придирка стоит свеч, найду время и постараюсь реализовать:) еще раз спасибо!
да, на самом деле у каждой иконки фактически своя история! а описывать все в этой статье (3395 строк кода css) не особо правильно:) потому наверное оставлю либо на потом, либо соберу еще самое интересное еще на статью:)
придирка стоит свеч, найду время и постараюсь реализовать:) еще раз спасибо!
Офигеть, в шоке. Просто круто.
в хромиуме 15.0.874.106 (Сборка для разработчиков 107270 Linux) Ubuntu 11.10
Идея не нова. Еще на одном из Субботников Яндекса показывали тоже вариант верстки айфона с иконками.
Но за монстрячество плюс! У меня бы терпения не хватило напечатать >3k строк css ради развлекухи)
Но за монстрячество плюс! У меня бы терпения не хватило напечатать >3k строк css ради развлекухи)
Да, знаю что не нова, но все эти варианты как-то показались не реалистичными и не так похожыми на реальный iPhone. Да и иконки у этого не такие красочные и заморочливые.
Спасибо. У меня к завершению на последние иконки тоже терпения не хватало, но хорошо что добил таки)
Спасибо. У меня к завершению на последние иконки тоже терпения не хватало, но хорошо что добил таки)
Кстати, версия TjRusа без проблем работает в Opera 11.6, а вот этот вариант не работает. В Хроме отрисовывается нормально, но это же не так круто!
Зачем?
1. Вызов самому себе;
2. Это казалось очень хорошей демкой CSS3 возможностей (хоть и далеко не всех).
2. Это казалось очень хорошей демкой CSS3 возможностей (хоть и далеко не всех).
Не пойми привратно, создать такое действительно очень круто, просто вызов самому себе нужен только тебе, а о таких возможностях CSS3 все и так знают. Я не против таких забав, но было бы круто увидеть что-то реально новое, полезное для применения на различных проектах.
К примеру чашка чая Вадима Макеева по сравнению с этим выглядит довольно скудно, но для своего времени это было нечто потрясающе. Сейчас подобного рода вещи, расцениваются мной как просто забава.
Безусловно, что кто-то обязательно увидит нечто полезное для себя в этом посте. Здесь и выше исключительно моё личное мнение.
К примеру чашка чая Вадима Макеева по сравнению с этим выглядит довольно скудно, но для своего времени это было нечто потрясающе. Сейчас подобного рода вещи, расцениваются мной как просто забава.
Безусловно, что кто-то обязательно увидит нечто полезное для себя в этом посте. Здесь и выше исключительно моё личное мнение.
Вашу бы энергию, да в мирное русло =)
Фантастика!
А вы не из Челябинска случаем? О.о
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Офигенно. По исходникам буду изучать CSS3 на практике :) Всегда мечтал, чтобы красивые сайты были без картинок.
Шикарно!
Мне бросали на него ссылку в твиттере пару дней назад, впечатлило.
Мне бросали на него ссылку в твиттере пару дней назад, впечатлило.
Браво
Интересно теперь посмотреть на это используя это habrahabr.ru/blogs/webdev/135336/ )
Браво!
Не удержался добавил в избранное
Какой проект следующий? :)
Пара идей по улучшениям.
Анимацию иконок при разблокировке можно сделать через 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/
Анимацию иконок при разблокировке можно сделать через 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/
А вот тут конкретно с градиентом: www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/
Автор — брутальный css3 маньяк и большой молодец ^_^
ps нужно попробовать сделать калькулятор или metro ui на html5.
ps нужно попробовать сделать калькулятор или metro ui на html5.
супер, только пменяйте «iPhone4 on pure CSS3!» на «iPhone4 in pure CSS3!», так правильнее
А хабраэффект на сайте состоялся? :)
ждите иск от Эпл :D
С утра после прочтения поста не покидало чувство невыполненного долга, спать хочется — ужасно, но не смог заснуть не разместив ссылки на это:
вот: demo.tutorialzine.com/2011/10/ios-homescreen-coffeescript/
и вот: iphone.hohli.com/
для завершенности картины мастера =)
Круто!
вот: demo.tutorialzine.com/2011/10/ios-homescreen-coffeescript/
и вот: iphone.hohli.com/
для завершенности картины мастера =)
Круто!
Это очень, очень здорово! Респект!
У меня AppStore не открывается(
Ждите иска за иконку youtube
Безумно круто!
кому интересно вот статистика за месяц существования странички с iPhone 4 на CSS3 — http://tjrus.com/blog/iphone-4-in-css3-first-month-statistics
может не увидел, может кто-то уже написал, но тут есть маленькая недоработка, которая будет тормозить машину
у тебя в открытой менюшке, когда #iphone_slide2unlock принимает opacity: -1.19273 все еще работает и каждый span крутит opacity
у тебя в открытой менюшке, когда #iphone_slide2unlock принимает opacity: -1.19273 все еще работает и каждый span крутит opacity
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
iPhone 4 на CSS3 без использования картинок