Login Form Styling

මේක තමයි ඉතින් හදන්න යන්නේ..

2-2-2016 1-42-02 AMhtml code එක කලින් post එකේ දැම්මා..එක මෙතනින් ගිහින් බලන්න පුළුවන් .මේකෙන් කරන්නේ වෙනම styles ටික  css file එකක ලියලා html එකට link කරලා style apply කරන එක.

මුලින්ම body එකට image එක දාන එකෙන් පටන්ගමු.2-2-2016 1-59-47 AM

මේ තියෙන්නේ shorthand code එකක්..වෙන වෙනම styles දානවා වෙනුවට එකම line එකේ apply කරලා..

2-2-2016 2-18-43 AM

මේ පිළිවෙලට තමා styles දාලා තියෙන්නේ..

background-size:cover; මේකෙන් වෙන්නේ සම්පුර්ණයෙන්ම background එක වැහෙන විදිහට image එක scale වෙන එක.

margin එක 0 උනාම වටේට white space එකක් එන්නේ නෑ

ඊළගට login/register කියන header එකේ styles

2-2-2016 2-23-39 AM

 

 

 

 

 

 

 

 

 

මේකේ නම් සාමාන්‍ය පහසු styles ටිකක් තියෙන්නේ..මෙතනදී

position එක absolute සහ left සහ top එකෙන් position එක හදලා තියෙන්නේ මම html code එකේ වෙනම header එකක් විදිහට ගත්ත නිසා..සරලවම කිව්වොත් පල්ලෙහා තියෙන input fields සහ header එක කොටස් දෙකක් නිසා.

login form එකේ styles 

2-2-2016 2-35-32 AM

 

 

 

 

 

 

 

inner කියන්නේ මම කලින්ම දීලා තියෙන class එකක්..position එක absolute කරලා වමේ ඉදන්  43% දකුණු පැත්තට  සහ උඩම ඉදන් 45% ක් පහලට ගෙනල්ලා තමා position එක හදාගත්තේ.border එක outset වලින් වෙන්නේ 3D හැඩයක් වටේ border එකට එකතු වෙන එක.

දැන් මේ වෙනකොට background එක සහ login form එකේ division එක හදාගෙන ඉවරයි.ඊළගට මේක ඇතුලේ තියෙන items වලට අදාළ සැකසුම් කරන්න ඕනි.

2-2-2016 2-43-05 AM

 

 

 

 

 

 

මම කලින්ම unordered list එකට login කියල id එකක් දීල තියෙන්නේ.ඒ නිසා stylesheet එක ඇතුලේ මම #login මගින් ඒ id එක හදුන්වා ගන්නවා .

unordered list එකක් හැදුවම අපිට list items වල bullet points එනවා..එක නැති කරන්න තමා

list-style:none යොදලා තියෙන්නේ.line-height මගින් line දෙකක් අතර පරතරය හදාගන්න පුළුවන්.අනිත් styles අපි බහුලව බාවිතා කරන ඒවා.

දැන් username,password,login වලට අදාළ styles

2-2-2016 2-54-58 AM

 

 

 

 

 

 

 

 

 

මම මෙතැනදී inner class එකට අදාළ div එක ඇතුලේ තියෙන input tags වලට style දාන්න යන නිසා තමා .inner input විදිහට බාවිතා කරන්නේ.( #login input හෝ නිකන්ම input ලෙස උනත් මේ අවස්ථාවේදී බාවිතා කරන්න පුළුවන් )

border-radius එකෙන් input fields වලට රවුම් හැඩයක් ලබාගෙන තියෙනවා.

input fields තුලදී mouse  එක pointer එකක් වෙන්න තමා curser:pointer එක යොදාගන්නේ.

padding එකෙන් input fields විශාල කරගන්න පුළුවන්.

mouse pointer එක input fields උඩට ගෙන ගියාම සිදු වන දේවල් වලට අදාළ සරල style එකක් තමා අන්තිමටම තියෙන්නේ.

2-2-2016 3-06-47 AM

 

 

 

 

 

inner class එකට අදාළ div එක ඇතුලේ තියෙන input tags නිසා තමයි .inner input කියලා දීලා තියෙන්නේ. input:hover මගින් වෙන්නේ ඒ tag එක උඩ mouse එක ගෙන ගිය විටදී සිදුවිය යුතු දේවල් නිසා.

opacity එක මගින් කරන්නේ field එකේ විනිවිද භාවය වැඩි කරන එක..transition මගින් වෙන්නේ ඒ විනිවිද බාවය ඇති කරන්න ගත විය යුතු කාලය ලබා දෙන එක.

දැන් styles ඉවරයි..වෙනම හදාගත්ත css file එක දැන් html එකට link කරන්න ඕනි.

මගේ css file එකේ නම style.css,එක තියෙන්නේ css කියන folder එක ඇතුලේ.

2-2-2016 3-47-29 AMමේ විදිහට html code එකේ head එක ඇතුලේ css file එක link කරන්න පුළුවන්..වැදගත් දේ තමයි දැනට වැඩ කරන html file එකේ ඉදන් css file එකට path එක හරියට දෙන්න ඕනි.

ඉවරයි..තියෙන අවුල් ටික comment කරලම යන්න………..

 

Advertisements

3 thoughts on “Login Form Styling

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s