Вращающийся земной шар

Из готовых вариантов оформления шара имеется:

  • 7 вариантов оформления сферы
  • 3 варианта ее тени
  • 9 вариантов мировой карты

Пример:

HTML:

CSS:

Размер шара задается свойством: transform: scale() в классе .globe-container

SVG спрайты:

Варианты:

Варианты сферы:
Варианты тени сферы:
Варианты мировой карты:
CSS сферы:

Оригинальный вариант

CSS тени сферы:

Оригинальный вариант

CSS мировой карты:

Оригинальный вариант

Кроме этого, можно использовать различные цвета и градиенты в CSS свойствах и SVG спрайтах

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Mohamed Yousef:

    Большое спасибо за отличную работу

    Ответить
  • Михаил:

    Здравствуйте!
    Установил файлы svg
    Поставил HTML код
    Прописал CSS

    Но отображается только один шар, без картинки и анимации!

    Что делаю не так???

    Ответить
  • Ирина:

    Круто, очень круто)

    Ответить
  • ça va:

    Автор, спасибо Вам огромное за этот проект, искала нечто подобное несколько дней, и уже не надеялась найти, как вдруг..)
    Может быть, подскажите, как поменять размер шара? Пока удалось поменять цвет, что уже невероятно радует.
    И еще вопрос: как сделать то же самое, но с другим изображением, и не в формате svg, как правильно пропорции картинок рассчитать?
    С Новым годом!)

    Ответить
    • Alexander:

      Размер можно задать точками в нужных пропорциях (исходя из рамера 200х200px), но проще сделать через transform: scale()
      Размер svg карты 1000х410px, а как рассчитать для другой, так сложно сказать, например, тут используется сразу 2 карты в 1 картинке, тыльная и передняя.

      Ответить
      • ça va:

        Александр, спасибо большое, попробую поэкспериментировать))

        Ответить
  • Инина:

    Добрый день! Никак не получается вставить шар на сайт, не очень сильна в программировании, может что делаю не так((( Вставляю на один из конструкторов сайтов, по HTML коду (имеет след. вид: <div>...</div>). Подскажите, в каком виде я должна вставить ваш HTML и CSS ?

    Ответить
    • Alexander:

      Констукторы - это зло!
      Попоробую помочь, напишите в ВК лучше (думаю тут одой фразо не полечить)

      Ответить
      • Инина:

        Написала на почту

        Ответить
  • Саша:

    Доброго времени суток. Сделал. Получилось. Но глобус установил выше хеадера. Хочу спросить- как настроить глобус таким образом чтобы он не сдвигал хеадер сайта а стоял рядом с ним.

    Ответить
    • Alexander:

      Добрый день.
      А можно ссылку? Я же не вижу кода, в котором мог бы что то поправить...

      Ответить
      • Саша:

        http://moyko-sasha.koledg-pdatu.km.ua/

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

        Ответить
        • Alexander:

          Как вариант заменить в классе .globe-container
          position: relative; на position: absolute;
          Если нужно как то иначе, напишите в ВК, там удобнее все обсудить

          Ответить
          • Саша:

            попробую. ок,если что напишу в ВК.

            Ответить