CSS3 – Enriching Forms

بسم الله الرحمن الرحيم

استكمالا لما بدأناه كفريق ديف ميكس سنتابع اليوم موضوعا لا يخلي منه اي موقع … فعندما ندخل علي احد الموقع اما ان تسجل الدخول في الموقع اذا كان لك حساب عليه او اما ان تدخل علي صفحه التسجيل حتي تصبح عضوا فيه … ولكننا اليوم سنتناول الشكل العام لتسجيل الدخول وهسنتناول ان شاء الله تلك العنوانين

HTML Code
HTML Only Demo
Styling the Form Element
Adding CSS3 to the Form Element
Styling the Input Elements
Adding CSS3 to the Input Element
Styling the Button
Adding CSS3 to the Submit Button

🙂 والان نبدا العمل

Writing The HTML

HTML Code

HTML اول شئ لابد من عمل صفحه التسجيل باستخدام لغه

<form>
 <label>Username:</label> 
<input type="text"name="username"/>
 <label>Password:</label>
 <input type="password"name="password"/>
 <input type="submit"value="Submit" name="submit" class="submit"/>
</form>

HTML هذا الكود بسيط جدا وسهل الفهم اذا كنت تعلم البسيط عن لغه

HTML Only Demo

سيكون شكل الصفحه كما هوه مبين

Writing The CSS

والان حانت اللحظه … سوف نعطي هذه الصفحه بعضا من اكسير الحياه وسنفضي عليها من ابداعنا الخاص ولكن في البدايه سنضيف هذا الكود حتي نحدد مكان الفورمه وايضا الخلفيه الخاصه بالصفحه

* {
        margin: 0px;
        padding: 0px;outline: none;
    }

    body {
        background: #4E0085;
    }

Styling the Form Element

سنبدا الان من اعلي اي اسفل .. بمعني اننا سنتناول تنسيق هذا النموذج / الفورمه ونحدد لها الطول

والعرض وسيكون الكود بهذا الشكل

form {
    width: 250px;     padding: 20px;  border: 1pxsolid#270644;
}

وسيكون بهذا الشكل

Adding CSS3 to the Form Element

والان هسنقوم باضافه الكود السابق الي العنصر وهو الفورمه مع بعض التأثرات الخفيفه

