вебмастер, фидошник
0,0
рейтинг
29 мая 2010 в 13:24

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

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

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

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

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

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

[вид в IE]
Mithgol the Webmaster @Mithgol
карма
60,5
рейтинг 0,0
вебмастер, фидошник
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

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

  • НЛО прилетело и опубликовало эту надпись здесь
    • +28
      Microsoft работает над правильной поддержкой Солнечной системы, в IE9 всё выглядит так:

    • +11
      Зря смеетесь, над Галлилеем тоже вначале подшучивали… :D
    • +1
      Стив Балмер:
      — это фича, а не баг! ))
  • +32
    Мицгол, вы ведь можете когда хотите :) Умничка.
  • +95
    Все сходится:

    habrahabr.ru/blogs/humour/93791/
    • –10
      На опере нет блика, это тонкий юмор?
      • +4
      • +2
        Это заслуженый минус на хабре ёпта))))))))))))))))
        • +26
          Э, дружок, щас я тебе покажу заслуженный минус.
          Приготовились… барабанная дробь.

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

          [смотри, щас набегут]
          • –7
            Ты ему завидуешь чтоль?
            • –1
              юмор, чувак, улыбайся чаще
    • –11
      Не сходится. У меня в опере выглядит как и в IE. Квадратная и статичная солнечная система.
      • +5
        обновлять оперу не пробовали? У меня круглая, хоть и статичная.
        • +10
          у меня ваще компьютера нету
      • НЛО прилетело и опубликовало эту надпись здесь
      • +5
        Какого года «Опера»?
        • +2
          Последняя стабильная для Linux
          • –1
            не врите, у меня орбиты круглые на убунту, лучше скачайте последнюю все-таки
            • +1
              «Последняя стабильная» это 10.10. В 10.50 всё круглое, как полагается.
              • 0
                так надо уточнять версию, а не «та которая мне нравится», у каждого свои критерии стабильности
                • НЛО прилетело и опубликовало эту надпись здесь
                  • +1
                    да, я протупил, качая снепшоты я не заметил что сама опера рекомендует на сайте версию для линукса 10.10 :(
    • –2
      Doraemon рулит
  • +13
    Наивный, он всё ещё думает сто в Солнечной системе 9 планет.
    • +2
      Но он же написал:
      Oh, and yes… I kept Pluto ;-)
    • НЛО прилетело и опубликовало эту надпись здесь
    • +5
      Это совершенно не отменяет того, что именно вот там что-то крутится :)
      К тому же он рисует solar system, а не planetary system ;)
  • –18
    А чёй та пояс астероидов круглый у ИЕ? Я понимаю что автор стебется над Майкрософтом, но стеб уж больно натянутый. Неужели не всех еще это достало?
  • 0
    Занятно.
    Интересно, а почему не вращается в ФФ?
    • 0
      opera 10.53 тоже стоит.
      • +5
        а в 10.10 солнечная система еще не круглая
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    В Сафари тормозит жестко…
    • +1
      На ипаде не тормозит
      • +21
        Ok, виноват — ужасно тормозит!
        • 0
          У меня не тормозит :)
          • +7
            Тсс!
  • +8
    В IE просто не евклидово пространство, используется другая метрика. Ну и с орбит часть планет слетела, а так всё в порядке.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +2
        Это подход Майкрософт. Если МС сказали, что орбиты планет должны быть квадратными, а планеты — статичными, если сказали, что только это обеспечит нормальную работу системы(солнечной, на других платформах не заработает), сказали, что квадратных орбит хватит всем, то «так и надо». Несомненно, что сейчас тысячи людей скажут: «Ну удобнее чем та, круглая! Её ещё настраивать надо!», «Да, там вертится, зато здесь игры!», да и просто: «Круглая система — г--о для студентов задротов!»
        • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
          • +3
            Люди из ООО «Майкрософт Рус» нервно вздрогнули от вашего комментария.
          • +1
            Артемий Татьянович Лебедев может пойти нахуй со своими правилами — названия не переводятся, поэтому применять к ним надо правила транслитерации.
  • +3
    Opera 10.00, всё квадратное.
    • 0
      ADD: кроме пояса астероидов, конечно.
    • +1
      10.53 — все в порядке.
    • +5
      Потому, что round-border добавили в 10.5
    • +3
      Как это странно.
  • –11
    Ой я не могу! Эксплорер жжет!
  • +28
    Вот оно- наше будущее… Хром, конечно, старается вовсю… 70-80% загрузки двухъядерного p9500/2.5G для рисования простейшей анимации… Жесть.
    • +4
      что-то мне вдруг захотелось отключить обновление у Фаерфокса.
    • +26
      и еще эти люди запрещают адобе ковыряться в носу))
      • +1
        а ведь показательно, +26 за коммент и -2 в карму. психологию можно изучать)
    • 0
      в то время сафари всё рисует гладко и проц кушает совсем малость, но почему-то думал, что будет наоборот =)
      • +1
        Mac OS X 10.5.8, Safari: тормозит до умопомрачения.
        Ну, оно-то понятно почему: хардварную акселерацию для цсс3 и всего прочего только в снегопарде добавили…
        • 0
          Действительно, Chromium 48500 дергается, а в Safari все гладко.
          У меня Snow Leopard 10.6.3.
    • 0
      Chromium 6.0.420.0 (48550) Ubuntu
      Кушает один вирт проц на i5-430M, графика дергается, вцелом — жирненько.
    • +3
      Будущее здесь.

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

      Правда дергаться оно от этого меньше не начинает.
    • 0
      На моем четырехядернике кушает ровно одно ядро, но полностью. Изображение ощутимо тормозит. В принципе, для процесса разрешено использование любых ядер, но он возможностью не пользуется, интересно, почему?
      • 0
        Программировать на многоядерники видимо даже гугл не умеет!
    • 0
      Chrome 5.0.375.38 beta (Ubuntu 10.04) — 98% от Core2Duo 2.4 = ( (
  • +1
    не, это не солнечная система — Юпитер делает пол оборота за один земной год =)
    • +3
      Ну, залезьте в код, поиграйте в бога:)
  • 0
    В IE9 Preview все нормально, но статично…
  • –1
    у меня загрузка 7% на iMac 21,5 под Safari 4.0.5, при этом в фоне висят фотошоп, xCode, еще 5 вкладок сафари причем в одной флеш плеер играет музыку.

    не знаю что там у кого грузит )
    • +4
      у вас, должно быть, снегопард.
      а в нем у вэбкита хардварная акселерация всех этих хтмл5/цсс3 примочек
  • +1
    Для Микрософт до сих пор Солнце вращается вокруг земли :-)
  • НЛО прилетело и опубликовало эту надпись здесь
  • +27
    Квадратиш, практиш, гут!
  • +17
    На iPhone всё работает с анимацией и не тормозит:


    • 0
      а на герое притормаживает =\
      • 0
        Вообще тормозит/не тормозит — понятие относительное. Я бы не сказал, что на моём iPhone 3G всё идёт прям гладко, хотя и больших тормозов я тоже не наблюдаю. Жалко, что демонстрация не выдаёт количество кадров в секунду.
        • 0
          Я имел ввиду, что на герое хорошо заметны рывки. Интересно было бы сравнить с 2.1 или 2.2 на том же железе…
          • 0
            Аналогично, на зевсе с прошей от гикфона 2.1 тормаза заметны, хотя и слабо. При этом очистка озу (у меня в фоне было примерно 15 программ + 1 достаточно немаленькая игрушка) ощутимой разницы не дала. В целом я оказался приятно удивлен, тем что работа мобильного браузера(кстати, получается он на вебките? не урезанный ли хром получается?) совпала по скорости с настольным хромом.
            • +1
              Извините, тормаза -> тормоза. Что это со мной…
        • 0
          Я тестировал на 3gs с 4.0beta4. Анимация максимально гладкая (фпс там явно больше 30).
  • +10
    Не завидую я землянам, живущем в IE Солнечной системе. Всё-таки 4 раза в год адские огни из космоса уничтожающие километры поверхности Земли — это не очень приятно)
    • +2
      Зато столкновений нет — все строго квадратично! :)
    • +2
      А может леденящий холод? Диаметр нормальной орбиты равен стороне квадратной. Соответственно, на самом близком расстоянии к солнцу оно будет таким же, как и для нормальной орбиты. А вот в углах четырехугольника будет в 1.4 раза больше нормального.
      • 0
        Я про Главный пояс астероидов.
        • 0
          А я подумал про солнце.
          Но это даже хорошо в условиях похолодания :-)
    • +2
      Строго говоря, в IE-системе не будет года и вообще движения по орбитам, так как нет анимации.
      • 0
        И к Солнцу, естественно, повёрнуто будет западное полушарие^W параллелепипед.
  • +1
    Вот как видим микрософт нашу вселенную и всех нас!
  • 0
    Кажется, сайт с солнечной системой словил всем известный эффект. Или нет?
    • 0
      У меня работает)
  • –1
    Дополни, что в Opera вид системы такой же, как и в Firefox
    • +2
      Не совсем. На солнце нет блика.
  • +2
    Прекрасная иллюстрация IE :)
  • 0
    На Nexus One в родном браузере с Froyo картинка правильная, но статичная.
  • 0
    Представляю как щас автор страницы по ссылке недоумевает откуда сколько посетителей…
    • +3
      Я думаю что он умеет пользоваться например аналитиксом :)
  • 0
    а у меня во всех браузерах тормозит.
    Что-то мне не очень-то и нравится подобное использование HTML5, т.к. что бы браузеру отрисовать это на 28" мониторе (нужен для работы) — очень постараться нужно.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Гг, вселенная Майкрософт (-:
  • 0
    Красиво смотрится в Chrome.
    Но так хочется позанудствовать...
    Здесь не только масштаб не сохранен (что еще можно простить). Почему Венера вращается в ту же сторону, что и остальные планеты? И почему Плутон, который уже давно не является планетой, тоже включен сюда? Уже либо отображать только 8 планет, либо включать все 4 планетоида.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        еще и не в одной плоскости
        • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Уважаю. Плутон — планета! И вобще всё что гидростатично и крутится вокруг солнца есть планета

    блин пол года рид-онли не получлось
    • 0
      Полгода чтения — это на другом бложике, и то там это давно уже не соблюдают.
  • 0
    тормозит дичайше в хроме на кор2дуо >
  • +1
    В полку извращений прибыло
  • 0
    linux, chrome 5.0.375.38 beta. тормозит невероятно (при том, что эмулятор денди на js работает почти на полной скоростои). закапывайте.
  • 0
    windows 7x64, chrome последний, 3 fps
  • +2
    когда-то раньше то же самое можно делали на процессоре ~30мгц, а сейчас тормозит на 2000мгц…
    вебкит не тормозит, вебкит не тормозит, вебкит не тормозит… :)
  • –1
    Мда, дожили…

    Вот думаю, не перейти ли назад на Оперу 9.27, в ней прокрутка быстрее работает чем ов всех своременных браузерах, которые торомзят все сильнее и сильнее. Разве что Хром не тормозит с первого взгляда, но прокрутка там дерганая и память он жрет как 3 Оперы сразу.
  • +2
    Да, html5 все больше напоминает демосцену: делать максимум наименее приспособленными для этого средствами.
  • 0
    Интересно, но на Firefox 4 мало того ничего не вращается, так еще и планеты обрезанные наполовину.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.