Выдыижной, Красивый поиск

Asissa

Дата: Воскресенье, 15.07.2012, 21:21 | Сообщение # 1

Ученик

Группа: Пользователи

Сообщений: 5

Награды: 0

Репутация: 0

Статус: Offline

Смотрим скрин скрипта: http://i075.radikal.ru/1207/67/0c366b24f772.png

Установка:
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