Невероятная CSS технология — Часть 4

Чем еще может удивить технология CSS, скажете Вы. Но она действительно может удивить, уж поверьте! Я уже не говорю о технологии CSS в связке с технологией jQuery к примеру. Но то, что Вы увидите, будет лишь слегка затрагивать jQuery, а основное внимание приложено к CSS. Периодическая с система, шахматный вакуум, 3D реалистичные облака — это те немногие вещи, которые Вы увидите в статье.

Три части данной статьи опубликованные мною раньше здесь:

• Невероятная CSS технология — Часть 1
• Невероятная CSS технология — Часть 2
• Невероятная CSS технология — Часть 3

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

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

1. 3D облака

А приятный просмотр чудес написанных на CSS начнем с 3D облака, которые можно вращать удерживая курсор мыши. При просмотре они просто завораживают. Правда облака можно увидеть не такими «белыми и пушистыми», а есть возможность выбрать грозовые, но также доступен еще один вариант (его лучше увидеть своими глазами 🙂 ). Также не забываю про тех, кто не может посмотреть анимацию в браузере Chrome — ниже для Вас видео.

2. Периодическая система

Так приятно изучать элементы периодической системы не было еще никогда. Каждый элемент можно увеличить, но, что самое приятное, это то, что она вращается невероятно красиво. У таблицы есть несколько вариантов отображения: в виде таблицы, сферы, бочки (это я так назвал 😆 ) и 3D сетки. Даже на видео невозможно передать этот классный эффект.

3. Шахматный вакуум

Если долго смотреть на это дело, то кажется будто под гипнозом, кажется, будто гипноз какой-то. Но не волнуйтесь, это всего лишь такой эффект и целью сделать из Вас зомби у авторов этого эффекта не было.

4. Курсорный монстр

Курсорный монстр или "Пожиратель курсоров", даже не знаю как страшнее звучит 🙂 . Очень симпатичный монстр, который просыпается при движении курсора мыши, а затем следит за ним, пытаясь "скушать" . Можно поиграться с ним — действительно расслабляет.

5. Космос

Очень круто сделан следующий эффект — гипнотизирующий космос. Смотришь на него и расслабляешься. Смотрите в браузере Chrome, чтобы видеть поменьше "тормозов" и "заскоков" анимации.

6. Панель OS X

Наверняка Вы видели такую панель с программами и для Windows. Вы можете создать такую панель с нужными Вам иконками на собственном сайте, но сразу хочу сказать что также плавно, как на видео ниже, она будет работать только в браузере Chrome. В Firefox значки просто "дергаются".

7. 3 кольца

Показательный пример использования 3D преобразований. Но, хочу заметить, что здесь используется простая JS функция, которая задает в какой момент какой блок необходимо показать. Хотя основано вся эта конструкция на CSS преобразованиях.

8. 3D сфера

Еще одна сфера (не такая как в периодической системе), но со своими особенностями. Имеет ряд настроек, которые можно переключать в меню справа. Лучше всего двигать сферой не удерживая курсор мыши, а используя стрелки на клавиатуре.

9. Эквалайзеры

Когда я нашел этот сайт — я был очень сильно удивлен! Во-первых у меня был вопрос "Как они это сделали?!". Этот пример просто обязателен к просмотру, если в Вашем браузере Вы не можете увидеть всю прелесть этих эквалайзеров, тогда смотрите видео. Но в любом случае Вы должны это увидеть!

Вывод

Сколько же всего может этот CSS если добавить всего лишь "капельку" JS, просто поразительно! Я надеюсь Вас это вдохновило и Вы либо уже изучаете CSS, либо хотите узнать полностью все возможности этой технологии. Тогда рекомендую начать с основ CSS.

Успехов!

С Уважением, Юрий Немец