walid
11-01-2013, بتوقيت غرينيتش 04:04 PM
http://www.dzbatna.com/images/icons/icon30.gif ظ‚ظ… ط¨طھطµظ…ظٹظ… ظ†ظ…ظˆط°ط¬ ط¥طھطµظ„ ط¨ظ†ط§ ط¨ظˆط§ط³ط·ط© CSS3 (ظ…ط«ط§ظ„ ط*ظٹ ط¨ط§ظ„ط¯ط§ط®ظ„ ط±ط¢ط¢ط¢ط¦ط¹ ) (http://www.dzbatna.com/t1893231/)
السلام عليكم ورحمة الله وبركاته ،
اليوم في درس مفصل جديد من دروس موقع نقطة مطور ، سنعمل علي تصميم نموذج إتصل بنا .
النتيجة :
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/07/css3namooothag-300x285.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/07/css3namooothag.png)
مثال حي :
Learning Tutorials By Khalid Magdy - TheDevDot.CoM (http://www.thedevdot.com/tutorials/css3_contact_us.html)
نتيجة رآآئعة ، وكل هذا بدون إستعمال أي شئ في الفوتوشوب وكل الموضوع عبارة عن أكواد CSS3
الآن لنبدأ .
في البداية سنقوم بوضع هذا الكود code ، وهو بسيط جداً ويقوم بعمل الفورم والزر والأشياء البسيطة .
رمز Code:
<form class="form"> <p class="name"><label for="name">الإسم : </label> <br /> <input id="name" name="name" type="text" /></p> <p class="email"><label for="email">البريد الإلكتروني : </label> <br /> <input id="email" name="email" type="text" /></p> <p class="web"><label for="web">الموقع : </label> <br /> <input id="web" name="web" type="text" /></p> <p class="text"><textarea name="text"></textarea></p> <p class="submit"><input type="submit" value="إرسال" /></p> </form>
الآن النتيجة التي سنراها ستكون عادية جداً ، نموذج إتصل بنا عادي لا يوجد به شئ مميز .
الآن سنضيف بعض التأثيرات البسيطة بالCSS لنجعله أكثر جمالاً .
نضع هذا الكود code في منطقة الhead
الآن لنشرح طريقة الكود code أكثر فأكثر .
حددنا الtextarea واعطيناه بعض الخواص .
الحدود حجمها ١ بكسل وحددنا لها لوناً . وإستخدمنا background-color
لتحديد اللون
ايضاً هنالك خاصية إستخدمناها وهي focus,hover
تضع إسم السيليكتور ثم نقطتين فوق بعضهما :
ثم focus او hover الfocus تعني عند الضغط علي المربع ، الhover تعني عند تمرير الماوس فوقه
وضعنا في حالة تمرير الماوس او الضغط علي المربع يتم تغيير لون الحدود .
وباقي الكود code سهل جداً لا يحتاج لشرح طريقة .
ستحصل علي نتيجة جيدة ، الآن لنقوم بوضع لمساتنا السحرية بالCSS3
سنبدأ بالخاصية الأولي .
box-shadow
ببساطة الظل ، والظل غير متوافر إلا في CSS3
الsyntax الخاص بالظل هو
رمز Code:
box-shadow: <color> <horizontal offset=""> <vertical offset=""> <blur>;
يعني نضع box-shadow ثم اللون ثم المسافة او البعد كما في الفوتوشوب رأسياً وأفقياً وفي النهاية الblur وتعني الحجم وكلما زاد
كلما كان الظل كبيراً ويشغل مساحة أكثر .
إنتهينا من الظل . الآن الكود code سيكون :
رمز Code:
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;
الآن ما لماذا نضع webkit و moz
webkit تستخدم للمتصفحات التي تستخدم webkit engine مثل سافاري وجوجل GOOGLE كروم
moz تستخدم للمتصفحات التي تستخدم محرك Mozilla Gecko Engine مثل موزيلا فايرفوكس
الآن انتهينا من الظل
ندخل للمهم وهو التدرج اللوني ، Graidnt
طبعاً كما نري في النتيجة أن لكل مربع نص تدرج لوني بسيط وجميل ، ويمكنك فعله بالcss بدون الإستعانة بأي برنامج تصميم .
الsyntax :
الsyntax للmoz
Webkit
يختلف التدرج اللوني في الsyntax بين الmoz والwebkit
بالنسبة للwebkit فأنت تحتاج لتحديد نفطة بداية Y:X ونقطة نهاية أيضاً واللون الأول والثاني
Moz
بالنسبة للmoz انت تحتاج فقط تحديد الزاوية ، وان اردت جعل التدرج من الاعلي للأسف لا تحتاج لوضع زاوية ، فقط وضع top واللون
الاول واللون الثاني
الآن لنبدأ في التطبيق العملي .
بالنسبة للwebkit الكود code سيكون :
رمز Code:
-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>)
لنترجم الكود code http://www.thedevdot.com/wordpress/wp-includes/images/smilies/icon_smile.gif اول شئ حددنا نوع التدرج linear اي طولي ثم وضعنا نقطة البداية اعلي اليسار ونقطة النهاية اسفل يسار
واللون الأول ( اللي بالأعلي ) حيكون أسود واللون اللي بالأسفل (اللون الثاني ) حيكون أبيض .
بالنسبة للGecko Engine :
رمز Code:
-moz-linear-gradient(<start> <angle>, <color>, <color>)
حددنا نوع التدرج طولي ، ثم جعلنا نقطة البداية top اي من الأعلي ولون البداية اي اللون في الأعلي هو الأسود واللون في النهاية (اللون الثاني ) هو الأبيض .
الآن سنحصل علي نتيجة مرضية جداً ولكن الألوان طبعاً سيتم تغييرها .
الآن سنواجه مشكلة وهي أن التدرج يأخذ المربع كاملاً من أعلاه إلي أسفله ونحن نريده ان يأخذ حيزاً صغيرا وسيكون مثلاً ٢٥ بكسل
ببساطة بالنسبة للwebkit بعد تحديد نقطة البداية وهي أعلي اليسار وعند تحديد نقطة النهاية نضع يسار ثم نضع المسافة للأسفل
اي مثلاً نريد التدرج ان يبدأ من الأعلي وينزل للأسفل ٢٥ بكسل فقط لا غير ويتوقف والباقي يكون باللون الأبيض كما بالمثال .
وبالنسبة للGecko Engine
فقط بعد تحديد اللون الأول والثاني ضع في النهاية المسافة وهي ٢٥ بكسل
سيكون الكود code :
background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF)); background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
الآن قم بإسناد كل خاصية لكل مربع نصي وستحصل علي النتيجة في الأعلي .
وسيكون الكود code النهائي للملف :
رمز Code:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Learning Tutorials By Khalid Magdy - TheDevDot.CoM</title> <style type="text/css"> body{ direction:rtl; } input, textarea { padding: 9px; border: solid 1px #E5E5E5; outline: 0; font: normal 13px/100% Verdana, Tahoma, sans-serif; width: 200px; background: #FFFFFF url('bg_form.png') left top repeat-x; 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); 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; } textarea { width: 400px; max-width: 400px; height: 150px; line-height: 150%; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; } .form label { margin-left: 10px; color: #999999; } .submit input { width: auto; padding: 9px 15px; background: #617798; border: 0; font-size: 14px; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style></p> <form class="form"> <p class="name"><label for="name">الإسم : </label> <br /> <input id="name" name="name" type="text" /></p> <p class="email"><label for="email">البريد الإلكتروني : </label> <br /> <input id="email" name="email" type="text" /></p> <p class="web"><label for="web">الموقع : </label> <br /> <input id="web" name="web" type="text" /></p> <p class="text"><textarea name="text"></textarea></p> <p class="submit"><input type="submit" value="إرسال" /></p> </form> <p>
أتمني ان يكون الدرس مفصل نال إعجابكم .
الدرس مفصل تمت ترجمته من هذا الدرس مفصل الأجنبي :
Design a Prettier Web Form with CSS 3 | Nettuts+ (http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/)
جميع الحقوق محفوظة لموقع TutsPlus وموقع نقطة مطور
الرجاء عدم النقل بدون ذكر المصدر لأنني تعبت كثيراً في تحضير الدرس مفصل ورفع مثال حي وتعريب الدرس مفصل والصور .
المصدر : تصميم نموذج إتصل بنا بواسطة CSS3 | نقطة مطور (http://www.thedevdot.com/wordpress/?p=123)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته ،
اليوم في درس مفصل جديد من دروس موقع نقطة مطور ، سنعمل علي تصميم نموذج إتصل بنا .
النتيجة :
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/07/css3namooothag-300x285.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/07/css3namooothag.png)
مثال حي :
Learning Tutorials By Khalid Magdy - TheDevDot.CoM (http://www.thedevdot.com/tutorials/css3_contact_us.html)
نتيجة رآآئعة ، وكل هذا بدون إستعمال أي شئ في الفوتوشوب وكل الموضوع عبارة عن أكواد CSS3
الآن لنبدأ .
في البداية سنقوم بوضع هذا الكود code ، وهو بسيط جداً ويقوم بعمل الفورم والزر والأشياء البسيطة .
رمز Code:
<form class="form"> <p class="name"><label for="name">الإسم : </label> <br /> <input id="name" name="name" type="text" /></p> <p class="email"><label for="email">البريد الإلكتروني : </label> <br /> <input id="email" name="email" type="text" /></p> <p class="web"><label for="web">الموقع : </label> <br /> <input id="web" name="web" type="text" /></p> <p class="text"><textarea name="text"></textarea></p> <p class="submit"><input type="submit" value="إرسال" /></p> </form>
الآن النتيجة التي سنراها ستكون عادية جداً ، نموذج إتصل بنا عادي لا يوجد به شئ مميز .
الآن سنضيف بعض التأثيرات البسيطة بالCSS لنجعله أكثر جمالاً .
نضع هذا الكود code في منطقة الhead
الآن لنشرح طريقة الكود code أكثر فأكثر .
حددنا الtextarea واعطيناه بعض الخواص .
الحدود حجمها ١ بكسل وحددنا لها لوناً . وإستخدمنا background-color
لتحديد اللون
ايضاً هنالك خاصية إستخدمناها وهي focus,hover
تضع إسم السيليكتور ثم نقطتين فوق بعضهما :
ثم focus او hover الfocus تعني عند الضغط علي المربع ، الhover تعني عند تمرير الماوس فوقه
وضعنا في حالة تمرير الماوس او الضغط علي المربع يتم تغيير لون الحدود .
وباقي الكود code سهل جداً لا يحتاج لشرح طريقة .
ستحصل علي نتيجة جيدة ، الآن لنقوم بوضع لمساتنا السحرية بالCSS3
سنبدأ بالخاصية الأولي .
box-shadow
ببساطة الظل ، والظل غير متوافر إلا في CSS3
الsyntax الخاص بالظل هو
رمز Code:
box-shadow: <color> <horizontal offset=""> <vertical offset=""> <blur>;
يعني نضع box-shadow ثم اللون ثم المسافة او البعد كما في الفوتوشوب رأسياً وأفقياً وفي النهاية الblur وتعني الحجم وكلما زاد
كلما كان الظل كبيراً ويشغل مساحة أكثر .
إنتهينا من الظل . الآن الكود code سيكون :
رمز Code:
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;
الآن ما لماذا نضع webkit و moz
webkit تستخدم للمتصفحات التي تستخدم webkit engine مثل سافاري وجوجل GOOGLE كروم
moz تستخدم للمتصفحات التي تستخدم محرك Mozilla Gecko Engine مثل موزيلا فايرفوكس
الآن انتهينا من الظل
ندخل للمهم وهو التدرج اللوني ، Graidnt
طبعاً كما نري في النتيجة أن لكل مربع نص تدرج لوني بسيط وجميل ، ويمكنك فعله بالcss بدون الإستعانة بأي برنامج تصميم .
الsyntax :
الsyntax للmoz
Webkit
يختلف التدرج اللوني في الsyntax بين الmoz والwebkit
بالنسبة للwebkit فأنت تحتاج لتحديد نفطة بداية Y:X ونقطة نهاية أيضاً واللون الأول والثاني
Moz
بالنسبة للmoz انت تحتاج فقط تحديد الزاوية ، وان اردت جعل التدرج من الاعلي للأسف لا تحتاج لوضع زاوية ، فقط وضع top واللون
الاول واللون الثاني
الآن لنبدأ في التطبيق العملي .
بالنسبة للwebkit الكود code سيكون :
رمز Code:
-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>)
لنترجم الكود code http://www.thedevdot.com/wordpress/wp-includes/images/smilies/icon_smile.gif اول شئ حددنا نوع التدرج linear اي طولي ثم وضعنا نقطة البداية اعلي اليسار ونقطة النهاية اسفل يسار
واللون الأول ( اللي بالأعلي ) حيكون أسود واللون اللي بالأسفل (اللون الثاني ) حيكون أبيض .
بالنسبة للGecko Engine :
رمز Code:
-moz-linear-gradient(<start> <angle>, <color>, <color>)
حددنا نوع التدرج طولي ، ثم جعلنا نقطة البداية top اي من الأعلي ولون البداية اي اللون في الأعلي هو الأسود واللون في النهاية (اللون الثاني ) هو الأبيض .
الآن سنحصل علي نتيجة مرضية جداً ولكن الألوان طبعاً سيتم تغييرها .
الآن سنواجه مشكلة وهي أن التدرج يأخذ المربع كاملاً من أعلاه إلي أسفله ونحن نريده ان يأخذ حيزاً صغيرا وسيكون مثلاً ٢٥ بكسل
ببساطة بالنسبة للwebkit بعد تحديد نقطة البداية وهي أعلي اليسار وعند تحديد نقطة النهاية نضع يسار ثم نضع المسافة للأسفل
اي مثلاً نريد التدرج ان يبدأ من الأعلي وينزل للأسفل ٢٥ بكسل فقط لا غير ويتوقف والباقي يكون باللون الأبيض كما بالمثال .
وبالنسبة للGecko Engine
فقط بعد تحديد اللون الأول والثاني ضع في النهاية المسافة وهي ٢٥ بكسل
سيكون الكود code :
background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF)); background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
الآن قم بإسناد كل خاصية لكل مربع نصي وستحصل علي النتيجة في الأعلي .
وسيكون الكود code النهائي للملف :
رمز Code:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Learning Tutorials By Khalid Magdy - TheDevDot.CoM</title> <style type="text/css"> body{ direction:rtl; } input, textarea { padding: 9px; border: solid 1px #E5E5E5; outline: 0; font: normal 13px/100% Verdana, Tahoma, sans-serif; width: 200px; background: #FFFFFF url('bg_form.png') left top repeat-x; 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); 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; } textarea { width: 400px; max-width: 400px; height: 150px; line-height: 150%; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; } .form label { margin-left: 10px; color: #999999; } .submit input { width: auto; padding: 9px 15px; background: #617798; border: 0; font-size: 14px; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style></p> <form class="form"> <p class="name"><label for="name">الإسم : </label> <br /> <input id="name" name="name" type="text" /></p> <p class="email"><label for="email">البريد الإلكتروني : </label> <br /> <input id="email" name="email" type="text" /></p> <p class="web"><label for="web">الموقع : </label> <br /> <input id="web" name="web" type="text" /></p> <p class="text"><textarea name="text"></textarea></p> <p class="submit"><input type="submit" value="إرسال" /></p> </form> <p>
أتمني ان يكون الدرس مفصل نال إعجابكم .
الدرس مفصل تمت ترجمته من هذا الدرس مفصل الأجنبي :
Design a Prettier Web Form with CSS 3 | Nettuts+ (http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/)
جميع الحقوق محفوظة لموقع TutsPlus وموقع نقطة مطور
الرجاء عدم النقل بدون ذكر المصدر لأنني تعبت كثيراً في تحضير الدرس مفصل ورفع مثال حي وتعريب الدرس مفصل والصور .
المصدر : تصميم نموذج إتصل بنا بواسطة CSS3 | نقطة مطور (http://www.thedevdot.com/wordpress/?p=123)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
