Login form desgin web

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء login form desgin web . لقد قمت سابقًا بمشاركة العديد من المدونات حول وضع تسجيل الدخول لكن هذا نوع مختلف عن الباقي حان الوقت لاجل استخدامه بشكل منفرد وتعلم كيفية وضعه بحركة متلاشية لتعطي لمسه جميلة تصميم تسجيل الدخول للأدمن او لقاعدة التحكم

وضع تسجيل الدخول دائما ياتي في واجهة مستخدم داخل صفحة ويب تحتوي على صور كثيرة في موقع الويب. عادةً ما يتم عرض هذا المحرك في موقع الويب من اجل الانتقال الى صفحة التحكم

اليوم في هذه المدونة ، سأشارك معك هذا البرنامج (login form desgin web). سلايد شو غير مستجيب لاجهزة الهواتف. على المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج ( login form desgin web)

فيديو تعليمي لانشاء login form desgin web

كما رأيت في الفيديو ، فإن تسجيل الدخول هذا تكون بطريقة جميلة. إذا كنت مبتدئًا في تصميم الويب ، فقد ساعدك هذا البرنامج التعليمي على فهم الرموز والمفاهيم الأساسية وراء إنشاء التصميم ذلك

إذا كنت تحب هذا البرنامج (login form desgin web ) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :

قائمة تسجيل الدخول مع الحركة الجميلة

نموذج تسجيل دخول متوهج

إنشاء التمرير لأعلى باستخدام

إنشاء قائمة استجابة الشريط الجانبي

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج ( login form desgin web). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>.بأسم الفئة "container" كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من غيرbootstrap ثم أنشأت <div> بداخله ثم بعد ذلك انشأت ".dp-wrap".

..

وعملنا الفوم بتنسيق عرض وارتفاع معين ايضا تحكمنا بالتنسيق باستخدام الcss وسنقوم بسرد بعض الامور للعمل

في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العنصر في الوسط . ثم قمت بالتصميم الأساسي للتقسيم وعناصر اخرى أعطيت اللون وحجم الخط والحشو وما إلى ذلك. وبالمثل ، بعد ذلك ، قمت بتصميم مربع البحث. ثم قمت بعد ذلك بالتوجه الى بقية العلامات لاجل التنسيق الصحيح

الآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية Width. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك عرض معين. ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-size

لإنشاء هذا البرنامج (شريط البحث). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ،وملف js قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.

HTML FILE:

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

<title>Page Title</title>

<meta name='viewport' content='width=device-width, initial-scale=1'>

<link rel='stylesheet' type='text/css' media='screen' href='css/style.css'>

<script src='main.js'></script>

</head>

<body>

<div class="main-container">

<div class="container">

<div class="center">



<h1>sign in with</h1>



<div class="social-container">

<a href="#" class="facebook-btn"><img src="image/icons/f.png">Facebook</a>

<a href="#" class="google-btn"><img src="image/icons/icon-google.png">google</a>

</div>



<form action="#">

<div class="form-container">

<span>username</span>

<input type="text">

<span>password</span>

<input type="text">

<input type="submit">

</div>

</form>

<p>Not a member<a href="#">sign up now</a></p>

</div>

</div>

</div>

</body>

</html>

CSS FILE:

*{

margin: 0px;

padding: 0px;

box-sizing: border-box;

font-family: popping-regular,sans-serif;

}

.main-container{

background: url(../image/bg-01.jpg);

width: 100%;

min-height: 100vh;

background-size: cover;

background-repeat: no-repeat;

background-position: center;

display: flex;

justify-content: center;

align-items: center;

}

.container{

width: 600px;

height: 600px;

background: #fff;

border-radius: 10px;

}

.center{

width: 70%;

height: auto;

margin: 0px auto;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.center h1{

font-size: 35px;

font-weight: 500;

color: #303030;

margin: 50px 0px 45px 0px;

text-transform: capitalize;

}

.social-container{

display: flex;

justify-content: center;

}

.social-container a{

text-decoration: none;

text-transform: capitalize;

color: #000;

font-size: 18px;

display: flex;

justify-content: center;

align-items: center;

box-shadow: 0 1px 5px 0px rgb(0,0,0,0.2);

padding: 15px 42px;

border-radius: 5px;

}

.google-btn img{

width: 29px;

height: 29px;

margin-right: 20px;

}

.facebook-btn{

margin-right: 20px;

}

.facebook-btn img{

font-size: 26px;

width: 40px;

height: 34px;

color: #fff;

background:#00f;

display: flex;

justify-content: center;

align-items: center;

border-radius: 4px;

margin-right: 15px;

}

input[type=text]{

width: 100%;

height: 50px;

border: 1px solid #d8d8d8;

border-radius: 5px;

background: #f5f5f5;

margin: 8px 0px 15px 0px;

outline: none;

padding: 0px 20px

}

span{

font-size: 13px;

font-weight: 600;

text-transform: capitalize;

color: #808080;

}

.form-container{

margin-top: 40px;

}

input[type=submit]{

width: 100%;

height: 50px;

border: none;

border-radius: 5px;

margin: 12px 0px 15px 0px;

color: #fff;

font-weight: 600;

background: #303030;

}

p{

font-size: 12px;

color: #707070;

font-weight: 600;

margin: 25px;

}

سومر لتصميم التطبيقات ومواقع الويب

القائمة الرئيسية

الصفحات

Login form desgin web

Login form desgin web

فيديو تعليمي لانشاء login form desgin web

أخر المواضيع من قسم : Ui Desgin

تعليقات

إرسال تعليق

<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>Page Title</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel='stylesheet' type='text/css' media='screen' href='css/style.css'>

	<script src='main.js'></script>
	</head>
	<body>
	<div class="main-container">
	<div class="container">
	<div class="center">

	<!-- heading -->
	<h1>sign in with</h1>

	<!-- social container -->
	<div class="social-container">
	<a href="#" class="facebook-btn"><img src="image/icons/f.png">Facebook</a>
	<a href="#" class="google-btn"><img src="image/icons/icon-google.png">google</a>
	</div>

	<!-- form-container -->
	<form action="#">
	<div class="form-container">
	<span>username</span>
	<input type="text">

	<span>password</span>
	<input type="text">

	<input type="submit">
	</div>
	</form>

	<p>Not a member<a href="#">sign up now</a></p>
	</div>
	</div>
	</div>

	</body>
	</html>