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

На 4-й части статьи «Невероятная CSS технология» удивительные возможности CSS не заканчиваются. Я немного поискал по интернету и нашел очень классные вещи, написанные на чистом CSS. Правда, когда я создал смурфика на CSS — это уже не так потрясающе выглядит, потому что сейчас я понимаю как это устроено изнутри. Но то что я нашел впечатлило меня не меньше, чем примеры из 1-й части.

Прошлые части статьи доступны по ссылкам ниже:

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

Ну и конечно же мой смурфик на чистом CSS:

• Как создать смурфа на чистом CSS

Как и в прошлых уроках, я рекомендую все примеры смотреть в браузере Chrome.

1. Я люблю CSS

Анимация «I Love CSS», которая создана на чистом CSS. Чтобы создать именно анимацию CSS, а не просто красиво расположить блоки, необходимо использовать "keyframes".

2. Songoku

Songoku главный герой вселенной Жемчуг дракона, созданной Акирой Ториямой. Мальчик с обезьяньим хвостом, но на этой картинке хвоста не видно. Очень хорошо видно как используются переменные в CSS. Когда увидите изображение — кажется что здесь очень много блоков, из которых он состоит, но самом деле их всего 5!

3. Покемон Pikachu

В детстве этот мультфильм показывали очень часто. Но я давно о нём уже не слышал. И тут попадается такой интересный вариант реализации Pikachu на CSS. Он даже анимированный, прям как в мультфильме.

4. Летающая птичка

Смешная летающая птичка с глазами, которые постоянно меняют направление взгляда. Здесь использовался SVG, для ее реализации. Действительно классно выглядит!

5. Овечка

Анимированная овечка на CSS в стиле Flat. Также для анимации используются ключевые кадры (keyframes). Блоков, из которых состоит овечка достаточно много. Интересно смотрится.

6. Страница 404 на CSS

Я думаю Вы видели достаточно много страниц 404 (страница ошибки). Ведь каждый 3-й блоггер об этом пишет. Но если Вы разместите эту анимацию на данной странице, то она действительно станет уникальной и будет выделяться среди остальных. Думаю у некоторых появился такой вопрос "А зачем делать всё прямо идеально на своём сайте, ведь всё равно всего не реализуешь что хочешь?". Так вот я думаю что к этому нужно стремиться и делать всё возможное, чтобы свой сайт стал уникальным и единственным в своём роде.

Что-то я отошел от темы — смотрите анимацию программиста, сидящего на стуле:

7. 8-битный астронавт

Что меня порадовало в этой работе, так это то, что здесь используется всего один блок <div>. Анимации здесь нет, но реализация очень интересная. Скоро Вы, как и я, насмотритесь всех этих примеров и сами захотите что-нибудь сделать. Тогда рекомендую посмотреть урок как я создал смурфика на CSS.

8. Бегущий человечек

Бегущий человечек, созданный на чистом CSS. Состоит всего лишь двух блоков <div> и 30 строк CSS кода!

9. Стьюи Гриффин

Последний персонаж, которого я хочу чтобы Вы увидели — это Стьюи Гриффин. Если Вы не знаете кто это и видите его в первый раз — персонаж мультсериала "Гриффины". Но это еще не все — при наведении курсора мыши он начинает злиться.

Вывод

Сегодня Вы увидели что можно сделать анимацию на CSS на чистом CSS без единой строчки Javascript! Кроме этого Вы еще раз убедились что с помощью CSS и преобразований можно делать красивых персонажей.

Если что-то пропустили и чтобы не искать, вот все 9 пунктов:

1. Анимация "I Love CSS"
2. Songoku
3. Покемон Pikachu
4. Летающая птичка
5. Овечка
6. Оригинальная страница 404
7. 8-битный астронавт
8. Бегущий человечек
9. Стьюи Гриффин

Думаю Вам понравилась и эта часть статьи. Нажмите на одну из кнопок социальных сетей ниже и расскажите друзьям о невероятных возможностях CSS!

Успехов!

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