جشنواره نوروزی آکادمی آی تی تخفیف عیدانه آکادمی آی تی شروع شد، 50% تخفیف روی تمامی دوره ها - کد تخفیف eyd99
همین حالا کلیک کن

آموزش ساخت فرم لاگین حرفه ای

0 0 نظر
دپارتمان: آموزش طراحی سایت

آموزشی در رابطه با switching فرم های ورود و ثبت نام با زبان ها HTML و CSS

 

در این آموزش ما میخواهیم که 2 تا HTML فرم بسازیم که بین فرم ورود و ثبت نام سوییچ میشه که ابزاراون به وسیله شبه کد :target می باشد.ما به وسیله CSS به اون طرح هاو آیکون هایی رو اضافه می کنیم. ایده ای که پشت این دمو است اینه که به کاربران یه فرم ورود ای نشون میدیم که میتونن به فرم ثبت نام سوییچ کنن.در ادامه ما به بررسی دمو می پردازیم.

 

نمایش دمو

قسمت HTML

در HTML ما هر 2 تا فرم رو قرار می دهیم و به وسیله ی CSS دومین فرم رو پنهان می کنیم. در زیر شما کد را مشاهده می کنید. و چند قسمت جالبش رو به شما توضیح خواهیم داد.

 

Log in

Your email or username 

Your password 

 Keep me logged in

Not a member yet ? Join us

 

 

Sign up

Your username 

Your email 

Your password 

Please confirm your password 

Already a member ? Go and log in

 

ما یک سری مزیت های HTML5  رو به این جا اضافه می کنیم و ازیه سری input های جدید هم استفاده می کنیم.

Input type=password  به صورت اتوماتیک چیزی که کاربر وارد می کند را از دید کاربر پنهان می کند و همینطور input type=email  به مرورگر اجازه می دهد که که چک کند که آیا ایمیلی که کاربر ایجاد کرده به فرم قابل قبولی هست یا نه ، همینطور ازصفت require=required  استفاده کردیم. مرورگری که داریم از این صفت براش استفاده می کنیم اجازه نمیده که یه کاربر بدون پر کردن اون فیلد ها دکمه ی submit را فشار دهد. و به javascript  ای نیاز نیست.

 

Autocomplete=on فیلد های فرم رو بر اساس کاربر قبلی پر می کند . ما می توانیم Placeholder  های زیبایی هم برای input هامون در نظر بگیریم که راهنما های خوبی به شمار میاند.

حالا 2 نکته وجود دارد یکی این که شما ممکنه که متوجه 2 تا تگ a شده باشین که در بالای فرم هاتون قرار دارند.این باعث میشه که وقتی داریم با لینک ها کار میکنیم پروژه ما درست کار کنه . برای همین باعث میشه که صفحه ی ما یک لود کلی نداشته باشه و باعث بشه فقط سوییچ کنه.

ترفند دومی که میشه زد اینه که از همون فونت ها با ایکون استفاده کنیم. ما از data-attribute  برای نمایش آیکون ها استفاده خواهیم کرد . با قرار دادن data-icon=”icon_character” با اون character  مورد نظر در HTML فقط لازمه که یک صفت CSS اضافه کنیم که به همه ی آیکون ها استایل بده.

 

قسمت css

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

 

استایل دادن به هر دو فرم ها به وسیله css3

اول بیاید به فرم هایی که داریم یه سری استایل  های کلی بدیم. (برای طرح دادن به container  ای که داریم)

 


#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

 

ما یه box shadow  های ظریفی داریم که از 2 قسمت تشکیل شدند که یکی shadow  داخلی می باشد که رنگ آبی برای اون استفاده کردیم. و یکی هم از سایه خارجی.

در ادامه ما headerای که دارم رو با استفاده از background clipping استایل دادیم:

 

/**** general text styling ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** For the moment only webkit supports the background-clip:text; */ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:' '; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

 

توجه داشته باشید که در این لحظه فقط مرورگر های webkit  از این background-clip:text; حمایت می کنند. بنابراین ما میایم یه background  تنها برای webkit می سازیم و اون رو به text وصل می کنیم برای اینکه اون چیزی که تنها ساختیم به تیتر H1  وصل بشود.برای اینکه فقط در مرورگر های webkit  کار میکنه تصمیم گرفتیم که تنها از پیشوند های webkit  استفاده کنیم.

این همون دلیلی است که ما CSS هامون رو به 2 قسمت تقسیم کردیم و از پیشوند webkit  فقط استفاده کردیم. البته که اگر فقط از webkit  استفاده کنیم ، تمرین بدیه ولی این فقط یه دمو می باشد و هدف تنها آموزش است و هیچوقت در وب سایت های واقعی نباید ازش استفاده کنید.

حالا اینجا جایی است که webkit-text-fill-color:transparent قابل استفاده میشه . این به ما اجازه میده که فقط  transparent background در مرورگر های weblkit داشته باشیم .همینطور یه خط زیرین قابل محو برای تیتر به کمک :after pseudo-class می سازیم.

از ارتفاع 2px ای استفاده می کنیم و همینطور background را محو می کنیم.حالا نوبت به این میرسه که ورودی ها رو استایل بدیم و باعث بشیم خوشگل تر بشن.

 


/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; 

اول به input  ها استایل میدیم و خط های خارج از اون رو پاک میکنیم. اما توجه داشته باشین که اون خط های خارجی به کاربران اجازه میده که بفهمن که الان تمرکز رو کدوم input  است . بنابراین اگر حذفش کنین باید یه سری :active  و :focus  هایی براش درست کنین که بفهمین چی به چیه.

 

