Добро Пожаловать Гость | Пятница, 20.06.25, 21:41


  • Страница 1 из 1
  • 1
Модератор форума: maks, $@Б_ЗИРО  
Новый красивый поиск как у нас
maksДата: Пятница, 22.06.12, 22:25 | Сообщение № 1
ИНФОРМАЦИЯ


Представляю Вам Новый Замечательный поиск по сайту!
поиск очень стильный и подойдёт к любому шаблону.
При навождении на него он будет раздвигаться, как это показано на экране.

DEMO
Установка:
Вставляем данный код туда где хотим видеть поиск:
Code
<style> </span></div><div><span style="line-height: 14px;"> #wrap-search { </span></div><div><span style="line-height: 14px;"> margin: 0 auto; </span></div><div><span style="line-height: 14px;"> width: 100px; </span></div><div><span style="line-height: 14px;"> -moz-transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> -webkit-transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> -o-transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> text-indent: 0px;} </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> #wrap-search br { display: none; } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> #wrap-search #search { </span></div><div><span style="line-height: 14px;"> background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%); </span></div><div><span style="line-height: 14px;"> background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5, #CACACA),color-stop(25.5, #D3D3D3)); </span></div><div><span style="line-height: 14px;"> filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA'); </span></div><div><span style="line-height: 14px;"> border-radius: 5px; </span></div><div><span style="line-height: 14px;"> padding: 4px; </span></div><div><span style="line-height: 14px;"> } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> #wrap-search:hover { width:200px; } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> .form-search { </span></div><div><span style="line-height: 14px;"> background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC)); </span></div><div><span style="line-height: 14px;"> background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB); </span></div><div><span style="line-height: 14px;"> filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC'); </span></div><div><span style="line-height: 14px;"> border: 1px solid #747474; </span></div><div><span style="line-height: 14px;"> border-radius: 3px; </span></div><div><span style="line-height: 14px;"> box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF; </span></div><div><span style="line-height: 14px;"> height: 32px; </span></div><div><span style="line-height: 14px;"> position: relative; </span></div><div><span style="line-height: 14px;"> -moz-transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> -webkit-transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> -o-transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> transition: all .2s ease-out; </span></div><div><span style="line-height: 14px;"> } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> .form-search input[type='text'] { </span></div><div><span style="line-height: 14px;"> background: none; </span></div><div><span style="line-height: 14px;"> border: none; </span></div><div><span style="line-height: 14px;"> color:#6E7074; </span></div><div><span style="line-height: 14px;"> height: 34px; </span></div><div><span style="line-height: 14px;"> line-height: 34px; </span></div><div><span style="line-height: 14px;"> padding: 0 27px 0 6px; </span></div><div><span style="line-height: 14px;"> font-family: Helvetica, Arial, sans-serif; </span></div><div><span style="line-height: 14px;"> font-size: 13px; </span></div><div><span style="line-height: 14px;"> text-shadow: 0 1px 0 #FFF; </span></div><div><span style="line-height: 14px;"> } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> #wrap-search:hover input[type='text'] { color:#597C84; } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> #wrap-search:hover .form-search { </span></div><div><span style="line-height: 14px;"> background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF); </span></div><div><span style="line-height: 14px;"> background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA)); </span></div><div><span style="line-height: 14px;"> filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA'); </span></div><div><span style="line-height: 14px;"> box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF; </span></div><div><span style="line-height: 14px;"> color: #25464D; </span></div><div><span style="line-height: 14px;"> } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> .form-search input[type='image'] { </span></div><div><span style="line-height: 14px;"> height: 32px; </span></div><div><span style="line-height: 14px;"> opacity: .5; </span></div><div><span style="line-height: 14px;"> filter:alpha(opacity=50); </span></div><div><span style="line-height: 14px;"> position: absolute; </span></div><div><span style="line-height: 14px;"> right: 0px; </span></div><div><span style="line-height: 14px;"> top: 0px; </span></div><div><span style="line-height: 14px;"> width: 32px; </span></div><div><span style="line-height: 14px;"> } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> .form-search input[type='image']:hover { </span></div><div><span style="line-height: 14px;"> opacity: 1; </span></div><div><span style="line-height: 14px;"> filter:alpha(opacity=100); </span></div><div><span style="line-height: 14px;"> } </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> </style> </span></div><div><span style="line-height: 14px;"><br></span></div><div><span style="line-height: 14px;"> <div id="wrap-search"> </span></div><div><span style="line-height: 14px;"> <div id="search"> </span></div><div><span style="line-height: 14px;"> <form class="form-search" method="get" action="/search" target="_blank"> </span></div><div><span style="line-height: 14px;"> <input src="http://joomla.ucoz.com/Demo/2/862330529.png" type="image"> </span></div><div><span style="line-height: 14px;"> <input name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" type="text"> </span></div><div><span style="line-height: 14px;"> </form> </span></div><div><span style="line-height: 14px;"> </div> </span></div><div><span style="line-height: 14px;"> </div>


Готово!

Подпись пользователя
  


 
  • Страница 1 из 1
  • 1
Поиск:

Через 15 секунд эта реклама исчезнет
Если не желаете видеть рекламу - Зарегистрируйтесь!
Голосуйте За Tecktonik - Супер танец™ © 2011-2025
За размещённые пользователями материалы администрация сайта ответственности не несёт.
При копировании материалов сайта указывайте сcылку на источник!