form {
 width: 250px;
 padding: 20px;
 border: 1pxsolid #270644;
 /*** Adding in CSS3 ***/
 /*** Rounded Corners ***/
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
 background: -moz-linear-gradient(19% 75%90deg,#4E0085, #963AD6);
 background:-webkit-gradient(linear, 0%0%, 0% 100%, from(#963AD6), to(#4E0085));
 /*** Shadow behind the box ***/
 -moz-box-shadow:0px
 -5px300px #270644;
 -webkit-box-shadow:0px
 -5px300px #270644;
}

وسيكون الشكل كالاتي

Styling the Input Elements

text box والان سوف نتناول تنسيق العنصر الخاص بــادخال النصوص
 نحن نريد ان نغير الخلفيه الخاصه بمربع ادخال النص وايضا تكبير حجمه وتغير مكانه قليلا

وسيكون الكود بهذا الشكل

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1pxsolid#ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

Adding CSS3 to the Input Element

 transitions سنقوم باضافه الكود السابق ومع بعض الاضافات التي تفضي قليلا من الجمال وهي
وسيكون الكود بها الشكل

input
{
 width: 230px;
 background: #8a33c6;
 padding: 6px;
 margin-bottom: 10px;
 border-top: 1pxsolid #ad64e0;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px;
 /*** Adding CSS3 ***/
 /*** Transition Selectors - What properties to animate and how long ***/
 -webkit-transition-property: -webkit-box-shadow, background;
 -webkit-transition-duration: 0.25s;
 /*** Adding a small shadow ***/
 -moz-box-shadow: 0px 0px2px #000;
 -webkit-box-shadow: 0px 0px2px #000;
}

ولكن سيتم تفعيل هذه الخاصيه السباق ذكرها عندما يقف مؤشر الفاره علي مكان ادخال النصوص
text boxes

وسيكون الكود بهذا الشكل

input:hover 
{
-webkit-box-shadow: 0px 0px4px#000;
background: #9d39e1;
}

وسيكون الشكل النهائي كما هو مبين 

Styling the Button

submit يتبقي لنا تنسيق شكل الزر

الخاص بالفورمه وسيكون تنسيقه سهل للغايه ولن نحتاج لتخصيص اسم موحد له او كلاس معين لتحديده اذ يمكننا استخدام اسمه فقط لتحديده وتخصيص الكود له وسيتم تحديد حجم الزر ولون الخط وايضا مكانه وبعض التاثيرات علي الخط مثل الظل وغيره

وسيكون الكود بهذا الشكل

input.submit {
 width: 100px;
 color: #fff;
 text-transform: uppercase;
 text-shadow: #0001px 1px;
 border-top: 1pxsolid #ad64e0;
 margin-top: 10px;
}

والشكل النهائي سيكون كما هو مبين

Adding CSS3 to the Submit Button

والان ستم اضافه الكود السابق الي الزر الخاص به وهذا شكل الكود

input.submit {
 width: 100px;
 color: #fff;
 text-transform: uppercase;
 text-shadow:#0001px 1px;
 border-top: 1pxsolid #ad64e0;
 margin-top: 10px;
 /*** Adding CSS3 Gradients ***/
 background: 
-webkit-gradient(linear, 0% 0%, 0%100%, from(#963AD6), to(#781bb9));
 background: -moz-linear-gradient(19% 75%90deg,#781bb9, #963AD6);
}

وسيكون الشكل النهائي كما هوه مبين

وبهذا يكون قد اتهينا من شرح كل جزء واضافه التاثيرات عليه وكما قلنا افضينا عليه بعض من اكسير الحياه … في النهايه هذا هوه كود الصفحه بالكامل لتجربته علي جهازه

😀 … ولكن نحن نتتظر منك رايك في الموضوع وتجربتك الشخصيه للكود

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>this activity belong to Devmix team </title>
	<meta name="description" content="this activity belong to Devmix team.">
	<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;outline: none;
	}

	body {
		background: #4E0085;
	}

	form {
		border: 1px solid #270644;
		width: 250px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
		background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
		margin:50px auto;
		padding: 20px;
		-moz-box-shadow:0px -5px 300px #270644;
		-webkit-box-shadow:0px -5px 300px #270644;
	}

	label {
		font-size: 12px;
		font-family: arial, sans-serif;
		list-style-type: none;
		color: #fff;
		text-shadow: #000 1px 1px;
		margin-bottom: 10px;
		font-weight: bold;
		letter-spacing: 1px;
		text-transform: uppercase;
		display: block;
	}

	input {
	  -webkit-transition-property: -webkit-box-shadow, background;
	  -webkit-transition-duration: 0.25s;
	  	padding: 6px;
		border-bottom: 0px;
		border-left: 0px;
		border-right: 0px;
		border-top: 1px solid #ad64e0;
		-moz-box-shadow: 0px 0px 2px #000;
		-webkit-box-shadow: 0px 0px 2px #000;
		margin-bottom: 10px;
		background: #8a33c6;
		width: 230px;
	}

	input.submit {
	  -webkit-transition-property: -webkit-box-shadow, background;
	  -webkit-transition-duration: 0.25s;
		width: 100px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
		background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
		color: #fff;
		text-transform: uppercase;
		text-shadow: #000 1px 1px;
		border-top: 1px solid #ad64e0;
		margin-top: 10px;
	}

	input.submit:hover {
		-webkit-box-shadow: 0px 0px 2px #000;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
		background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
	} 

	input.submit:active {
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
		background:  -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
	}

	input:hover {
		-webkit-box-shadow: 0px 0px 4px #000;
		background: #9d39e1;
	}
	</style>
</head>
<body>
<form action="">

		<label>Username:</label>
			<input type="text" name="username" />
		<label>Password:</label>
			<input type="password" name="password" />
			<input type="submit" value="Submit" name="submit" class="submit" />
</form>	

</body>
</html>

🙂

شكرا لحسن المتابعه ولا تنسي ان تعبر لنا عن رايك سواء بالسلب او

بالايجاب

كتب هذا المقال / محمد جبريل

, , ,

  1. CSS3 – Enriching Forms (via DevelopersMix’s Blog) « My Blog
  2. 9 articles in CSS/CSS3 from devmix « DevelopersMix's Blog

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: