السلام عليكم اليوم سنكمل الدرس الأخير في تصميم فورم جميل بإستخدام تقنيات CSS3 الجديدة
يمكنكم متابعة الدرس الأول على الرابط التالي :
تصميم فورم جميل بإستخدام تقنيات CSS3 الجزء 1
حيث قمنا في الدرس الماضي لمجرد التذكير فقط : بعمل فورم بـHTML وبعدها قمنا بإضافة ستايل CSS ومن ثم قمنا بإضافة بعض ميزات CSS3 كالظل وشرح تفاصيل التعامل معه ووصلنا الآن للخطوة الرابعة
الخطوة الرابعة : Background Gradient
نقوم بإضافة الكود التالي لملف الستايل :
كود PHP:
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF);
تركيبة الجملة بالنسبة للسطرين هي:
كود PHP:
-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )
-moz-linear-gradient(<start> <angle>, <color>, <color>)
محرك Webkit للتدرج يتطلب نقطة بداية (X و Y ) و نهاية (X و Y ) ولون الفورم يكون من لون إلى لون
بينما محرك Gecko للتدرج يتطلب نقط بداية وعلى الاقل لونين وفي حال اردت ان تكون تدرجات اللون 90 درجة فلا داعي لتحديد مجال
لذلك ببساطة للحصول على تدرج خطي من الأعلى للأسفل وبلون من الأسود إلى الأبيض يجب علينا إستعمال الكود التالي :
كود PHP:
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF);
فيكون شكل التدرج الخاص بالكود التالي كما في الصورة
ويكون شكل الفورم :
ولكننا نريد تطبيق التدرج ليس على كامل الفورم بل على الجزء العلوي فقط بشكل طفيف لكي يعطي جمالية : لذلك نقوم بتعديل الكود ليصبح مطبق فقط على 25 بيكسل وذلك بالكود التالي
كود PHP:
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
}
ليصبح الفورم على الشكل التالي :
الشيء الثاني الذي سنقوم به الآن هو إضافة منطقة رفيعة (رقيقة ) في أعلى التدرج لتعطينا انطباع بصرياً أن هذا الحقل مرتفع قليلاً.
ليصبح لدينا تدرجات الألوان كالتالي :
نقوم بإضافة أو بالأحرى تعديل الكود الخاص بنا كالتالي :
كود PHP:
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px);
}
ليصبح لدينا الفورم بالشكل التالي :
الآن سنقوم بتحويل اللون الأسود (#000000) للون آخر أقل غمقاً ولنجرب اللون الفضي (#EEEEEE):
فيصبح شكل الفورم لدينا :
وبهذا نكون قد أنتهينا.
ولكن سنقوم بإضافة بعض التأثيرات الصغيرة لكي تعطي جمالية أكبر
مثل إضافة ظل على الحقل عندما يقوم المستخدم يمر عليه
]php]
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow:rgba(0,0,0,0, 0.15) 0px 0px 8px;
box-shadow
0,0,0,0.15)0px 0px 8px;
}
[/php]
ولنقوم بعمل بعض الحواف الدائرية على زر الإرسال لكي يصبح أجمل بإضافة الكود التالي :
كود PHP:
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
ليصبح شكل الزر كالتالي :
يمكننا أيضاً مراعاة المتصفحات الأخرى التي لا تدعم CSS3 بشكل كامل وذلك عبر استعمال الطريقة التقليدية وهي كالتالي
ومن ثم نقوم بإضافة الكود التالي :
كود PHP:
input, textarea {
background: #FFFFFF url('bg_form.png') left top repeat-x;
}
أصبح الآن كود HTML الكامل هو
كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>تصميم فورم جميل بإستخدام تقنيات CSS3</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<form class="form">
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">الاسم</label>
</p>
<p class="email">
<input type="text" name="email" id="email" />
<label for="email">البريد الإلكتروني</label>
</p>
<p class="web">
<input type="text" name="web" id="web" value="http://www.urfile.com" />
<label for="web">موقع الانترنت</label>
</p>
<p class="text">
<textarea name="text"></textarea>
<label for="msg">نص الرسالة</label>
</p>
<p class="submit">
<input type="submit" value="ارسل" />
</p>
</form>
</body>
</html>
وكود الستايل الخاص بنا الكامل على الشكل التالي :
كود PHP:
@charset "utf-8";
/* CSS Document */
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow:rgba(0,0,0,0, 0.15) 0px 0px 8px;
box-shadow:(0,0,0,0.15)0px 0px 8px;
border-color: #C9C9C9;
}
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
form{
float:right;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 9pt Tahoma, ِarial;
width: 400px;
background: #FFFFFF;
text-align:right;
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
.form label {
margin-left: 10px;
color: #999999;
text-align:right;
float: right;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
إضغط هنا لمشاهدة الفورم من درس البارحة وهنا لمشاهدته في الحالة النهائية ولكي تستطيع المقارنة
اشكر لكم متابعتكم لهذا الدرس وارجو معذرتي في حال نسيت شيء ما
وانا جاهز بإذن الله للإجابة عن أي استفسار من قبلكم
رد مع اقتباس
