Лого www.SiteHere.ru

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

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

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

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

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

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

1. Rolling coke Can

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

Вращающаяся банка на CSS

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

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

Калькулятор на CSS

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

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

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

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

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

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

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

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

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

6. Миньон

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

Миньон на CSS

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

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

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

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

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

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

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

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

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

Вывод

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

Успехов!

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

Невероятная CSS технология — Часть 2 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *