TjRus Dec 27 2011 at 01:39

iPhone 4 на CSS3 без использования картинок

7 min

8.7K

Website development*

From sandbox

+197

144

Comments 144

Rainum Dec 27 2011 at 02:07

Круто получилось!

TjRus Dec 27 2011 at 02:21

Спасибо!

Mup4uk Dec 27 2011 at 03:14

Осталось сделать приложения на CCS3 :) предлагаю начать с калькулятора :)

TjRus Dec 27 2011 at 03:28

у меня он тоже на первом месте в списке запланированных к реализации приложений ;)

gigigi Dec 27 2011 at 03:32

Уже есть :) habrahabr.ru/blogs/css/131507/

TjRus Dec 27 2011 at 03:37

у этого калькулятора как-то с графикой не очень позитивно сложилось :D

gigigi Dec 27 2011 at 03:40

Это да :) но там другая задача была)

mihmig Dec 27 2011 at 12:18

эмм, а закончить CSS-OS?

GKelpi Dec 27 2011 at 14:45

Нет уж сначала пусть айфон до полного функционала доделают.

bendingunit22 Dec 27 2011 at 02:10

Маньяк :)

TjRus Dec 27 2011 at 02:23

Есть немного:) Но как и говорил в топике — вызов есть вызов, да и интересно было кодить все это.

AlexShkor Dec 27 2011 at 02:59

а теперь можете расслабиться и сделать тоже самое для WP7 :)

TjRus Dec 27 2011 at 03:06

Пока еще его даже не видел, возможно в недалеком будующем реализую;)

goshakkk_reborn Dec 27 2011 at 11:59

aka.ms/wpdemo

dimitrymd Dec 27 2011 at 16:29

Что маньяк — это 100%! Но как улетно забацано!!! Просто лепота!

leviathan Dec 27 2011 at 02:10

Автор знает толк.

TjRus Dec 27 2011 at 02:27

Спасибо!

Stutzer Dec 27 2011 at 02:11

mad skills detected!

TjRus Dec 27 2011 at 02:28

Yeah ;)

ferasinka Dec 27 2011 at 02:14

Nokia 3310 слабо? :-)

zaartix Dec 27 2011 at 02:20

Нокия 3310 на css3 это моветон.

Dr_Logic Dec 27 2011 at 17:55

Да его надо верстать таблицами, как минимум.

TjRus Dec 27 2011 at 17:58

для солидарности с антиквариатом 3310 ?:)

Dr_Logic Dec 27 2011 at 18:04

Конечно, кто что поддерживает, того на том и рисуем. А стоп, хотя Nokia 3310 не поддерживает таблиц :(

TjRus Dec 27 2011 at 18:07

а что она вообще поддерживает?) монохромные кубики?:)

Dr_Logic Dec 27 2011 at 18:09

Нууу, там есть змейка. Значит для нокии 3310 особым шиком должно считаться, играя в змейку выложить ей контуры самого телефона, с экраном и кнопками.

TjRus Dec 27 2011 at 02:29

После иконок этого iPhone уже ничего не слабо :D

AlexShkor Dec 27 2011 at 02:55

Я думал вы пошутили…
Зашел, разблокировал iPhone…
OMG… Шок…

TjRus Dec 27 2011 at 03:01

Эх, все сначала думают что я шучу, но source не шутит и все ставит на свои места;)

Saenco Dec 27 2011 at 02:30

Только после того, как на самой 3310 это можно будет просмотреть )

zim32 Dec 27 2011 at 02:23

Можно вместо резюме высылать

TjRus Dec 27 2011 at 02:30

Ну, это уже что-то типа визитной карточки

djvan Dec 27 2011 at 02:28

Ты реально крут, мен.

TjRus Dec 27 2011 at 02:34

Спасибо;)

Glook Dec 27 2011 at 02:36

можете прикинуть сколько времени ушло на работу?

TjRus Dec 27 2011 at 02:48

Полторы недели по 2 часа после работы и два выходных. И чем дальше тем быстрее работалось. Последние иконки уже на уровне автоматизма пошли (правда их уже и надоедало делать под конец:))

UshkiNaMakushke Dec 27 2011 at 15:58

ну ты крут))

Kigorw Dec 27 2011 at 02:46

а почему аннимации средствами джс, а не цсс?

TjRus Dec 27 2011 at 02:51

Чтоб более кросбраузерно было. Анимация на jQuery казалось лучшим вариантом.
+ при дальнейшей доработке думаю удобнее будет использовать именно скриптовую анимацию.

Kigorw Dec 27 2011 at 02:54

можно сделать фолбек для старых браузеров. А вот цсс-аннимация (с гпу-акселерацией) теоретически могла бы решить проблему с тормозами на ios.