/* all the input except submit and checkbox */ #wrapper input:not([type="checkbox"]){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing : content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

در اینجا ما از :not pseudo class برای استایل دادن به همه ی input  ها استفاده می کنیم.به جز قسمت checkbox و همینطور من  :focus و :active رو برا اینکه تصمیم گرفتم خط های خارجی رو حذف کنم براشون تعریف کردم.

حالا قسمت جالبش icon ها هستند. ازاونجایی که نمیتونیم :before  و  :after  برای pseudo class  ها استفاده کنیم باید یه کم تقلب کنیم ایکون را به lable اضافه میکنیم و بعد اون رو به input  اضافه می کنیم. ما به شما کتابخانه ی  fontomas  را پیشنهاد می کنیم که یه سری ایکون های قشنگی رو میشه ازش استفاده کرد.شما میتونین به طوری ازشون استفاده کنین که برای یک letter به خصوص به جای آن از یک ایکون استفاده کنید. 
icon رو اگر به یاد داشته باشید اون جابجایی است که شما باید letter رو قرار بدین. از data-icon=’u’ برای کاربران و از e  برای email  و همینطور از p  برای password استفاده می کنیم. وقتی که اون letter مناسب رو انتخاب کردم اون فونت مورد نظر رو دانلود میکنه و از fontauirrel font generator برای اینکه اون رو به @font-face تبدیل کنه.

 

@font-face { font-family: 'FontomasCustomRegular'; src: url('fonts/fontomas-webfont.eot'); src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/fontomas-webfont.woff') format('woff'), url('fonts/fontomas-webfont.ttf') format('truetype'), url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg'); font-weight: normal; font-style: normal; } /** the magic icon trick ! **/ [data-icon]:after { content: attr(data-icon); font-family: 'FontomasCustomRegular'; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

لازم نیست شما برای هر آیکون کلاس جداگانه داشته باشین ما از  content:attr(data-icon)  برای برگرداندن letter  به صفت data-icon استفاده می کنیم. بنابراین فقط نیازه که فونت رو مشخص کنیم و موقعیت و رنگ مطلوب رو بهش نشون بدیم.حالا وقتشه که به دکمه ی submit  هر دو فرم استایل دهیم.

 

/*styling both submit buttons */ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

ترفندی که اینجا ازش استفاده می کنیم اینه که از box-shadow برای اینکه یه سری border های اضافی درست کنیم استفاده کنیم. شما فقط میتونین از یک border استفاده کنین ولی هر چقدر box-shodows ای که بخواین میتونین استفاده کنین. ما از مقدار Length:3px  برای اینکه یک border غیر واقعی دیگه درست کنیم ، استفاده می کنیم  و همینطور از هیچ blur ای هم استفاده نمیکنیم.حالا وقتشه که به checkbox  استایل بدیم. که خب خیلی چیز خاصی نداره.حالا برای دکمه های فرم به وسیله ی linear gradients ها یک پیش زمینه میسازیم .

 

/* styling the checkbox "keep me logged in"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

 

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

 

 

درست کردن انیمیشن سوییچ کردن

اولین کاری که باید انجام بدین اینه که دومین فرم رو به وسیله ی opacity  آن که 0 میکنیم ،  پنهان کنیم:

 

 p.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px ); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

 

به خاطر داشته باشین که z-index  ای که برای فرم ورود استفاده کردیم 22 می باشد و به دومین فرم ثبت نام z-index  21  می دهیم. برای اینکه اونو زیر فرم ورود قرار دهیم

 

و حالا قسمت خوبش : سوییچ کردن فرم ها به وسیله ی :target pseudo class . چیزی که شما باید در رابطه با :target بفهمین اینه که ما از anchors برای درست کردن transition استفاده کنیم. رفتار نرمال anchor link اینه که به صفحه ی target بپره. 

ولی ما نمیخوایم که به صفحه ای بپره فقط میخوایم که فرم را برای ما سوییچ کند. به جای اینکه به طور مستقیم به دومین فرم بره و خب اون اثرات jumping رو به دنبال داشته باشه ما دوتا لینک رو در بالای صفحه قرار می دهیم و به آین ها display:none; می دهیم . این باعث میشه که هر page_jump ای را حذف کند.

 

{ #register z-index: 21; opacity: 0; }

 

خب این چیزیه که اتفاق میوفته وقتی ما به join us  کلیک می کنیم ما #toregister  رو فعال می کنیم وقتی این اتفاق میوفته  از ~ استفاده کردیم تا selector  های فرزندان رو برای پیدا کردن المان #register  . ما از انیمیشن fadeInLeft استفاده می کنیم.

از اون جایی که ما در فرم از opacity 0 برای پنهان کردن فرم استفاده می کنیم. از انیمیشن fade in برای ظاهر کردن آن استفاده می کردیم. و از z-index  برای برای اینکه در بالای فرم بعدی بیاد استفاده می کنیم.

 

و حالا  کد پایین برای انیمیشن است. ما از CSS animation framework  برای این آموزش استفاده کرده ایم.

 

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

 

کد ای که پنهان می شود انیمیشن دیگه ای داره که باعث میشه اون رو به سمت چپ پنهان کنه:

 

http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/ 

 

شما حالا میتونین که از انیمیشن های دیگه ای استفاده کنین و با اون ها خودتون رو تطبیق بدید. و همینطور میتونین یک سری اینمیشین های custom  ای هم در animate-custom.file پیدا کنین.

 

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

 

 

 

سبد خرید

سبد خرید شما خالی است.

دریافت مشاوره رایگان