Эффекты и анимация на CSS - «Верстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
18-03-2016, 16:25
Эффекты и анимация на CSS - «Верстка»
Рейтинг:

С помощью CSS разработчики могут создавать на сайтах весьма интересные эффекты и даже анимацию. Возможности нового CSS3 значительно расширили доступный набор их инструментов. В интернете имеется достаточно много разных примеров, библиотек и сервисов, где каждый может посмотреть и скачать те или иные эффекты. Про некоторые генераторы CSS3 и HTML5 мы уже писали, сегодня рассмотрим еще 2 интересных проекта.


Animate.css – анимация через CSS


Animate.css – набор классных, веселых кроссбраузерных(!) вариантов анимации для веб-сайтов. Вы можете использовать их как для домашних страниц, разного рода слайдеров, так и для серьезных коммерческих проектов.



На странице сможете попробовать все варианты анимации. Просто кликаете по одной из кнопок с названием эффекта. Всего имеется несколько категорий для преобразований: привлекающие внимание, поворачивающиеся, затухающие, вращающиеся, выпрыгивающие и т.п. Внизу есть информацию о том, что набор Animate.css применяется на сайтах EA, Foursquare, Disney.


Узнать о том как использовать набор можете на Github вот здесь. Это, в принципе, не так сложно – вы просто подключаете файл стилей animate.css в head. А затем добавляете класс “animated” с названием эффекта. Можете использовать стили совместно с jQuery и объединять с разными другими эффектами.


Effeckt.css – разные CSS эффекты


Effeckt.css – подборка разных CSS эффектов для веб-приложений, которая постоянно пополняется новыми фишками. Отбираются для нее только правильно работающие, удобные и полезные “приемчики”.



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



А вот ссылка на github где найдете описание библиотеки с инструкциями по применению. В целом оба набора (Animate.css и Effeckt.css) весьма хороши. Веб-разработчикам должны пригодиться!


С помощью CSS разработчики могут создавать на сайтах весьма интересные эффекты и даже анимацию. Возможности нового CSS3 значительно расширили доступный набор их инструментов. В интернете имеется достаточно много разных примеров, библиотек и сервисов, где каждый может посмотреть и скачать те или иные эффекты. Про некоторые генераторы CSS3 и HTML5 мы уже писали, сегодня рассмотрим еще 2 интересных проекта. Animate.css – анимация через CSS Animate.css – набор классных, веселых кроссбраузерных(!) вариантов анимации для веб-сайтов. Вы можете использовать их как для домашних страниц, разного рода слайдеров, так и для серьезных коммерческих проектов. На странице сможете попробовать все варианты анимации. Просто кликаете по одной из кнопок с названием эффекта. Всего имеется несколько категорий для преобразований: привлекающие внимание, поворачивающиеся, затухающие, вращающиеся, выпрыгивающие и т.п. Внизу есть информацию о том, что набор Animate.css применяется на сайтах EA, Foursquare, Disney. Узнать о том как использовать набор можете на Github вот здесь. Это, в принципе, не так сложно – вы просто подключаете файл стилей animate.css в head. А затем добавляете класс “animated” с названием эффекта. Можете использовать стили совместно с jQuery и объединять с разными другими эффектами. Effeckt.css – разные CSS эффекты Effeckt.css – подборка разных CSS эффектов для веб-приложений, которая постоянно пополняется новыми фишками. Отбираются для нее только правильно работающие, удобные и полезные “приемчики”. Как и в прошлом случае, здесь есть специальная страница с демонстрацией всех имеющихся эффектов. Они также разделены на группы: модальные окна, кнопки, списки, скроллы, навигация, заголовки, элементы формы, табы и т.п. Каждый эффект можно потестировать онлайн. Вот прикольное видео с демонстрацией некоторых из них. А вот ссылка на github где найдете описание библиотеки с инструкциями по применению. В целом оба набора (Animate.css и Effeckt.css) весьма хороши. Веб-разработчикам должны пригодиться!

Теги: CSS Верстка, набор использовать CSS3 анимация можете

Просмотров: 2 568
Комментариев: 0:   18-03-2016, 16:25
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle