Каскадные Таблицы Стилей

индекс

323,31

Солнечная система, нарисованная (не в масштабе) при помощи CSS3

Alex Girón сочинил демонстрацию и к ней поясняющую блогозапись (с элементами исходного кода), посвящённые начертанию движущейся Солнечной системы при помощи border-radius, CSS-анимации и аффинных CSS-преобразований (а именно, анимированных поворотов от 0° до 360°).

В Firefox эта демонстрация выглядит как неподвижная иллюстрация:

[Солнечная система]

В вебкитных браузерах (Chrome, Safari) планеты к тому же вращаются на своих орбитах.

В Эксплорере вся система приобретает необычайный вид:

[вид в IE]

+164

29 мая 2010, 13:24

Mithgol

комментарии (113)

НЛО прилетело и опубликовало эту надпись здесь

+28

WizardBox 29 мая 2010, 14:17 # ↑

Microsoft работает над правильной поддержкой Солнечной системы, в IE9 всё выглядит так:

+11

0lympian 29 мая 2010, 15:10 # ↑

Зря смеетесь, над Галлилеем тоже вначале подшучивали… :D

RDV 30 мая 2010, 02:03 # ↑

Стив Балмер:
— это фича, а не баг! ))

+32

naum 29 мая 2010, 13:28 #

Мицгол, вы ведь можете когда хотите :) Умничка.

+95

PDEMON 29 мая 2010, 13:29 #

Все сходится:

habrahabr.ru/blogs/humour/93791/

–10

Darkened 29 мая 2010, 15:11 # ↑

На опере нет блика, это тонкий юмор?

Argentum47 29 мая 2010, 15:35 # ↑

Нет.

SvnWeb 29 мая 2010, 21:31 # ↑

Это заслуженый минус на хабре ёпта))))))))))))))))

+26

Darkened 29 мая 2010, 21:35 # ↑

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

«Стив Джобс — долбится в зад!»

[смотри, щас набегут]

–7

SvnWeb 29 мая 2010, 22:34 # ↑

Ты ему завидуешь чтоль?

–1

taliban 30 мая 2010, 20:21 # ↑

юмор, чувак, улыбайся чаще

–11

Klimka 29 мая 2010, 15:55 # ↑

Не сходится. У меня в опере выглядит как и в IE. Квадратная и статичная солнечная система.

corristo 29 мая 2010, 17:20 # ↑

обновлять оперу не пробовали? У меня круглая, хоть и статичная.

+10

SvnWeb 29 мая 2010, 21:33 # ↑

у меня ваще компьютера нету

НЛО прилетело и опубликовало эту надпись здесь

bolk 29 мая 2010, 17:44 # ↑

Какого года «Опера»?

Tishka17 30 мая 2010, 15:04 # ↑

Последняя стабильная для Linux

–1

taliban 30 мая 2010, 20:24 # ↑

не врите, у меня орбиты круглые на убунту, лучше скачайте последнюю все-таки

Tishka17 31 мая 2010, 06:53 # ↑

«Последняя стабильная» это 10.10. В 10.50 всё круглое, как полагается.

taliban 31 мая 2010, 10:38 # ↑

так надо уточнять версию, а не «та которая мне нравится», у каждого свои критерии стабильности

НЛО прилетело и опубликовало эту надпись здесь

taliban 1 июня 2010, 00:43 # ↑

да, я протупил, качая снепшоты я не заметил что сама опера рекомендует на сайте версию для линукса 10.10 :(

–2

Fade 29 мая 2010, 22:02 # ↑

Doraemon рулит

+13

Aquahawk 29 мая 2010, 13:32 #

Наивный, он всё ещё думает сто в Солнечной системе 9 планет.

Argentum47 29 мая 2010, 13:56 # ↑

Но он же написал:

Oh, and yes… I kept Pluto ;-)

НЛО прилетело и опубликовало эту надпись здесь

sylvio 29 мая 2010, 14:12 # ↑

Это совершенно не отменяет того, что именно вот там что-то крутится :)
К тому же он рисует solar system, а не planetary system ;)

–18

padla2k 29 мая 2010, 13:35 #

А чёй та пояс астероидов круглый у ИЕ? Я понимаю что автор стебется над Майкрософтом, но стеб уж больно натянутый. Неужели не всех еще это достало?

variable 29 мая 2010, 13:39 # ↑

neography.com/experiment/circles/solarsystem/asteroids_meteorids.png

PDEMON 29 мая 2010, 13:42 # ↑

это же png картинка. neography.com/experiment/circles/solarsystem/asteroids_meteorids.png
Все остальное я так понял сделано на коде.

bondbig 29 мая 2010, 13:36 #

Занятно.
Интересно, а почему не вращается в ФФ?

PDEMON 29 мая 2010, 13:47 # ↑

opera 10.53 тоже стоит.

stasikos 29 мая 2010, 15:26 # ↑

а в 10.10 солнечная система еще не круглая

НЛО прилетело и опубликовало эту надпись здесь

remal 29 мая 2010, 13:43 #

В Сафари тормозит жестко…

Goodkat 29 мая 2010, 14:09 # ↑

На ипаде не тормозит

+21

Goodkat 29 мая 2010, 15:32 # ↑

Ok, виноват — ужасно тормозит!

Vizzy 29 мая 2010, 21:16 # ↑

У меня не тормозит :)

Goodkat 30 мая 2010, 01:14 # ↑

Тсс!

Shens 29 мая 2010, 13:53 #

В IE просто не евклидово пространство, используется другая метрика. Ну и с орбит часть планет слетела, а так всё в порядке.

НЛО прилетело и опубликовало эту надпись здесь

9ikopb 30 мая 2010, 11:14 # ↑

Это подход Майкрософт. Если МС сказали, что орбиты планет должны быть квадратными, а планеты — статичными, если сказали, что только это обеспечит нормальную работу системы(солнечной, на других платформах не заработает), сказали, что квадратных орбит хватит всем, то «так и надо». Несомненно, что сейчас тысячи людей скажут: «Ну удобнее чем та, круглая! Её ещё настраивать надо!», «Да, там вертится, зато здесь игры!», да и просто: «Круглая система — г--о для студентов задротов!»

НЛО прилетело и опубликовало эту надпись здесь

xn__p2a 31 мая 2010, 02:28 # ↑

Люди из ООО «Майкрософт Рус» нервно вздрогнули от вашего комментария.

9ikopb 1 июня 2010, 12:32 # ↑

Артемий Татьянович Лебедев может пойти нахуй со своими правилами — названия не переводятся, поэтому применять к ним надо правила транслитерации.

Alex_MIPT 29 мая 2010, 13:54 #

Opera 10.00, всё квадратное.

Alex_MIPT 29 мая 2010, 13:55 # ↑

ADD: кроме пояса астероидов, конечно.

nsinreal 29 мая 2010, 14:07 # ↑

10.53 — все в порядке.

nobr 29 мая 2010, 14:15 # ↑

Потому, что round-border добавили в 10.5

homm 29 мая 2010, 18:28 # ↑

Как это странно.

–11

vick 29 мая 2010, 13:56 #

Ой я не могу! Эксплорер жжет!

+28

alexleo 29 мая 2010, 13:57 #

Вот оно- наше будущее… Хром, конечно, старается вовсю… 70-80% загрузки двухъядерного p9500/2.5G для рисования простейшей анимации… Жесть.

yul 29 мая 2010, 14:15 # ↑

что-то мне вдруг захотелось отключить обновление у Фаерфокса.

+26

Meroving 29 мая 2010, 14:21 # ↑

и еще эти люди запрещают адобе ковыряться в носу))

Meroving 30 мая 2010, 22:12 # ↑

а ведь показательно, +26 за коммент и -2 в карму. психологию можно изучать)

gooddy 29 мая 2010, 14:25 # ↑

в то время сафари всё рисует гладко и проц кушает совсем малость, но почему-то думал, что будет наоборот =)

Terion 29 мая 2010, 15:15 # ↑

Mac OS X 10.5.8, Safari: тормозит до умопомрачения.
Ну, оно-то понятно почему: хардварную акселерацию для цсс3 и всего прочего только в снегопарде добавили…

SpeakerRed 29 мая 2010, 16:05 # ↑

Действительно, Chromium 48500 дергается, а в Safari все гладко.
У меня Snow Leopard 10.6.3.

Masterkey 29 мая 2010, 14:47 # ↑

Chromium 6.0.420.0 (48550) Ubuntu
Кушает один вирт проц на i5-430M, графика дергается, вцелом — жирненько.

bobermaniac 29 мая 2010, 15:02 # ↑

Будущее здесь.

dl.dropbox.com/u/586279/futureishere.png

Правда дергаться оно от этого меньше не начинает.

Ikarr 29 мая 2010, 15:06 # ↑

На моем четырехядернике кушает ровно одно ядро, но полностью. Изображение ощутимо тормозит. В принципе, для процесса разрешено использование любых ядер, но он возможностью не пользуется, интересно, почему?

Imposeren 29 мая 2010, 19:37 # ↑

Программировать на многоядерники видимо даже гугл не умеет!

Romeo_spb 30 мая 2010, 11:42 # ↑

Chrome 5.0.375.38 beta (Ubuntu 10.04) — 98% от Core2Duo 2.4 = ( (

signum 29 мая 2010, 14:09 #

не, это не солнечная система — Юпитер делает пол оборота за один земной год =)

9ikopb 30 мая 2010, 11:16 # ↑

Ну, залезьте в код, поиграйте в бога:)

ihor_khodakovskyy 29 мая 2010, 14:09 #

В IE9 Preview все нормально, но статично…

–1

unholy 29 мая 2010, 14:09 #

у меня загрузка 7% на iMac 21,5 под Safari 4.0.5, при этом в фоне висят фотошоп, xCode, еще 5 вкладок сафари причем в одной флеш плеер играет музыку.

не знаю что там у кого грузит )

Terion 29 мая 2010, 15:21 # ↑

у вас, должно быть, снегопард.
а в нем у вэбкита хардварная акселерация всех этих хтмл5/цсс3 примочек

FeraS 29 мая 2010, 14:10 #

Для Микрософт до сих пор Солнце вращается вокруг земли :-)

НЛО прилетело и опубликовало эту надпись здесь

+27

pens 29 мая 2010, 14:12 #

Квадратиш, практиш, гут!

+17

enl 29 мая 2010, 14:20 #

На iPhone всё работает с анимацией и не тормозит:

turich 29 мая 2010, 16:25 # ↑

а на герое притормаживает =\

OmKol 29 мая 2010, 17:42 # ↑

Вообще тормозит/не тормозит — понятие относительное. Я бы не сказал, что на моём iPhone 3G всё идёт прям гладко, хотя и больших тормозов я тоже не наблюдаю. Жалко, что демонстрация не выдаёт количество кадров в секунду.

turich 29 мая 2010, 17:44 # ↑

Я имел ввиду, что на герое хорошо заметны рывки. Интересно было бы сравнить с 2.1 или 2.2 на том же железе…

NeonXP 31 мая 2010, 00:32 # ↑

Аналогично, на зевсе с прошей от гикфона 2.1 тормаза заметны, хотя и слабо. При этом очистка озу (у меня в фоне было примерно 15 программ + 1 достаточно немаленькая игрушка) ощутимой разницы не дала. В целом я оказался приятно удивлен, тем что работа мобильного браузера(кстати, получается он на вебките? не урезанный ли хром получается?) совпала по скорости с настольным хромом.

NeonXP 31 мая 2010, 00:33 # ↑

Извините, тормаза -> тормоза. Что это со мной…

enl 29 мая 2010, 22:06 # ↑

Я тестировал на 3gs с 4.0beta4. Анимация максимально гладкая (фпс там явно больше 30).

+10

microKot 29 мая 2010, 14:24 #

Не завидую я землянам, живущем в IE Солнечной системе. Всё-таки 4 раза в год адские огни из космоса уничтожающие километры поверхности Земли — это не очень приятно)

0lympian 29 мая 2010, 15:14 # ↑

Зато столкновений нет — все строго квадратично! :)

barmaley_exe 29 мая 2010, 15:20 # ↑

А может леденящий холод? Диаметр нормальной орбиты равен стороне квадратной. Соответственно, на самом близком расстоянии к солнцу оно будет таким же, как и для нормальной орбиты. А вот в углах четырехугольника будет в 1.4 раза больше нормального.

