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


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

1922
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 7
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: