Красивый поиск


Красивый поиск

1965
9 из 10
Проголосовало: 8




  • Скачать с сервера
  • Скачать
  • Смотреть демо


Вот сделал простой и красивый поиск - демо

Установка:

1)Вставляем в CSS в самый низ:
Code

.poisk{  
  position:fixed;  
  background-image:-webkit-linear-gradient(bottom,#426BFF,#60A5FF);  
  background-image:-moz-linear-gradient(bottom,#426BFF,#60A5FF);  
  background-image:-o-linear-gradient(bottom,#426BFF,#60A5FF);  
  background-image:linear-gradient(bottom,#426BFF,#60A5FF);  
  -webkit-box-shadow:0 0 3px black;  
  -moz-box-shadow:0 0 3px black;  
  -o-box-shadow:0 0 3px black;  
  box-shadow:0 0 3px black;  
  border:1px solid #404040;  
  left:-200px;  
  width:240px;  
  height:30px;  
  border-radius:3px;  
  top:100px;  
  color:white;  
  text-shadow:0 0 3px black;  
  -webkit-transition:all 0.4s ease;  
  -moz-transition:all 0.4s ease;  
  -o-transition:all 0.4s ease;  
  transition:all 0.4s ease;  
  padding:3px;  
  }  
  .poisk:hover{  
  left:-3px;  
  }  
  .poisk #search{  
  width:175px;  
  position:relative;  
  top:3px;  
  left:5px;  
  -webkit-transition: all 0.4s ease;  
  -moz-transition: all 0.4s ease;  
  -o-transition: all 0.4s ease;  
  transition: all 0.4s ease;  
  border-radius:3px;  
  border:1px solid #606060;  
  height:26px;  
  }  
  .poisk:hover #search{  
  width:230px;  
  }  
  #search{  
  -webkit-transition:all 0.2s ease;  
  -moz-transition:all 0.2s ease;  
  -o-transition:all 0.2s ease;  
  transition:all 0.2s ease;  
  }  
  #search:focus{  
  border:1px solid #404040;  
  -webkit-box-shadow:inset 1px 1px 3px #ccc;  
  -moz-box-shadow:inset 1px 1px 3px #ccc;  
  box-shadow:inset 1px 1px 3px #ccc;  
  }  
  .poisk:hover #poiskknopka{  
  display:none;  
  }


2)Вставляем в Нижнюю часть сайта:
Code

<div class="poisk"><form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/"><input id="search" class="poick_pole" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}" id="acpro_inp11" autocomplete="off"><span style="position:absolute;right: 10px;top: 6px;font-family: tahoma, sans-serif;font-size: 14px;font-style: normal;font-variant: normal;font-weight: normal;" id="poiskknopka"><img src="/search1.png"></span></form></div>


Скачиваем картинку и заливаем в корень сайта.

Готово!
Автор публикации: Загрузка
Загрузка
Supermenыч, это его n материал
Источник: http://test123456789.ucoz.ru
  • Всего комментариев: 10

eXONE
0
eXONE написал: Написано 15 Июля 2012 в 16:32
Комментарий №10
при наведений открывается, но когда убераеш курсор с неё изчезает назат и трудно написать чтото, нужно удержать курсор на неё, ето не очень ..

было норм , чтобы после нажатие на значок она выходила, а не при наведении

Stapanul
-2
Stapanul написал: Написано 15 Июня 2012 в 20:21
Комментарий №8
Vseo ok tolika sam poisk ne rabotaet. Ne nahodet ni**ia biggrin

to shto kartinka bittaia eta ne balishaia prablema.

Supermenыч
0
Supermenыч написал: Написано 03 Июля 2012 в 18:23
Комментарий №9
Нужно на Enter нажимать

Myateznik
0
Myateznik написал: Написано 10 Июня 2012 в 20:07
Комментарий №5
я знаю где подобное видел 2 месяца назад в Google+ поиск YouTube токо было с права и там лого You tube менялось на значок плей при проигрывании и на значок пауза при остановки видео на паузу

Supermenыч
+1
Supermenыч написал: Написано 10 Июня 2012 в 20:30
Комментарий №6
ага smile , давно уже хотел типа такого сделать, вот и сделал smile

Myateznik
0
Myateznik написал: Написано 11 Июня 2012 в 11:52
Комментарий №7
спасибо за код на основе него сделаю у себя несколько фич. Кст если что зайди сюды http://webo4ka.ru/forum/50-3451-1 тут скрины мною сделанные нового диза Google )) все обновления я вижу за месяц - 2 месяца))

Supermenыч
0
Supermenыч написал: Написано 08 Июня 2012 в 19:54
Комментарий №4
всмысле "картинка не пашет"?ъ

Supermenыч
+1
Supermenыч написал: Написано 07 Июня 2012 в 12:01
Комментарий №3
кстати эффект "выезжания" будет работать только в последних версиях браузеров smile , в опере с версии 11.20, в хроме в любой версии, в ИЕ с 9 версии, в лисе вроде в любой работает, в сафари тоже в любой

alex0005
-1
alex0005 написал: Написано 07 Июня 2012 в 08:56
Комментарий №2
нормуль)

MakAn
+1
MakAn написал: Написано 07 Июня 2012 в 01:52
Комментарий №1
красивый поиск))) biggrin biggrin

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    228
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: