PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : استایل دادن به input field ها به وسیله سلکتور های hover و focus



jcs.w
2012/08/16, 09:04 PM
درود با یه آموزش اختصاصی دیگه در خدمتیم b-)b-)

دمو : http://padz.zzl.org/vbiran/minicss/inputbeauty.html

____________________________________

یه توضیح مختصر برای سلکتور های استفاده شده :

hover : استایل ها وقتی که موس بر روی آن میرود
focus : استایل ها وقتی که انتخاب میشود

____________________________________

استایل ها :



.vbiranparssoftinputfield {
border-style:solid;
font-family:byekan,b yekan;
font-size:18px;
text-align:center;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
.vbiranparssoftinputfield:hover {
-moz-box-shadow: 0px 0px 13px #f4ff19;
-webkit-box-shadow: 0px 0px 13px #f4ff19;
box-shadow: 0px 0px 13px #f4ff19;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s ;
transition: all 0.5s;
}
.vbiranparssoftinputfield:focus {
background-color:#e8e9ed;
border-color:#3b5ad4;
-moz-box-shadow: 0px 0px 28px #4772ff;
-webkit-box-shadow: 0px 0px 28px #4772ff;
box-shadow: 0px 0px 28px #4772ff;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s ;
transition: all 0.5s;
}



سورس:

<input class="vbiranparssoftinputfield" style="width:400px;height:80px;"type"field" value="وی بی ایران اولین و تنها مرجع ویبولتین در ایران">



موفق باشید:x