Красивая форма поиска для uCoz by CN


Красивая форма поиска для uCoz by CN

5366
8.8 из 10
Проголосовало: 14






Красивая форма поиска для uCoz от CN для Webo4ka. Очень полезная штука. Подойдет под светлые шаблоны.

Сейчас я вам покажу как его установить:

Просто вставьте этот код там где у вас будет поиск и все:

Code
<style>.form-wrapper {  
  width: 450px;  
  padding: 8px;  
  margin: 100px auto;  
  overflow: hidden;  
  border-width: 1px;  
  border-style: solid;  
  border-color: #dedede #bababa #aaa #bababa;  
  -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;  
  -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;  
  box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;  
  -moz-border-radius: 10px;  
  -webkit-border-radius: 10px;  
  border-radius: 10px;  
  background-color: #f6f6f6;  
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));  
  background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);  
  background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);  
  background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);  
  background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);  
  background-image: linear-gradient(top, #f6f6f6, #eae8e8);  
  }  

  .form-wrapper #search {  
  width: 330px;  
  height: 50px;  
  padding: 10px 5px;  
  float: left;  
  font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';  
  border: 1px solid #ccc;  
  -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;  
  -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;  
  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;  
  -moz-border-radius: 3px;  
  -webkit-border-radius: 3px;  
  border-radius: 3px;  
  }  

  .form-wrapper #search:focus {  
  outline: 0;  
  border-color: #aaa;  
  -moz-box-shadow: 0 1px 1px #bbb inset;  
  -webkit-box-shadow: 0 1px 1px #bbb inset;  
  box-shadow: 0 1px 1px #bbb inset;  
  }  

  .form-wrapper #search::-webkit-input-placeholder {  
  color: #999;  
  font-weight: normal;  
  }  

  .form-wrapper #search:-moz-placeholder {  
  color: #999;  
  font-weight: normal;  
  }  

  .form-wrapper #search:-ms-input-placeholder {  
  color: #999;  
  font-weight: normal;  
  }  

  .form-wrapper #submit {  
  float: right;  
  border: 1px solid #00748f;  
  height: 50px;  
  width: 100px;  
  padding: 0;  
  cursor: pointer;  
  font: bold 15px Arial, Helvetica;  
  color: #fafafa;  
  text-transform: uppercase;  
  background-color: #0483a0;  
  background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));  
  background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);  
  background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);  
  background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);  
  background-image: -o-linear-gradient(top, #31b2c3, #0483a0);  
  background-image: linear-gradient(top, #31b2c3, #0483a0);  
  -moz-border-radius: 3px;  
  -webkit-border-radius: 3px;  
  border-radius: 3px;  
  text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);  
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;  
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;  
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;  
  }  

  .form-wrapper #submit:hover,  
  .form-wrapper #submit:focus {  
  background-color: #31b2c3;  
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));  
  background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);  
  background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);  
  background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);  
  background-image: -o-linear-gradient(top, #0483a0, #31b2c3);  
  background-image: linear-gradient(top, #0483a0, #31b2c3);  
  }  

  .form-wrapper #submit:active {  
  outline: 0;  
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
  }  

  .form-wrapper #submit::-moz-focus-inner {  
  border: 0;  
  }</style>  
  <form action="/search/" method="get" class="form-wrapper">  
  <input type="search" name="q" id="search" placeholder="Текст, который будем искать ..." required>  
  <input type="submit" value="искать" id="submit">  
  </form>


На этом все:) Если кому не жалко поставьте ++ smile
Автор публикации: Загрузка
Загрузка
CN, это его n материал
Источник: http://www.red-team-design.com/design-a-beautiful-css3-searc...
  • Всего комментариев: 6

Dav
0
Dav написал: Написано 18 Декабря 2011 в 22:07
Комментарий №6
---->DEMO<----

LeKcUs
+1
LeKcUs написал: Написано 16 Декабря 2011 в 15:57
Комментарий №2
хих я то думал ето для webo4ki делали специально.. biggrin

CN
0
CN написал: Написано 16 Декабря 2011 в 16:04
Комментарий №4
Этот скрипт предназначался не для системы uCoz. Там в коде нужно было добавить кое что специальное для uCoz. Вот я добавил и сделал это я все ради Webo4ki. Так что можно говорить что это для Webo4ki)) Думаю что никто не будет против.

LeKcUs
0
LeKcUs написал: Написано 16 Декабря 2011 в 16:24
Комментарий №5
А ты знаеш я не против, и воше мне всеровно просто думал идея твоя ввот и только...

FalleN
0
FalleN написал: Написано 16 Декабря 2011 в 15:38
Комментарий №1
какой нафиг http://iKaz.kz???? что за бред источник урока идет через автора перевода http://ruseller.com/lessons.php?rub=2&id=1313 и к исходному источнику на английском
http://www.red-team-design.com/design-a-beautiful-css3-search-form...ссылку то поправьте

CN
0
CN написал: Написано 16 Декабря 2011 в 15:57
Комментарий №3
Извиняюсь, ошибся:) Ну уже поменяли я как вижу. Как вы видите этот скрипт не предназначался для uCoz, там нужно было кое что поменять в коде и все. Я это все сделал, протестировал все работает. Кто уже поставил себе прошу оставить отзыв.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта 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
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: