Шаблоны для uCoz [18] |
Виды материалов [10] |
Мини профили [7] |
Мини чаты [8] |
Виды комментариев [14] |
Формы входа [3] |
Информеры [33] |
Украшения [16] |
Меню сайта [5] |
Кнопки [27] |
Шапки сайта [3] |
Медиа [19] |
Переключатели [8] |
Разное [65] |
Формы поиска [9] |
Скрипты [46] |
Игры на сайт [6] |
Аякс (Ajax) окна [1] |
PHP скрипты [3] |
17:53 Форма поиска для юкоз |
Клевая форма поиска для вашего сайта, подойдет для любого дизайна и проста в установке. Установка: Файл архива закачайте в папку img файл менеджера. По месту, где хотите видеть форму поиска ставим: Код <div id="wrap-search"> <div id="search"> <form class="form-search" method="get" action="/search" target="_blank"> <input src="/img/search.png" type="image"> <input name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" type="text"> </form> </div> </div> В css ставим этот код: Код #wrap-search { margin: 0 auto; width: 100px; -moz-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; text-indent: 0px;} #wrap-search br { display: none; } #wrap-search #search { background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%); 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)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA'); border-radius: 5px; padding: 4px; } #wrap-search:hover { width:200px; } .form-search { background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC)); background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC'); border: 1px solid #747474; border-radius: 3px; box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF; height: 32px; position: relative; -moz-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .form-search input[type='text'] { background: none; border: none; color:#6E7074; height: 34px; line-height: 34px; padding: 0 27px 0 6px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; text-shadow: 0 1px 0 #FFF; } #wrap-search:hover input[type='text'] { color:#597C84; } #wrap-search:hover .form-search { background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF); background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA'); box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF; color: #25464D; } .form-search input[type='image'] { height: 32px; opacity: .5; filter:alpha(opacity=50); position: absolute; right: 0px; top: 0px; width: 32px; } .form-search input[type='image']:hover { opacity: 1; filter:alpha(opacity=100); } |
Всего комментариев: 0 | |