microKot 29 мая 2010, 16:21 # ↑

Я про Главный пояс астероидов.

barmaley_exe 29 мая 2010, 16:29 # ↑

А я подумал про солнце.
Но это даже хорошо в условиях похолодания :-)

Mithgol 30 мая 2010, 08:00 # ↑

Строго говоря, в IE-системе не будет года и вообще движения по орбитам, так как нет анимации.

9ikopb 30 мая 2010, 11:20 # ↑

И к Солнцу, естественно, повёрнуто будет западное полушарие^W параллелепипед.

DedalX 29 мая 2010, 14:32 #

Вот как видим микрософт нашу вселенную и всех нас!

Die_Gelassenheit 29 мая 2010, 14:34 #

Кажется, сайт с солнечной системой словил всем известный эффект. Или нет?

DedalX 29 мая 2010, 14:42 # ↑

У меня работает)

–1

alexwolf 29 мая 2010, 15:38 #

Дополни, что в Opera вид системы такой же, как и в Firefox

barmaley_exe 29 мая 2010, 16:28 # ↑

Не совсем. На солнце нет блика.

Roler 29 мая 2010, 16:15 #

Прекрасная иллюстрация IE :)

slimper 29 мая 2010, 16:20 #

На Nexus One в родном браузере с Froyo картинка правильная, но статичная.

FinikWasHere 29 мая 2010, 16:42 #

Представляю как щас автор страницы по ссылке недоумевает откуда сколько посетителей…

HoochieMen 29 мая 2010, 16:48 # ↑

Я думаю что он умеет пользоваться например аналитиксом :)

Angelina_Joulie 29 мая 2010, 17:09 #

а у меня во всех браузерах тормозит.
Что-то мне не очень-то и нравится подобное использование HTML5, т.к. что бы браузеру отрисовать это на 28" мониторе (нужен для работы) — очень постараться нужно.

НЛО прилетело и опубликовало эту надпись здесь

Sauron 29 мая 2010, 17:53 #

Гг, вселенная Майкрософт (-:

S_talker 29 мая 2010, 18:05 #

Красиво смотрится в Chrome.
~~Но так хочется позанудствовать...~~
Здесь не только масштаб не сохранен (что еще можно простить). Почему Венера вращается в ту же сторону, что и остальные планеты? И почему Плутон, который уже давно не является планетой, тоже включен сюда? Уже либо отображать только 8 планет, либо включать все 4 планетоида.

НЛО прилетело и опубликовало эту надпись здесь

Vitvitsky 29 мая 2010, 18:54 # ↑

еще и не в одной плоскости

НЛО прилетело и опубликовало эту надпись здесь

neochapay 29 мая 2010, 19:52 #

Уважаю. Плутон — планета! И вобще всё что гидростатично и крутится вокруг солнца есть планета

блин пол года рид-онли не получлось

Vizzy 29 мая 2010, 21:19 # ↑

Полгода чтения — это на другом бложике, и то там это давно уже не соблюдают.

sergeant 29 мая 2010, 21:15 #

тормозит дичайше в хроме на кор2дуо >

Incole 29 мая 2010, 21:45 #

В полку извращений прибыло

Restorer 29 мая 2010, 22:42 #

linux, chrome 5.0.375.38 beta. тормозит невероятно (при том, что эмулятор денди на js работает почти на полной скоростои). закапывайте.

LexL 30 мая 2010, 03:03 #

windows 7x64, chrome последний, 3 fps

z123 30 мая 2010, 11:48 #

когда-то раньше то же самое можно делали на процессоре ~30мгц, а сейчас тормозит на 2000мгц…
вебкит не тормозит, вебкит не тормозит, вебкит не тормозит… :)

–1

egorinsk 30 мая 2010, 14:02 #

Мда, дожили…

Вот думаю, не перейти ли назад на Оперу 9.27, в ней прокрутка быстрее работает чем ов всех своременных браузерах, которые торомзят все сильнее и сильнее. Разве что Хром не тормозит с первого взгляда, но прокрутка там дерганая и память он жрет как 3 Оперы сразу.