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

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

Прошлая статья находится здесь:

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

Если Вы ее еще не читали — обязательно посмотрите какие примеры там приведены.

То, что Вы видели в прошлой статье и увидите в этой действительно поражает, но я хочу обратить внимание на уроки по «Анимации с помощью CSS преобразований» с помощью которых Вы САМОСТОЯТЕЛЬНО можете сделать собственные эффекты на сайте:

• Анимация с помощью CSS преобразований. Часть 1 — введение
• Анимация с помощью CSS преобразований. Часть 2 — реальный пример
• Анимация с помощью CSS преобразований. Часть 3 — продвинутая анимация

Читая данную статью Вам также нет необходимости напрягать свои извилины, только если Вы не хотите сделать также 😉 . Просто смотрите и наслаждайтесь!

1. Rolling coke Can

Данный пример я уже рассматривал 11 октября 2013 года — здесь. Медленно перетаскивайте горизонтальную полосу прокрутки и Вы увидите как красиво происходит вращение банки. Сделано на чистом CSS, восхитительно!

2. Калькулятор

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

3. Потрясающий эффект появления изображений

Без использования Javascript очень тяжело создать интерактивный эффект, но этот смотрится действительно потрясающе. Просто нажмите на зеленую кнопку «ANIMATE».

4. Плавный переключатель iOS 7

Dan Eden создал классный переключатель как на iOS 7. Попробуйте его переключать и Вы увидите что он очень похож.

5. Анимированный чек-бокс

Этот анимированный чек-бокс был создан Sascha Michael Trinkaus. Как видите, здесь во многих местах используется градиент. Также попробуйте нажать на кнопку — эффект классный.

6. Миньон

Вы уже видели в прошлой статье ряд таких миньонов из фильма «Гадкий — я», но этот был создан отдельно и не принадлежит к тем.

7. SVG анимация переключателя для меню

SVG очень часто используется в связке с CSS3. Потому что дает больше возможностей. Например, анимация, которую Вы можете видеть в данном примере. С использованием изображений такую анимацию создать вряд ли получится.

8. Произвольная форма для изображений

Классная возможность избежать использования графических редакторов. На примере Вы можете увидеть как с помощью CSS можно наложить специальную форму на изображение и оно будет выглядеть как круг, пятиугольник или шестиугольник. Также при наведении форма увеличивается и появляется текст и ссылка.

9. Набор анимированных иконок загрузки

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

Вывод

Классные элементы созданы с помощью CSS, правда?! Если Вам действительно понравилась данная часть статьи или прошлая — расскажите о ней друзьям с помощью социальных кнопок ниже.

Успехов!

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