آموزش ساخت جعبه جستجو با css3|Search

شروع موضوع توسط administrator ‏9 آوریل 2012 در انجمن آموزش CSS

  1. administrator

    administrator مدیریت کل سایت

    تاریخ عضویت:
    ‏27 جولای 2011
    ارسال ها:
    2,989
    تشکر شده:
    1,027
    با سلام

    در این بخش قصد آموزش ساخت باکس یا همون جعبه جستجو در سایت را دارم که به وسیله این میتونید یک جستجو در سایت زیبا برای خودتون درست کنید.

    نمونه ای که قرار ساخته بشه :

    [​IMG]

    اینم دموی آنلاین : http://woc-ir.persiangig.com/WOC.ir_css3_DEmo/search-woc.html

    و اما کد ها:

    کد html به صورت زیر :

    کد:
    <form id="search-form">  
    <input type="text">  
    <input value="Search" type="submit">  
    </form>
    و کد ccs :

    کد:
    #search-form {
    	background: #e1e1e1; /* Fallback color for non-css3 browsers */
    	width: 365px;
    
    	/* Gradients */
    	background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
    	background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
    
    	/* Rounded Corners */
    	border-radius: 17px;
    	-webkit-border-radius: 17px;
    	-moz-border-radius: 17px;
    
    	/* Shadows */
    	box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
    	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
    	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
    }
    
    /*** TEXT BOX ***/
    input[type="text"]{
    	background: #fafafa; /* Fallback color for non-css3 browsers */
    
    	/* Gradients */
    	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
    	background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
    
    	border: 0;
    	border-bottom: 1px solid #fff;
    	border-right: 1px solid rgba(255,255,255,.8);
    	font-size: 16px;
    	margin: 4px;
    	padding: 5px;
    	width: 250px;
    
    	/* Rounded Corners */
    	border-radius: 17px;
    	-webkit-border-radius: 17px;
    	-moz-border-radius: 17px;
    
    	/* Shadows */
    	box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
    	-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
    	-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
    }
    
    /*** USER IS FOCUSED ON TEXT BOX ***/
    input[type="text"]:focus{
    	outline: none;
    	background: #fff; /* Fallback color for non-css3 browsers */
    
    	/* Gradients */
    	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
    	background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
    }
    
    /*** SEARCH BUTTON ***/
    input[type="submit"]{
    	background: #44921f;/* Fallback color for non-css3 browsers */
    
    	/* Gradients */
    	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
    	background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
    
    	border: 0;
    	color: #eee;
    	cursor: pointer;
    	float: right;
    	font: 16px Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	height: 30px;
    	margin: 4px 4px 0;
    	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    	width: 84px;
    	outline: none;
    
    	/* Rounded Corners */
    	border-radius: 30px;
    	-webkit-border-radius: 30px;
    	-moz-border-radius: 30px;
    
    	/* Shadows */
    	box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
    	-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
    	-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
    }
    /*** SEARCH BUTTON HOVER ***/
    input[type="submit"]:hover {
    	background: #4ea923; /* Fallback color for non-css3 browsers */
    
    	/* Gradients */
    	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
    	background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
    }
    input[type="submit"]:active {
    	background: #4ea923; /* Fallback color for non-css3 browsers */
    
    	/* Gradients */
    	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
    	background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
    }
    
    آمادش رو هم پیوست کردم میتونید داتلود کنید و استفاده کنید.
     

    پیوست ها:

  2. mardak

    mardak کاربر جدید

    تاریخ عضویت:
    ‏5 آگوست 2011
    ارسال ها:
    4
    تشکر شده:
    0
    سلام

    عالی بود

    اگر امکان داره کد منوی لاگین شدن رو هم بگذارید
     
  3. administrator

    administrator مدیریت کل سایت

    تاریخ عضویت:
    ‏27 جولای 2011
    ارسال ها:
    2,989
    تشکر شده:
    1,027
    با سلام

    شاید این به دردتون بخوره برای لاگین شدن هست

    http://woc.ir/Thread-%D9%81%D8%B1%D9%85-%D9%84%D8%A7%DA%AF%DB%8C%D9%86-%D8%A8%D8%B3%DB%8C%D8%A7%D8%B1-%D8%B2%DB%8C%D8%A8%D8%A7%DB%8C-%D8%A7%D9%BE%D9%84-%D8%A8%D8%A7-Css3
     
  4. tonter

    tonter کاربر جدید

    تاریخ عضویت:
    ‏5 ژوئن 2015
    ارسال ها:
    3
    تشکر شده:
    0
    ببخشید میشه بنویسیسد کامل که چطوری سرچش رو درست کنم
    مثلا من این هایی که شما دادی رو آپلود کردم تو هاستم ولی هرچقد کلمه مینویسم و روی سرچ میزنم سرچ نمیکنه توی همون صفحه میمونه میشه برای سرچ کردن در گوگل یا خود سایت کد کاملش یعنی کدی که هم سرچ کردن توش باشه هم سرچ کردنس توی این قالبی که درست کردید باشه
     
  5. tonter

    tonter کاربر جدید

    تاریخ عضویت:
    ‏5 ژوئن 2015
    ارسال ها:
    3
    تشکر شده:
    0
    کسی نیس؟
    خواهش میکنم جوابمو بدید