Если вы хотите улучшить внешний вид вашего сайта, эта статья для вас.
5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.

Ни для кого не  секрет, что 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.

Демо

Где скачать

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.web11 17.04.2014 06:04
Спасибо за статью, то что нужно :lol:
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.ALEHAN 17.04.2014 12:02
Последняя библиотека Effeckt.css просто поражает, для меня - открытие, действительно ВСЁ в одном месте собрано,с минимумом визуализации, чистые эффекты.
Ответить | Ответить с цитатой | Цитировать
0 # библиотек CSS-эффектов для улучшения внешнего вида вашего сайтаСилькари 17.04.2014 23:11
А к Джумле это можно прикрутить?
Ответить | Ответить с цитатой | Цитировать
0 # RE: библиотек CSS-эффектов для улучшения внешнего вида вашего сайтаWedal 18.04.2014 04:06
Силькари, да, конечно. Можно к любой CMS.
Ответить | Ответить с цитатой | Цитировать
0 # RE: библиотек CSS-эффектов для улучшения внешнего вида вашего сайтаСилькари 18.04.2014 05:07
А урок будет на эту тему?
Ответить | Ответить с цитатой | Цитировать
+2 # RE: библиотек CSS-эффектов для улучшения внешнего вида вашего сайтаWedal 19.04.2014 03:49
Силькари, там особо нечего объяснять. к каждой библиотеке есть документация, как ее запускать. Обычно это проще некуда:
1) Подключаем CSS-файл между head /head вашего шаблона.
2) Используем заготовленные CSS-стили.
Вот и всё.
Ответить | Ответить с цитатой | Цитировать
+1 # css-библиотекиsb84 18.04.2014 14:32
спасибо! очень полезная и интересная информация))
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.beagler 19.04.2014 18:45
а что насчет кроссбраузерности этих библиотек?
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Wedal 21.04.2014 02:35
beagler, поскольку все это CSS3, то поддержки IE6-8 нет. Кому очень хочется, можно попробовать http://habrahabr.ru/post/96828/ . IE9 под вопросом. Нужно тестировать.
Ответить | Ответить с цитатой | Цитировать
0 # Редоктирование Квикстарта j2.5Skyars 19.03.2015 15:36
Проблема по поводу редактирования квикстарта DJ Car Company. Выбрал не очень удачный квикстарт, т.к. он как прочитал и перевел с английского по подаче объявления авто, а я искал для проката, без возможности пользователем добавления новых.
Задача отключить возможность добавления пользвоателями объявлений.
Пытался изменить главную стрнцицу, но тут написано не кодом, а функциями завуалироваными и не понятно как найти то, что хочу поменять, т.к. .
Вот фото на котором хотел поменять, то что перечёркнуто, но не нашёл:
: http://pixs.ru/showimage/redaksayta_8693845_16543941.jpg
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Skyars 23.03.2015 09:55
Цитирую Skyars:
Проблема по поводу редактирования квикстарта DJ Car Company. Выбрал не очень удачный квикстарт, т.к. он как прочитал и перевел с английского по подаче объявления авто, а я искал для проката, без возможности пользователем добавления новых.
Задача отключить возможность добавления пользвоателями объявлений.
Пытался изменить главную стрнцицу, но тут написано не кодом, а функциями завуалироваными и не понятно как найти то, что хочу поменять, т.к. .
Вот фото на котором хотел поменять, то что перечёркнуто, но не нашёл:
: http://pixs.ru/showimage/redaksayta_8693845_16543941.jpg

ввожу ?tp=1, но не видит расположение модулей. Что сделать, чтобы добиться желаемого результата?
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Wedal 24.03.2015 04:23
Skyars, зайти в Менеджер шаблонов -> Настройки. И включить опцию Просмотр позиций модулей.
Ответить | Ответить с цитатой | Цитировать
0 # 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Skyars2 24.03.2015 19:24
не нахожу
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Skyars2 27.03.2015 07:29
нашёл
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Skyars 31.03.2015 12:19
Как переименовать кнопку "Go" на "Да"? "Search" на "Поиск" и т.п.
: http://pixs.ru/showimage/gojpg_6092602_16729273.jpg
http://pixs.ru/showimage/gojpg_6092602_16729273.jpg
Ответить | Ответить с цитатой | Цитировать
0 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.Wedal 01.04.2015 04:11
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 # RE: 5 библиотек CSS-эффектов для улучшения внешнего вида вашего сайта.mmarket 06.02.2016 15:21
то что надо спасибо
Ответить | Ответить с цитатой | Цитировать

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх