Куда идем?

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

1. Animate.css

1

Animate.css – это собрание более чем 60-ти CSS-эффектов от дизайнера Dropbox  Даниэля Эдена. Поверьте, в этой библиотеке есть простор для вдохновения.

Как запустить: в CSS-файл после <head> добавить класс animated вместе с названием выбранного CSS-эффекта.

<head>
  <link rel="stylesheet"  href="/animate.min.css">
</head>

Демо

Документация

Где скачать

2. Hover.css

2

Разработчик Ян Лунн предоставляет в распоряжение своим пользователям 48 CSS3-эффектов. Примечательно, что все эффекты представлены также и в виде SASS.

Как запустить: в CSS-файл после <head> добавить класс animated вместе с названием выбранного CSS-эффекта.

<link href="/css/hover.css" rel="stylesheet" media="all">

 

Демо

Документация

Где скачать

3. fancyInput

4

fancyInput работает с HTML-тегами <input> и <textarea>, дает возможность вставлять интересные CSS-эффекты тогда, когда пользователи печатают символы в форме.

Как запустить: вызовом функции .fancyInput().

Убедитесь, что input помещен в div. Следует отметить, что данный плагин не поддерживает ни одной версии IE.

<!-- ...previous page content... -->
<div>
    <input type='text' >
</div>
<div>
    <textarea></textarea>
</div>
<!-- ...some more content (hopefully)... -->
<script>
    $('div :input').fancyInput();
</script>

Демо

Документация

Где скачать

4. Magic

5

magic – тоже по-своему интересная коллекция CSS3-эффектов. Это совместный проект разработчика Animate.css и итальянского разработчика по прозвищу miniMAC.  Использовать magic удобно совместно с jQuery (JavaScript). jQuery обрабатывает событие и запускает эффект.
К примеру, есть кнопка #submit-button и мы хотим, чтобы какой постепенно исчезла как только пользователь один раз на нее нажмет.

Как запустить: в CSS-файл после <head> добавить строчку:

<link rel="stylesheet"  href="/yourpath/magic.css">

 

Демо

Документация

Где скачать

5. Effeckt.css

6

Effeckt.css – развивающийся проект, первая библиотека CSS-эффектов для мобильных устройств. Все эффекты этой библиотеки проверяются дизайнерами. Библиотека нацелена на активное использование на практике. Единственным минусом разработки является некорректная работа на мобильных устройствах с 60fps.

Демо

Где скачать

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

Комментарии  
1
Спасибо за статью, то что нужно :lol:
0
Последняя библиотека Effeckt.css просто поражает, для меня - открытие, действительно ВСЁ в одном месте собрано,с минимумом визуализации, чистые эффекты.
0
А к Джумле это можно прикрутить?
0
Силькари, да, конечно. Можно к любой CMS.
0
А урок будет на эту тему?
2
Силькари, там особо нечего объяснять. к каждой библиотеке есть документация, как ее запускать. Обычно это проще некуда:
1) Подключаем CSS-файл между head /head вашего шаблона.
2) Используем заготовленные CSS-стили.
Вот и всё.
1
спасибо! очень полезная и интересная информация))
0
а что насчет кроссбраузерности этих библиотек?
0
beagler, поскольку все это CSS3, то поддержки IE6-8 нет. Кому очень хочется, можно попробовать http://habrahabr.ru/post/96828/ . IE9 под вопросом. Нужно тестировать.
0
Проблема по поводу редактирования квикстарта DJ Car Company. Выбрал не очень удачный квикстарт, т.к. он как прочитал и перевел с английского по подаче объявления авто, а я искал для проката, без возможности пользователем добавления новых.
Задача отключить возможность добавления пользвоателями объявлений.
Пытался изменить главную стрнцицу, но тут написано не кодом, а функциями завуалироваными и не понятно как найти то, что хочу поменять, т.к. .
Вот фото на котором хотел поменять, то что перечёркнуто, но не нашёл:
: http://pixs.ru/showimage/redaksayta_8693845_16543941.jpg
0

Цитирую Skyars:

Проблема по поводу редактирования квикстарта DJ Car Company. Выбрал не очень удачный квикстарт, т.к. он как прочитал и перевел с английского по подаче объявления авто, а я искал для проката, без возможности пользователем добавления новых.
Задача отключить возможность добавления пользвоателями объявлений.
Пытался изменить главную стрнцицу, но тут написано не кодом, а функциями завуалироваными и не понятно как найти то, что хочу поменять, т.к. .
Вот фото на котором хотел поменять, то что перечёркнуто, но не нашёл:
: http://pixs.ru/showimage/redaksayta_8693845_16543941.jpg


ввожу ?tp=1, но не видит расположение модулей. Что сделать, чтобы добиться желаемого результата?
0
Skyars, зайти в Менеджер шаблонов -> Настройки. И включить опцию Просмотр позиций модулей.
0
не нахожу
0
нашёл
0
Как переименовать кнопку "Go" на "Да"? "Search" на "Поиск" и т.п.
: http://pixs.ru/showimage/gojpg_6092602_16729273.jpg
http://pixs.ru/showimage/gojpg_6092602_16729273.jpg
0
Skyars:
http://wedal.ru/uroki-joomla/tekst-na-sajte-joomla-kak-najti-dobavit-izmenit-udalit.html
http://wedal.ru/uroki-joomla/joomla-faq.html (Поиск в файлах)
0
то что надо спасибо