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

Продолжаем удивляться возможностями технологии CSS в третьей части статьи о «Невероятная CSS технология». Из того, что Вас ждет в статье: солнечная система написанная на CSS, анимация кита, таймер на чистом CSS, ну и как же обойти стороной возможности 3D преобразований, а именно, вращение куба. Это лишь несколько примеров, которые Вас ждут в статье. Не все браузеры поддерживают эту красоту, поэтому я сделал маленькие видео-примеры для каждого из пунктов, чтобы каждый увидел, если не в своём браузере, то хотя бы на видео.

Две прошлые части данной статьи находятся по ссылкам ниже:

Там Вы увидите очень классные вещи — не забудьте их также посмотреть 🙂 .

Читайте далее и Вы увидите что можно творить с помощью CSS.

1. Открывающаяся книга

Потрясающая книга на CSS, у которой открывается и закрывается первая страница. Очень круто выглядит. Но в браузере Firefox 33.0 она отображается немного корявенько, поэтому используйте для просмотра Chrome.

2. 3D куб

Невозможно пройти мимо 3D преобразований, ведь это стало доступно только в CSS3, и дает большой спектр возможностей для разработчиков. Ниже Вы можете увидеть пример вращения куба с помощью стрелок на клавиатуре.

3. Солнечная система

Очень популярная солнечная система, написанная на чистом CSS. Выглядит впечатляюще. Возможно, многие уже видели её, но всё же я решил рассказать о ней. Ниже Вы можете посмотреть видео-пример.

4. Кит в море

Классная анимация сделанная на чистом CSS, в которой птички держат кита в сетке над морем. При этом море также «движется» и не стоит на месте. Если птички не летят или волны статичны — тогда смотрите видео ниже:

К сожалению, в IE Вы увидите следующую картинку:

5. Плывущие облака

Очень красивые облака созданные с помощью CSS, которые постоянно плывут в случайном порядке. У меня в браузере Mozilla 33.0 они немного подтармаживают, поэтому лучше всего смотрите в браузере Chrome.

6. Марио

А помните то время, когда все играли в «Марио» и «Танки»? Не было компьютеров и практически у всех были 8-битные приставки. Покупали картриджи и могли оценить игру только по наклейке на картридже 😈 . А ведь это действительно было так.

Этот персонаж прям таки напомнил мне то время. Но сразу хочу сказать — смотрите эту анимацию в браузере Chrome. Там Вы увидите полноценную анимацию, так как она задумывалась. Если у Вас нет браузера Chrome, Вы можете посмотреть видео, которое я подготовил для Вас ниже

7. Google Doodle

Красивая и оригинальная анимация бегущей лошадки с наездником в разных цветовых вариантах. Анимация начинается медленно и затем ускоряется и мы уже видим красивое «видео».

8. Секундомер на CSS

Неожиданно, правда? Я сам был сильно удивлен когда его увидел и начал смотреть исходный код, в надежде найти признаки Javascript, но их там не оказалось 🙂 . Очень креативно сделано.