تبدیل فرم های سایت به فرم های زیبا

[web3az]

به این کد نگاه کنید

fieldset input

background: #f5f5f5;
font-family:Tahoma, Verdana, sans-serif;
text-align:right;
border: 1px solid #cccccc;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
resize: none;

این کد میگه ما یک اینپوت داریم که توش رنگ زمینه و نوع فونت و نوع گوشه ان را گرد است را توضیع میدهد
حال به خاصیت دیگه ای که به این فرم میدهیم نگاه کنید

fieldset input :hover



border: 1px solid #3399cc;
-moz-transition: 1s;

این کد میگه وقتی که ما موس را روی فرممون میبریم نه کلیک روش اون فرم یک بوردر به رنگ مشخص شده که بعد یک ثانیه اعمال میشود که شبیه اجاکس است


حالا یک خاصیت دیگه به فرممون میدیم

fieldset input:focus


background: #ffffff;
border: 1px solid #3399cc;
outline: none;
-moz-transition: 1s;

این کد باعث میشود وقتی توی فرممون کلیک میکنیم داخل فرم به رنگ سفید و با بردر ابی و بعد از یک ثانیه اجرا میشود

همه این کدها مال همون اینپوت است و باید تو سی اس اس سایتمون نوشته شود .

امیدوارم که لذت برده باشید

ادامه مبحثها و اموزشهای کامل مرحله به مرحله با دریمیور به زودی در سایت
www.web3az.ugig.ir
​

​

​