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

Свежие новости из мира IT

Archive for the 'Дизайн' Category

20 комплектов иконок - бесплатно!

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

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

Crystal Icons

5 comments

Сделай сам : красивые формы для поиска при помощи CSS

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

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

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

    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
    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. }

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

3 comments

Ajax Loader : генерируем картинку-индикатор

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

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

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

Generate Ajax spinner

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

Ajax Loader

5 comments

« Previous Page