TjRus Dec 27 2011 at 02:59

Неплохой вариант, реализую при первой же возможности! Спасибо!:)

pixxxel Dec 27 2011 at 03:00

Кто-то должен был это сделать:

TjRus Dec 27 2011 at 03:04

Internet Explorer — я же перед ним извинился;)
вообще есть желание добавить вендорные свойства и для IE, но пока боюсь;)

UFO landed and left these words here

TjRus Dec 27 2011 at 03:27

спасибо!)
ну, да, под 9-й можно еще подогнать, согласен — исправлюсь.
касательно символа — о нем я забыл и сделал просто буквой :)

UFO landed and left these words here

TjRus Dec 27 2011 at 03:51

ахаха:) спасибо на добром слове

UFO landed and left these words here

HDg Dec 27 2011 at 03:06

шестой?

TjRus Dec 27 2011 at 03:10

думаю 9-й или 8-й:)

OverWolf Dec 27 2011 at 03:20

Windows Phone 7?

beeruser Dec 27 2011 at 04:14

судя по цвету это уже Windows 8

artyfarty Dec 27 2011 at 07:43

У меня в ие6 адовее вышло:

TjRus Dec 27 2011 at 11:14

Он самоуничтожился:)

JiLiZART Dec 27 2011 at 11:27

Это он в WP7 трансформировался

PavelT Dec 27 2011 at 03:03

Blackberry (6.0) напрягся и нарисовал. Жутко тормозит, но чего можно ожидать от iPhone на устройстве конкурента )))

TjRus Dec 27 2011 at 03:09

этот iPhone и на самом iPhone работает не ахты быстро) все из-за огромного количества CSS3 теней, градиентов, скейлов и поворотов

gigigi Dec 27 2011 at 03:09

Под Android в Opera Mobile — всё отлично, в дефолтном браузере — печалька, прям как в скрине выше.

gigigi Dec 27 2011 at 03:10

Это я не к тому, что оно нужно) Просто для информации. За работу — уважуха. Надо будет посмотреть код, интересно как всё это сделано :)

TjRus Dec 27 2011 at 03:13

спасибо) на самом деле деле очень интерестно как это все дело работает в разных браузерах, так-что если есть возможность сделать скрины — кидайте мне на мыло!)

gigigi Dec 27 2011 at 03:22

Есть — отправил скрины :)

TjRus Dec 27 2011 at 03:30

Спасибо, завтра отпишусь мылом:)

magdar Dec 27 2011 at 21:49

а у меня на htc наоборот- в опере рисует квадрат, а дифолтный браузер отрисовывает все норм. правда с красным фоном. Но самое забавное что после загрузки дифолтный браузер редиректит страничку на главную htc, не из-за слова iphone в адресе ли? ;)

gigigi Dec 27 2011 at 21:52

А опера мобайл или мини? Я в мобайле пробовал. Дефолтный тоже никуда не редиректил)

magdar Dec 27 2011 at 22:05

Опера мини. Сейчас еще раз проверил, не редиректит. Но я уверен, что мне не показалось)

gigigi Dec 27 2011 at 22:14

Ну мини она на то и мини) Зачем она вообще вам? В мобайл так же есть турбо (когда ужимается трафик), куча плюшек и много всего поддерживается.

Coffin Dec 27 2011 at 03:12

iPhone на iPhone :)
Подлагивает конечно знатно.

TjRus Dec 27 2011 at 03:16

да, есть такое, но увы, поправить скорость рендера такого CSS3 врятле получится

Coffin Dec 27 2011 at 03:18

Картинки что-то не вставились. Попробую ссылками.
Посмотреть на Яндекс.Фотках
Посмотреть на Яндекс.Фотках

vanfukov Dec 27 2011 at 12:15

Для картинок нужно больше К. Используй предпросмотр, Люк.

Coffin Dec 27 2011 at 12:29

Об этом не писали :)
Могли бы скрыть те теги, которые я не могу использовать, когда жмешь на ссылку «можно использовать html-теги». А так вводят заблуждение меня :) Говорят, что теги использовать можно и я их использую, а то что они не пашут — это не я виноват :)

UFO landed and left these words here

namespace Dec 27 2011 at 03:41

Мсье знает толк.

TjRus Dec 27 2011 at 03:50

Мсье благодарит Вас, Мсье ;)

Finom Dec 27 2011 at 04:20

Суров. Очень суров.

TjRus Dec 27 2011 at 11:15

Хех, спасибо :)

kizu Dec 27 2011 at 05:38

Замечательно! Есть к чему придраться, но работа проделана отличная.

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

