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

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

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

Пример:

HTML:

CSS:

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

SVG спрайты:

Варианты:

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

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

CSS тени сферы:

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

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

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

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

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

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

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

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

  • Инина:

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

    Ответить
    • Alexander:

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

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

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

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

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

    Ответить
    • Alexander:

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

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

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

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

        Ответить
        • Alexander:

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

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

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

            Ответить