السلام عليكم ورحمة الله
قوالب لشاشات تسجيل الدخول
Login Form Templates HTML CSS3
الجزء الأول من هنا
عند تصميمك لموقع ما قد ترغب بإضافة شاشات تسجيل دخول جاهزة لموقعك، ذات ديزاين جميل وريسبونسف
اليوم سنعرض عليكم مجموعة رائعة من نماذج شاشات تسجيل الدخول Login
باستخدام ال Html & Css3 جاهزة للتحميل المباشر.
تابع معنا الجزء الثاني من المجموعة
Transparent Login Form
A simple transparent form for login pages which is pure css and html.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6bndVCtvMuXtg-_1STC6pqnXAbMPE7gxqTciO78N4wUK9obamq18skB6rALFt25rsnuNRp5aElyRpDWZPv560DRl5v_Ok2ZVOnDKvH0nmfEIXAJlNXtYkC_joIAsSmCcE940-WcYaRc/s400/transparent-login-form.jpg)
Download
A simple transparent form for login pages which is pure css and html.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6bndVCtvMuXtg-_1STC6pqnXAbMPE7gxqTciO78N4wUK9obamq18skB6rALFt25rsnuNRp5aElyRpDWZPv560DRl5v_Ok2ZVOnDKvH0nmfEIXAJlNXtYkC_joIAsSmCcE940-WcYaRc/s400/transparent-login-form.jpg)
Download
Classic HTML Login Form
An example of old school login form with modern day styles with css3 only.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlLil5SVySHLAz_VKjYGMAsru0xYce5CIG1Rfko9kGtQAjfnpNDiS-3Ebamzcynzw14QhzxWeBH4fKe-lSe4W2it3cjlP6Fw4j5sNnW3rUGkY66u5J0_j767gwKlFYoiffJfbdeGZHiJE/s400/classic-login.jpg)
Download
An example of old school login form with modern day styles with css3 only.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlLil5SVySHLAz_VKjYGMAsru0xYce5CIG1Rfko9kGtQAjfnpNDiS-3Ebamzcynzw14QhzxWeBH4fKe-lSe4W2it3cjlP6Fw4j5sNnW3rUGkY66u5J0_j767gwKlFYoiffJfbdeGZHiJE/s400/classic-login.jpg)
Download
New CSS3 Login Form
A simple login form with only pure css3 as no jquery is used. For validation lite JavaScript is used in html form template.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcP6PujgeNraI53Hm2zaLRMhVSM1URQM5nGqnAP7q8sVlVQty4UudFmW85qaVqlW-nlmWH1mliHuL53-ErXws3xskqOqkgb4rg39ASEuN6Hlw1hp5Rc8QFOJIhQD-wDBV0mZi4E6GJlU/s400/new-login-form.jpg)
Download
A simple login form with only pure css3 as no jquery is used. For validation lite JavaScript is used in html form template.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcP6PujgeNraI53Hm2zaLRMhVSM1URQM5nGqnAP7q8sVlVQty4UudFmW85qaVqlW-nlmWH1mliHuL53-ErXws3xskqOqkgb4rg39ASEuN6Hlw1hp5Rc8QFOJIhQD-wDBV0mZi4E6GJlU/s400/new-login-form.jpg)
Download
JS Login form
A minimal style login form with flat design can be download from the link below. HTML validation is available and set in this login template.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxtjJPgO_LuOLu-r6Q3WHcYV-50Go1PZEkxLUHN63gnAGMXyr5-L2VQADpf24yeLXK7KAXgLFy2JLkvcCN_QpyRrtDrOJc9flKURmg-qYdaeJS9go-bwunxLYP4b-jaD0i52ALVa_u3U/s400/js-login-form.jpg)
Download
A minimal style login form with flat design can be download from the link below. HTML validation is available and set in this login template.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxtjJPgO_LuOLu-r6Q3WHcYV-50Go1PZEkxLUHN63gnAGMXyr5-L2VQADpf24yeLXK7KAXgLFy2JLkvcCN_QpyRrtDrOJc9flKURmg-qYdaeJS9go-bwunxLYP4b-jaD0i52ALVa_u3U/s400/js-login-form.jpg)
Download
Minimal Form Template for Login
A validation for email is in palce and this tempalte is pure css, html with no fancy jquery modules.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXGr8PQhpFvNzOd7e8_m90HYsqU4zPzbJWjp_kXe8e5lEY4UAOpJDZ5e7-lStM5Fm719mBY5cjpNTvC7ma-zJB-BWOylC9xaerRjwv4sSIJx24eNDfIB1kC4cnzXGeQzQCZCaiUk8kxD8/s400/minimal-form.jpg)
Download
A validation for email is in palce and this tempalte is pure css, html with no fancy jquery modules.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXGr8PQhpFvNzOd7e8_m90HYsqU4zPzbJWjp_kXe8e5lEY4UAOpJDZ5e7-lStM5Fm719mBY5cjpNTvC7ma-zJB-BWOylC9xaerRjwv4sSIJx24eNDfIB1kC4cnzXGeQzQCZCaiUk8kxD8/s400/minimal-form.jpg)
Download
Signup/Login Form
A single form to login to the website as well as a signup, register option which can be flipped with a click. Even though the signup area is missing some important fields this is nonetheless better form with all powerful features.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrQj5_r3DsrZSuRuqdow9ZDZMhuPsN7cMFFvg_O_UWmL90hXS9mxhhid3Ay6Mxg6en6SCWiovCZFK9j_H1yIkg77cfy5mQW0Ptu9SQmklOotXP6wBMNvGkEVLGkokk2cFo2ed2dSo90E/s400/register-form-with-login.jpg)
Download
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrQj5_r3DsrZSuRuqdow9ZDZMhuPsN7cMFFvg_O_UWmL90hXS9mxhhid3Ay6Mxg6en6SCWiovCZFK9j_H1yIkg77cfy5mQW0Ptu9SQmklOotXP6wBMNvGkEVLGkokk2cFo2ed2dSo90E/s400/register-form-with-login.jpg)
Download
DropDown Login Form
This login form is hidden unles you click on login link. This is a very useful feature for modern day website which can avoid an extra page for login. Display login on any page you like with this powerful login form.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwR7m-b9XVPUqSYxZsb6B5DY7seXQ3YqOgjKBtZNGz9qIKB5naElgufRpVkOvzCCm8TW11EBkxZXY-OYO-CWCVswKW1Qt41YFe5wXoJi6EoH_6t5pu6S7heHq5OpzTMnGSRZg9go3AxgI/s400/dropdown-login.jpg)
Download
This login form is hidden unles you click on login link. This is a very useful feature for modern day website which can avoid an extra page for login. Display login on any page you like with this powerful login form.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwR7m-b9XVPUqSYxZsb6B5DY7seXQ3YqOgjKBtZNGz9qIKB5naElgufRpVkOvzCCm8TW11EBkxZXY-OYO-CWCVswKW1Qt41YFe5wXoJi6EoH_6t5pu6S7heHq5OpzTMnGSRZg9go3AxgI/s400/dropdown-login.jpg)
Download
Vibrant Login Interface CSS & PSD
It’s provided both as a PSD and as a fully-coded HTML/CSS version, so you can get started integrating it straight away.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzaBrtEChHlkjjnTeObrKBTcxE-eJkNtLsv_Yc4VHUNzXp2Ml7Mr5G_8xBo67bb8UjliM5jEh7sr341j-LgItERtIXqJiRaTfz26akO4LC1FQgHP-spEI9CGP2f-3QEE-FMMolO4pUnU/s400/Vibrant-Login-Interface-CSS-PSD.jpg)
Download
It’s provided both as a PSD and as a fully-coded HTML/CSS version, so you can get started integrating it straight away.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzaBrtEChHlkjjnTeObrKBTcxE-eJkNtLsv_Yc4VHUNzXp2Ml7Mr5G_8xBo67bb8UjliM5jEh7sr341j-LgItERtIXqJiRaTfz26akO4LC1FQgHP-spEI9CGP2f-3QEE-FMMolO4pUnU/s400/Vibrant-Login-Interface-CSS-PSD.jpg)
Download
Login Form (Coded)
A professional login form. The download includes the PSD file, and I also felt like coding it so I included the xHTML, Js and CSS files as well.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEite5VtVJYzr8A0cLv2ESbKYREpQbRBnjH_O83rAjNg86uWe5nVc5hb2tH0h-AEZD-x5U5euBqToPxmYqmoXKE3_jSvYxPFD4J3516JfSwudoPRjjpoWcSR3RhM6KKqFm8oGmHd43Lg2bk/s400/Login-Form-Coded.jpg)
Download
A professional login form. The download includes the PSD file, and I also felt like coding it so I included the xHTML, Js and CSS files as well.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEite5VtVJYzr8A0cLv2ESbKYREpQbRBnjH_O83rAjNg86uWe5nVc5hb2tH0h-AEZD-x5U5euBqToPxmYqmoXKE3_jSvYxPFD4J3516JfSwudoPRjjpoWcSR3RhM6KKqFm8oGmHd43Lg2bk/s400/Login-Form-Coded.jpg)
Download
White Simple Login Form
A clean and simple login form with a round submit button and elegant focus states.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA85wJVpVc2Woia93Ylc0jDoUg_hv2XnbqunEVDnyYQj_XL_KeFbY_8MpRZcv-YsjL_OE1_i25QEnr8ObeO7VZf4B_f022Q4k8LSmnzXs1zGJ6MgQ_yj0oex14d1tJSrQOJcNE0aVfgdA/s400/css-login-form.jpg)
Download
A clean and simple login form with a round submit button and elegant focus states.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA85wJVpVc2Woia93Ylc0jDoUg_hv2XnbqunEVDnyYQj_XL_KeFbY_8MpRZcv-YsjL_OE1_i25QEnr8ObeO7VZf4B_f022Q4k8LSmnzXs1zGJ6MgQ_yj0oex14d1tJSrQOJcNE0aVfgdA/s400/css-login-form.jpg)
Download
Login form using HTML5 and CSS3
This is an example how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements :after and :before to create the multi page effect.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfDE2JDx0nlcI1mBfMVAwQVEDVzDRwh8qlUV5GWy50WG3xE-ih7FfWMpsZezDex6HvWkHUoNDJ25lwfoODGJlJYd2qzkQpVjcp5kUi6sy2dmbxIFSRfMCqdgu9HDjqmj-faI3_MQ2hd0/s400/Login-form-using-HTML5-and-CSS3.jpg)
Download
This is an example how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements :after and :before to create the multi page effect.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfDE2JDx0nlcI1mBfMVAwQVEDVzDRwh8qlUV5GWy50WG3xE-ih7FfWMpsZezDex6HvWkHUoNDJ25lwfoODGJlJYd2qzkQpVjcp5kUi6sy2dmbxIFSRfMCqdgu9HDjqmj-faI3_MQ2hd0/s400/Login-form-using-HTML5-and-CSS3.jpg)
Download
Simply Login Form
Simply Login Form styled and designed purely using CSS3. The form is created using pretty simple markup and styled using very basic CSS3 properties.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKDUK-Rj6a83hqm_1WzQTP2w9G8YAxUct9kG-0mfEq9rjUz2rC2cARXNC67cjCWHxwFhQQfj7hJRR0GOOqNiOHF5-Oc7TggeUJ-UVWe8JMnUG8ysAVGsjLbyYh5ZW82th-i04wL0QuTk/s400/login-page.jpg)
Download
Simply Login Form styled and designed purely using CSS3. The form is created using pretty simple markup and styled using very basic CSS3 properties.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKDUK-Rj6a83hqm_1WzQTP2w9G8YAxUct9kG-0mfEq9rjUz2rC2cARXNC67cjCWHxwFhQQfj7hJRR0GOOqNiOHF5-Oc7TggeUJ-UVWe8JMnUG8ysAVGsjLbyYh5ZW82th-i04wL0QuTk/s400/login-page.jpg)
Download
Custom Login Form Styling
In this tutorial find some interesting techniques and download files to create a valid CSS HTML5 login form.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFexjdUgqr4yzVwbiRHKZFxZRtlJsZqyGZCGyTvR3SxqZ8lKoOo9zjJqQ-F44zWC56uh-F7dsziQnWHy6HbAa8alDYyBybeSTj-DM3ryEGuivLji8-4qtJi0j6iN-3_s0HTq1YZG_0o8E/s400/custom-form.jpg)
Download
In this tutorial find some interesting techniques and download files to create a valid CSS HTML5 login form.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFexjdUgqr4yzVwbiRHKZFxZRtlJsZqyGZCGyTvR3SxqZ8lKoOo9zjJqQ-F44zWC56uh-F7dsziQnWHy6HbAa8alDYyBybeSTj-DM3ryEGuivLji8-4qtJi0j6iN-3_s0HTq1YZG_0o8E/s400/custom-form.jpg)
Download
Pure CSS Blurred Video Background Login Box
Find a blurred video running in background of this form and the form itself shows a transparency. This is dark colored login form for those who are interested in a bit darkish theme.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjz3lu9GvbPJwHlxHAsBV8cIn0McWVrkwi9qpGVGhwSTf1kRLBXEaNC3h6JlLBtfcTgvA8-K-lt2UUp2xh6QMou3fW9nfH_30LhUAwdKGI6QDgJsv65kkoyzN7q1poEMmNyWfZOvAZMoU/s400/Pure-CSS-Login-Box.jpg)
Demo | Download
Find a blurred video running in background of this form and the form itself shows a transparency. This is dark colored login form for those who are interested in a bit darkish theme.
![Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U Login Form Templates HTML CSS3 Part2 - دروس4يو Dros4U](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjz3lu9GvbPJwHlxHAsBV8cIn0McWVrkwi9qpGVGhwSTf1kRLBXEaNC3h6JlLBtfcTgvA8-K-lt2UUp2xh6QMou3fW9nfH_30LhUAwdKGI6QDgJsv65kkoyzN7q1poEMmNyWfZOvAZMoU/s400/Pure-CSS-Login-Box.jpg)
Demo | Download
7 شآركوا بالموضوع
شآركوا بالموضوعمشكووووووور
ردأهلا وسهلا :)
ردالعفو
كيف افتح الشاشات
ردو اين اجد الكود لتعديله؟؟
أهلا ميناس..
ردبداية قومي بتحميل القالب الذي يعجبك ثم قومي بفتحه عن طريق برنامج لتحرير الأكواد، عندها ستجدين ملفات ال css وال html موجودة لديك وبإمكانك تجريرها والتعديل عليها كما ترغبين.
بالتوفيق :)
اين اضعها في المدونة
ردأهلا وسهلا
ردهذه الشاشات هي عبارة عن تصميم باستخدام ال html & css
ممكن تحطها بأي مكان في موقعك ثم تقوم بمرجتها وربطها بلغة برمجة مثل PHP أو Asp
كيف احمل من هنا
ردالتعليقآت