А, да: из придирок одну-таки упомяну: на js тут надо было сделать только тянущийся слайдер, а вот все остальные состояния было бы круто сделать тоже чисто на CSS, на :target или на :checked.

UFO landed and left these words here

kizu Dec 27 2011 at 08:53

Да, со слайдом «честно» мало что можно сделать )

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

(фф/вебкиты ок)

TjRus Dec 27 2011 at 11:22

Круто! я даже и не думал по началу такое делать, а сейчас вот можно попробовать реализовать все на CSS! Спасибо, товарищи!)

Operatino Dec 27 2011 at 15:32

clip2net.com/s/1r38g — это еще нужно постараться заметить, а навести вообще никак

PS но дабблет нериально крут )

kizu Dec 27 2011 at 15:44

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

UFO landed and left these words here

TjRus Dec 27 2011 at 11:18

Спасибо:)

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

придирка стоит свеч, найду время и постараюсь реализовать:) еще раз спасибо!

FanKiLL Dec 27 2011 at 06:21

Офигеть, в шоке. Просто круто.

ZhuchoG Dec 27 2011 at 07:32

в хромиуме 15.0.874.106 (Сборка для разработчиков 107270 Linux) Ubuntu 11.10

TjRus Dec 27 2011 at 11:24

Оу, да, там юзается символ которого у вас в системе нету. Замечание учтено и поставлено в задачах на исправление ;)
Спасибо.

Softlink Dec 27 2011 at 08:12

Идея не нова. Еще на одном из Субботников Яндекса показывали тоже вариант верстки айфона с иконками.
Но за монстрячество плюс! У меня бы терпения не хватило напечатать >3k строк css ради развлекухи)

TjRus Dec 27 2011 at 11:26

Да, знаю что не нова, но все эти варианты как-то показались не реалистичными и не так похожыми на реальный iPhone. Да и иконки у этого не такие красочные и заморочливые.
Спасибо. У меня к завершению на последние иконки тоже терпения не хватало, но хорошо что добил таки)

Dimoniusis Dec 28 2011 at 00:16

Кстати, версия TjRusа без проблем работает в Opera 11.6, а вот этот вариант не работает. В Хроме отрисовывается нормально, но это же не так круто!

kolyuchii Dec 27 2011 at 09:05

Зачем?

TjRus Dec 27 2011 at 11:28

1. Вызов самому себе;
2. Это казалось очень хорошей демкой CSS3 возможностей (хоть и далеко не всех).

kolyuchii Dec 27 2011 at 12:21

Не пойми привратно, создать такое действительно очень круто, просто вызов самому себе нужен только тебе, а о таких возможностях CSS3 все и так знают. Я не против таких забав, но было бы круто увидеть что-то реально новое, полезное для применения на различных проектах.
К примеру чашка чая Вадима Макеева по сравнению с этим выглядит довольно скудно, но для своего времени это было нечто потрясающе. Сейчас подобного рода вещи, расцениваются мной как просто забава.
Безусловно, что кто-то обязательно увидит нечто полезное для себя в этом посте. Здесь и выше исключительно моё личное мнение.

TjRus Dec 27 2011 at 13:59

Понима, но у вас разве не бывало таких случаев в жизни, что глядя на чью-то работу вам хочется сделать что-то подобное, или вы понимаете что какая-нибудь идея что засела в голове таки стоит свеч и что ее не стоит откладывать. Я не думал стоит это сделать или нет. Мне просто хотелось это сделать.

kolyuchii Dec 27 2011 at 14:21

Конечно бывало. Повторюсь, в интернете идея рисования средствами CSS3 раскрыта полностью. Лично я не вижу ничего нового либо побуждающего к созданию нового. Это как рисование в пейнте или картины в эксле. Круто, но не более того.

Silentium Dec 27 2011 at 09:59

Вашу бы энергию, да в мирное русло =)

TjRus Dec 27 2011 at 11:29

Так iPhone довольно таки мирное существо;)

sergey_belkov Dec 27 2011 at 10:30

Фантастика!

de_arnst Dec 27 2011 at 10:37

А вы не из Челябинска случаем? О.о

TjRus Dec 27 2011 at 11:29

Нет, киевский я:)

de_arnst Dec 27 2011 at 11:30

Киевские, как я погляжу, тоже суровы :)

UFO landed and left these words here

TjRus Dec 27 2011 at 11:30

эм, если эпл скоро не пришлет повестку в суд, то нет (я надеюсь что нет) :)

Nerten Dec 27 2011 at 15:15

Патентуй реализацию :)

UFO landed and left these words here

TjRus Dec 27 2011 at 11:31

если и да, то уж точно не на CSS! хотя растровую графику на CSS рисовать не сложно, только не знаю пока как с этим браузер справится:)

