:: ساخت فرم جستجو در سایت با css3

ساخت فرم جستجو در سایت با css3

در خدمتتون هستم با یک آموزش css دیگر .

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

دیدن دمو

فراخوانی استایل:(style.css یا هر اسم دیگری ، بعد از <head>)

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all” />

کدهای html :(بعد از <body> قرار گیرد )

<form>
<input type=”text” id=”search” placeholder=” … جستجو در سایت” required>
<input type=”submit” value=”جستجو کن” id=”submit”>
</form>

کدهای css :

.form-wrapper {
width: 450px;
padding: 8px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

.form-wrapper #search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font-family : Tahoma, Arial, Helvetica, Georgia, Sans-serif;
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}

.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;

}

.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
text-align:right;
}

.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}

.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font-family : Tahoma, Arial, Helvetica, Georgia, Sans-serif;
color: #fafafa;
text-transform: uppercase;
background-color: #D70411;
background-image: -webkit-gradient(linear, left top, left bottom, from(#A5030D), to(#D70411));
background-image: -webkit-linear-gradient(top, #D70411, #A5030D);
background-image: -moz-linear-gradient(top,  #D70411, #A5030D);
background-image: -ms-linear-gradient(top,  #D70411, #A5030D);
background-image: -o-linear-gradient(top,  #D70411, #A5030D);
background-image: linear-gradient(top, #D70411, #A5030D);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #A5030D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #A5030D, #D70411);
background-image: -moz-linear-gradient(top, #A5030D, #D70411);
background-image: -ms-linear-gradient(top, #A5030D, #D70411);
background-image: -o-linear-gradient(top,#A5030D, #D70411);
background-image: linear-gradient(top, #A5030D, #D70411);
}

.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

.form-wrapper #submit::-moz-focus-inner {
border: 0;
}

http://www.progpars.com/?p=2368
نویسنده : مهدی خاکسار / دسته : آموزش, استایل نویسی
دیدگاه ها
نایس تو نت
چهارشنبه ۱۴ دی ۱۳۹۰

با سلام شرمنده نمیشه اینو. کاری کرد که یوزر با دادن ایملش تو گروه یاهو ثبت نام کنه؟

مهدی خاکسار
چهارشنبه ۱۴ دی ۱۳۹۰

سلام عزیزم ؛
این یک فرم هست و شما با تغییرات خودتون میتونید به حالتهای مختلف در بیارید .

دیدگاه خود را ارسال کنید : (خـــــــروج)