—»     —»   CSS3: 10 интересных экспериментов + демо-файлы
  Раздел: CSS/Style Sheets   Комментариев: 2  

CSS3: 10 интересных экспериментов + демо-файлы

Наверняка, ранее вы слышали это много раз: «Сейчас мы, разработчики, находимся на переходном этапе того, как мы работаем. Сейчас впереди идут такие новые стандарты, как CSS3 и HTML5. Обе технологии уже почти полностью были интегрированы в 4 из 5 самых распространенных браузеров, а обещания о внедрении поддержки разработчиками IE9, дают нам возможность абсолютно по-новому создавать интересные, насыщенные интерактивные приложения».

Так насколько же хороша технология CSS3? Просмотрите эти 10 экспериментов и демо-файлов к ним, которые устроят для технологии настоящее испытание.

01. Наша солнечная система

CSS3: 10 интересных экспериментов + демо-файлы

Этот эксперимент представляет собой орбиту нашей солнечной системы (в ускоренном режиме, конечно же). Здесь используются функции CSS3: border-radius, transform и animation. Вдобавок, если вы наведете курсор на название каждой планеты, то справа будет отображена анимированная сноска – она тоже реализована посредством CSS. Разработка данного эксперимента была произведена по этой обучающей статье от Алекса Гайрона (Alex Giron). На данный момент, анимация будет работать только в браузерах семейства WebKit (Chrome и Safari).

02. CSS3 Ads против Flash Ads

CSS3: 10 интересных экспериментов + демо-файлы

Анимированные баннеры на Flash уже заработали дурную славу назойливых картинок на страницах. Приложения по блокировке рекламы способны скрывать это от ваших глаз, путем отключения всех встроенных Flash-элементов. Тем не менее, используя анимацию CSS3, уже есть возможность создавать почти идентичные рекламные объявления, и их гораздо сложнее отключить сторонними приложениями. В этом эксперименте мы сделали несколько объявлений посредством CSS3, и получили результат почти идентичный объявлению на Flash.

03. CSS3-Man

CSS3: 10 интересных экспериментов + демо-файлы

Эта анимация была создана под вдохновением после просмотра мульт-сериала о Человеке-Пауке. Принцип работы этого элемента основан на функциях CSS3: transform, @key-frame и rotate. Также было задействовано немного jQuery для предварительной загрузки изображений, и немного кода HTML5 для работы аудио. Создатель написал несколько строк по поводу того, как работает анимация «CSS3-Man», в этом тексте вы найдете информацию о том, сколько работы нужно было проделать, чтобы этот эксперимент удался.

04. Человек из Голливуда

CSS3: 10 интересных экспериментов + демо-файлы

Это демо представляет собой анимированную последовательность (основанную на динамической типографии), которая наглядно отображает нам то, каким образом мы можем заменить ей полноценные анимированные компоненты (Flash или After Effects). В данном концепте главным образом применяются селекторы CSS и анимация CSS3, тем не менее, это не чистый код CSS, так как здесь использовался javascript для переключения классов элементов в выключенное и включенное состояние.

05. Anigma

CSS3: 10 интересных экспериментов + демо-файлы

Мы часто используем Flash (или Silverlight) для создания насыщенных и интерактивных видео-игр для веб. Данный демо-файл CSS3 представляет собой мозаику, и демонстрирует нам, каким образом мы можем использовать данную технологию для создания игр. Конечно, игры не так легко разработать, как на Flash, и пока что они выглядят не так привлекательно, особенно если вы сравните с играми на сайте Kongregate. Для внедрения звука был использован аудио-элемент HTML5.

06. Анимированные полароиды

CSS3: 10 интересных экспериментов + демо-файлы

Здесь мы видим стопку изображений в виде фотоснимков с камеры Polaroid. Наведение курсора мыши на изображение выносит его в самый верх стопки, что является достаточно интересным эффектом, чтобы использовать данный элемент в собственной фото-галерее. Данный демо-файл был создан с использованием функций CSS3: transition, transform, динамический псевдо-селекторов (для анимации элементов), а также стилистические параметры типа box-shadow для создания визуальных эффектов. Прочтите обучение о том, как вся эта система была разработана, если вам это интересно, конечно.

07. Меню музыкального плеера на CSS3

CSS3: 10 интересных экспериментов + демо-файлы

Нам понадобятся API "audio" и "video" в HTML5 (которые позволят нам использовать медиа-файлы вне зависимости от стандартных плагинов), а также интерфейс, который позволит нашим пользователям управлять плеером. Для создания мы можем использовать статические изображения в совокупности с другими HTML-элементами (кнопками, например). Используя лишь HTML и CSS, мы можем разработать контроллеры, что означает, что в итоге мы получим более гибкое решение. Такой пользовательский интерфейс для музыкального плеера был разработан с использованием лишь кода CSS3 (gradient, border-radius, box-shadow). Прочтите текст о том, как все это было разработано.

08. Скользящая пластинка на CSS3

CSS3: 10 интересных экспериментов + демо-файлы

Данный демо-файл, найденный на ZURB Playground, отображает нам возможность анимации музыкальной пластинки при наведении курсора мыши, а также возможность добавления дополнительных элементов управления (подробная информация, проиграть и так далее). Этот концепт можно использовать в элегантном веб-интерфейсе с музыкальным плеером, если вы интегрируете его с API "audio" в HTML5.

09. Маленькая планета Габриэля Шарпа (Gabriel Sharp)

CSS3: 10 интересных экспериментов + демо-файлы

Этот анимированный мультфильм отображает нам смену дня и ночи в ускоренном режиме. Он работает в браузерах семейства WebKit (Safari или Chrome). Здесь используется функция CSS3 - @keyframes для движения и переходов между PNG-изображениями.

10. Падающие листья

CSS3: 10 интересных экспериментов + демо-файлы

WebKit представляет возможность анимации посредством CSS3, с помощью чего мы получили данный демо-файл с падающими листьями. Посказка: Посмотрите исходный код страницы для того, чтобы увидеть код данного демо. Код очень четко расписан и подкреплен объяснениями и заметками. Для более четкого понимания функции анимации в CSS3, посетите и почитайте блог WebKit.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, HTML 5
Опубликовал Mysterious Master   Прочитано (раз): 10896   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 сентября 2010 @ 18:26
Написал: Kiru4a — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Супер-подборка! Спасибо!
Комментарий #2: 26 февраля 2014 @ 16:32
Написал: Aterr — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В новогодние праздники мне было лень заниматься чем либо во благо нации JS, и поэтому я решил «нарисовать» своего любимого героя комисков на чистом html/css, и тем самым показать насколько css3 классная штука, которая позволяет делать невообразимые вещи при помощи стандартных функций.

http://aterr.net/lyubimyj-geroj-kommiksov-na-chist
om-csshtml/
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2020    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930