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

نمایش دمو

• قسمت HTML

• قسمت css

قسمت HTML

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

ما یک سری مزیت های 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 اضافه کنیم که به همه ی آیکون ها استایل بده.

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

قسمت 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); } }