IPhone4 на CSS3

tjrus · 19.12.2011

недавно в голову стукнула идея, и буквально за вечера последних двух недель сделал интересную крутую штуку - хотел поделиться и послушать мнения)
представляю вашему вниманию сверстанный iPhone4 без картинок! - http://tjrus.com/iphone
все в этом айфоне сделано на CSS3 + HTML + jQuery

работает лучше всего на макоси в вебкитовских браузерах, впринципе свойства прописаны для новейших хрома, сафари, оперы и мозилы, но последние две от рендера всего кода дохнут немного)
так-же делаю версию для iPad, но еще не до конца все готово)

жду критики) спасибо

BaNru · 19.12.2011

Где-то я это несколько раз видел.

czp · 19.12.2011

зашел, посмотрел, возник вопрос : а зачем это?смысл?

Radori1221 · 19.12.2011

да если и нет смыла, то что? человек старался делал...

tjrus · 19.12.2011

BaNru сказал(а):
Где-то я это несколько раз видел.

видели?) где?, покажите мне линк на iPhone4 полностью без картинок на CSS3 да еще и с иконками!) буду очень признателен если кинете линк

czp сказал(а):
зашел, посмотрел, возник вопрос : а зачем это?смысл?

смысл - вызов самому себе типа "а смогу ли?"... оказалось - смог)
так-же смысл был показать мнодеству что возможности CSS3 очень велики,
так-же смысл был доказать что Front-end это тоже искуство (доказал вчера на небольшом сьезде дизайнеров))

Radori1221 сказал(а):
да если и нет смыла, то что? человек старался делал...

пасиб за поддержку) и смысл кстати есть) (чуть выше)

BaNru · 19.12.2011

tjrus сказал(а):
видели?) где?

Реализацию айфона видел.

tjrus сказал(а):
работает лучше всего на макоси в вебкитовских браузерах

Ну с картинками, но конечному юзеру всё равно до этого. Да и макось ставить как то в лом, ибо нех*й.

tjrus сказал(а):
так-же смысл был показать мнодеству что возможности CSS3 очень велики, так-же смысл был доказать что Front-end это тоже искуство (доказал вчера на небольшом сьезде дизайнеров))

Молодец, садись, 5! Пирожок на полочке.

Было бы лучше если бы ты описал всё. А так - оно кроме тебя ни кому и не надо будет ни когда.

ALEXu · 19.12.2011

А это для чего?

Код:

<div class="iphone_dynamic"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

Вот это тоже интересно

Код:

<div class="clouds2"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></div>

minority · 19.12.2011

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

medwoodu · 19.12.2011

Конечно прикольно, но, если честно так же, как и написавшие выше, не вижу в этом смысла.
http://www.sencha.com/products/touch/ вот то, с чего я фанатею

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

tjrus · 19.12.2011

BaNru сказал(а):
Реализацию айфона видел.

да, этот айфон с картинками тоже я делал и тоже когда-то постил) весь пликол был сделать его без картинок вовсе.

BaNru сказал(а):
Ну с картинками, но конечному юзеру всё равно до этого. Да и макось ставить как то в лом, ибо нех*й.

это делалось не для конечного юзера, и далеко не для всех юзеров.

BaNru сказал(а):
Молодец, садись, 5! Пирожок на полочке.

Было бы лучше если бы ты описал всё. А так - оно кроме тебя ни кому и не надо будет ни когда.

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

спасибо за критику)

ALEXu сказал(а):

А это для чего?

Код:

<div class="iphone_dynamic"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

Вот это тоже интересно

Код:

<div class="clouds2"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></div>

<SPAN> - точки динамика (бекграундом единым не заморачивался, может в дальнейшем сделаю )
и <B> - тучки) рисованные точками и позиционируемые

minority сказал(а):
Красиво, интересно сделанно. Есть что показать работодателю и попросить зарплату побольше за нывыки которыми владеешь.

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

Medwoodu сказал(а):
Конечно прикольно, но, если честно так же, как и написавшие выше, не вижу в этом смысла.
http://www.sencha.com/products/touch/ вот то, с чего я фанатею
Вашу бы энергию, да на освоение

