Ajax Russia : Аякс по-русски

Кто из вас любит халяву? Да, я тоже люблю! Поэтому я не мог не написать про новую статью на Smashing Magazine - 20+ Free And Fresh Icon Sets. Автор сделал список самых красивых иконок и иллюстраций, которые можно использовать бесплатно для вэб дизайна. В списке есть iPhone иконки, государственные флаги, картинки для RSS и много других. Теперь у RSS на Ajax Russia - новая иконка из комплекта Feedicons.

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

Формы для поиска есть пожалуй на любом вэб сайте, но в большинстве случаев они очень скучные и похожи друг на друга. Мне нравится когда html формы чем то отличаются от других. Поэтому сегодня я хочу представить вашему вниманию туториал от Брайана Рэйндэла.

Для туториала нам потребуется две картинки и несколько минут свободного времени.

1. HTML Markup
   Тут мы создаём DIV контейнер, в котором будет наша форма.
   PLAIN TEXT
   HTML:

   1. <div id="search_box">
   2. <form id="search_form" method="post" action="/">
   3. <input type="text" id="s" value="Search" class="swap_value" />
   4. <input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
   5. </form>
   6. </div>

2. Добавляем CSS
   PLAIN TEXT
   CSS:

   1. #search_box {
   2. width: 201px;
   3. height: 31px;
   4. background: url(bg_search_box.gif);
   5. }
   6. #search_box #s {
   7. float: left;
   8. padding: 0;
   9. margin: 6px 0 0 6px;
   10. border: 0;
   11. width: 159px;
   12. background: none;
   13. }
   14. #search_box #go {
   15. float: right;
   16. margin: 3px 4px 0 0;
   17. }

И - пожалуйста, форма для поиска готова:

На любой странице, где используется аякс, надо каким то образом показать пользователю, что на сайте в данный момент что то происходит. Иначе посетитель подумает, что сайт не работает и просто закроет браузер. Нам это конечно не надо и поэтому мы покажем пользователю индикатор аякса в форме картинки gif, и когда аякс сделает своё дело - картинку спрячем.

Чтобы показать и спрятать картинку существует огромное количество способов. А где взять то саму картинку? Найти в интернете aнимированное изображение ещё пол беды. Надо чтобы эта картинка подходила к дизайну сайта. Вот тут на помощь приходит ресурс ajaxload. Ещё нигде я не видел такого лёгкого и быстрого способа сгенерировать для себя картинку-индикатор.

Выбираем тип картинки, цвет фона и цвет самого индикатора

и получаем свой уникальный анимированный Gif.