etc Dec 27 2011 at 11:02

Офигенно. По исходникам буду изучать CSS3 на практике :) Всегда мечтал, чтобы красивые сайты были без картинок.

TjRus Dec 27 2011 at 11:32

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

mihmig Dec 27 2011 at 14:09

ага, только не впадайте в крайности — там где можно сделать картинку на 5кб — не надо городить скриптов (ведь памяти для css браузер будет жрать больше чем чем для хранения битмапа).

webmasters_by Dec 27 2011 at 11:27

Шикарно!
Мне бросали на него ссылку в твиттере пару дней назад, впечатлило.

TjRus Dec 27 2011 at 11:37

Спасибо!
Я его в инет выложил 19-го декабра в 1:13 ночи по киевскому. Он почему-то больше всего китайский контингент заинтересовал — 50% трафа до вчерашнего дня. Сегодня хабр исправляет сей процент:)

UFO landed and left these words here

Softlink Dec 27 2011 at 12:22

Скоро индусы подтянутся, гаранитрую!

karazyabko Dec 27 2011 at 11:41

Браво

zim32 Dec 27 2011 at 11:48

Интересно теперь посмотреть на это используя это habrahabr.ru/blogs/webdev/135336/ )

UFO landed and left these words here

morreti Dec 27 2011 at 12:07

Браво!

norfild Dec 27 2011 at 12:11

Не удержался добавил в избранное

morreti Dec 27 2011 at 12:14

Какой проект следующий? :)

TjRus Dec 27 2011 at 14:03

Пока это секрет:)

usgleb Jan 2 2012 at 21:40

Я думаю iPad будет следующим.

TjRus Jan 3 2012 at 02:34

увы нет, iPad будет несколькими месяцами позже, пока есть проектик покруче;)

usgleb Jan 3 2012 at 16:25

по круче чем iPad? Вы знаете, почему-то, кроме iPad 2 и адронного коллайдера, круче iPad ничего в голову не приходит.

lahmatiy Dec 27 2011 at 12:21

Пара идей по улучшениям.
Анимацию иконок при разблокировке можно сделать через 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/

lahmatiy Dec 27 2011 at 12:25

А вот тут конкретно с градиентом: www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/

nill Dec 27 2011 at 13:43

Автор — брутальный css3 маньяк и большой молодец ^_^
ps нужно попробовать сделать калькулятор или metro ui на html5.

dark_ruby Dec 27 2011 at 15:19

супер, только пменяйте «iPhone4 on pure CSS3!» на «iPhone4 in pure CSS3!», так правильнее

TjRus Dec 27 2011 at 16:54

Исправил. Спасибо!

Limosha Dec 27 2011 at 17:17

А хабраэффект на сайте состоялся? :)

TjRus Dec 27 2011 at 17:22

за сегодня уже «28 214 Посещения» и «27 361 Уникальные посетители»

Aga Dec 27 2011 at 19:31

ждите иск от Эпл :D

TjRus Dec 27 2011 at 19:33

Надеюсь до этого не дойдет :)

dimiork Dec 28 2011 at 00:39

С утра после прочтения поста не покидало чувство невыполненного долга, спать хочется — ужасно, но не смог заснуть не разместив ссылки на это:
вот: demo.tutorialzine.com/2011/10/ios-homescreen-coffeescript/
и вот: iphone.hohli.com/
для завершенности картины мастера =)
Круто!

silkleo Dec 29 2011 at 11:34

Это очень, очень здорово! Респект!

TjRus Dec 29 2011 at 15:44

Спасибо!)

alprk Dec 29 2011 at 21:24

У меня AppStore не открывается(

TjRus Dec 29 2011 at 21:33

было бы удивительно если бы он таки открылся:D
там пока нет функционала для работы приложений

alexbeep Dec 30 2011 at 21:01

Ждите иска за иконку youtube

TjRus Dec 30 2011 at 21:07

не думаю, что после самсунга эплу будет интересно меня тролить:)

alexbeep Dec 30 2011 at 21:33

habrahabr.ru/blogs/humour/135446/

TjRus Dec 30 2011 at 21:49

эм, я думаю иконка не так страшна как iPhone, они ведь его тоже запатентовали:D

javascript Dec 31 2011 at 21:23

Безумно круто!

TjRus Jan 21 2012 at 20:19

кому интересно вот статистика за месяц существования странички с iPhone 4 на CSS3 — http://tjrus.com/blog/iphone-4-in-css3-first-month-statistics

cryingjoker Jun 22 2012 at 12:56

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

у тебя в открытой менюшке, когда #iphone_slide2unlock принимает opacity: -1.19273 все еще работает и каждый span крутит opacity