ну, это совсем разные вещи) сенчу я знаю и сам исвользую, а в этом афоне сама задача была поставлена мною для себя именно сделать сам iphone и именно на css3

BaNru · 19.12.2011

tjrus сказал(а):
да, этот айфон с картинками тоже я делал и тоже когда-то постил) весь пликол был сделать его без картинок вовсе.

Ну я видел не только твою, но и еще где-то. Хотя и твою вроде припоминаю.
Сорри.

tjrus сказал(а):
описание готовлю

ALEXu · 20.12.2011

Только сейчас вчитался, что без картинок) Так-то шикарная поделка.

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

tjrus · 20.12.2011

ALEXu сказал(а):
Только сейчас вчитался, что без картинок) Так-то шикарная поделка.

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

спасибо)
ну на самом деле иконки стоит все-таки добавить спрайтом, ибо оно очень из-за них тормозит) а вот айфон - он на css3 круче выглядим чем картинкой - без размытостей и масштабируемый)

BaNru · 20.12.2011

tjrus сказал(а):
ну на самом деле иконки стоит все-таки добавить спрайтом

Так уж сложилось, что я очень давно занимаюсь векторной графикой. И я очень рад что в веб наконец-то добавили её.
И в связи с этим я "продвигаю" (как громко сказано) её...ну точнее рекомендую.
Может стоит подумать об SVG?
А раз в браузере есть поддержка CSS3 на том уровне, что использован в проекте, то и SVG тоже обязан поддерживаться.

tjrus · 20.12.2011

BaNru сказал(а):
tjrus сказал(а):

ну на самом деле иконки стоит все-таки добавить спрайтом

Нажмите, чтобы раскрыть...

Так уж сложилось, что я очень давно занимаюсь векторной графикой. И я очень рад что в веб наконец-то добавили её.
И в связи с этим я "продвигаю" (как громко сказано) её...ну точнее рекомендую.
Может стоит подумать об SVG?
А раз в браузере есть поддержка CSS3 на том уровне, что использован в проекте, то и SVG тоже обязан поддерживаться.

да, согласшусь - SVG хорошия вариант и я его разсматриваю в данный момент)

vla · 24.12.2011

[member=tjrus], ОФИГЕННО! Ты, прям в примерах, разрекламировал CSS3!

tjrus · 25.12.2011

vla сказал(а):
[member=tjrus], ОФИГЕННО! Ты, прям в примерах, разрекламировал CSS3!

спасибо

да, у css3 много приятных возможностей)

vla · 27.12.2011

[member=tjrus], нет желания нарисовать с помощью CSS3 изображение другого направления?
Думаю будет интересно "без картинок" воспроизвести произведение искусства...

Наврядли у тебя выйдет нарисовать "Портрет госпожи Мона Лизы"...
А если взять абстракционизм, авангартизм итд, то можно подобрать задачу по зубам CSS3!

Напр., мне очень нравится картина Казимира Малевича "Супрематизм", состоящая из геометрических фигур...

PS: Просто пришла такая идея

tjrus · 27.12.2011

vla сказал(а):
[member=tjrus], нет желания нарисовать с помощью CSS3 изображение другого направления?
Думаю будет интересно "без картинок" воспроизвести произведение искусства...

Наврядли у тебя выйдет нарисовать "Портрет госпожи Мона Лизы"...
А если взять абстракционизм, авангартизм итд, то можно подобрать задачу по зубам CSS3!

Напр., мне очень нравится картина Казимира Малевича "Супрематизм", состоящая из геометрических фигур...

PS: Просто пришла такая идея

на самом деле я знаю как нарисовать абсолютно любую растровую картинку на CSS3 без использования изображений, Base64, canvas или SVG.
конечно черный квадрат самая простая картина для рисования на CSS3, но Монна лиза тоже реализуемая вещь и совсем даже не сложная.

описание iPhone 4 на CSS3 уже на хабре - http://habrahabr.ru/blogs/webdev/135349/

IPhone4 на CSS3

Well-Known Member

Пацифизжу

czp

Новичок

Well-Known Member

Пацифизжу

в сером

generator randomly php

Злобный модер

Well-Known Member

Пацифизжу

в сером

Well-Known Member

Пацифизжу

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей