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

سوف نتعلم كيفية استخدام تدرجات ظليه وجمعهم لأستخدامها في خلفية متعددة الصور .. فهل أنت مستعد ؟

ولكن قبل البدأ:

الخطوة الأولي: الخلفيات المتدرجه

قديما كانت هناك طريقة واحده لعمل خلفية متدرجه,وهي بإستخدام الفوتوشوب أو أي برنامج أخر يمكننا أن نستخدم تلك الطريقه عندما نريد عمل خلفيه لموقع كامل عن طريق تعبئة الصوره بلون واحد وعمل طبقه متدرجه وإختيار علي الأقل لونين إضافيين وبإستخدام أداة crop قم بقص جزء من الصوره ثم تكرره بأستخدام cssولكن هذه الطريقه لها عيوب استخدام منها

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

2-يمكنك فقط أن تقوم بعمل تدرجات أفقيه ورأسيه فقط

في الفوتوشوب مثلا نقوم بعمل شيئا من هذا القبيل وهو إختيار لون مرئي من نافذه الألوان

مع css3 صنع خلفيه خطيه كلاسيكيه تحتاج بعض السطور البرمجيه أعلم أنها مرهقه ولكن النتيجه تكون جيده وتستحق
عبارة-moz
LINEAR: -moz-linear-gradient( [ || ,]? , [, ]* )
عبارة-webkit
-webkit-gradient(linear, [, ]?, [, ]? [, ]*)

من المهم الإشارة الي أن التدرج يعتبر خلفيه للصوره وفي هذا المثال سوف نقوم بإنشاء class في المستند

ثم قم بإضافة الكود التالي:

background-repeat:no-repeat;

background-image:-moz-linear-gradient(top, #0096f5, #00416a);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096f5), to(#00416a), color-stop(1,#FFF));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#0096f5, endColorstr=#00416a);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0096f5, endColorstr=#00416a)"; /*To avoid have a blank stripe at the bottom, there are a couple of fixes */
/*background-attachment:fixed;*/ /*Works ok except on IE*/
background-color:#00416a; /*The background will look nice if there’s scroll, adding the bottom color all across the page*/
}
[/html]

المتغيرات الإضافية:

في مجال البرمجيات الرسومية يمكنك تعيين عدة أنواع من الأشكال التدرج عن طريق تغيير عدد الألوان وقف والزوايا ، وأسلوب (خطي / شعاعي).

بواسطة css3 يمكننا أن نحصل علي نفس النتائج

moz عبارة

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

RADIAL: -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

webkit عبارة

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*

لمشاهده التنفيذ اضغط هنا
الخطوة الثالثة: خلفية الصور
بوضوح لا نستطيع الإعتماد فقط علي التدرجات لإنشاء خلفية ولكن أيضا لابد وأن نأخذ بعين الإعتبار الصور كخلفية
css3 تتيح لنا عمل خلفية بصور مع إمكانية تغيير موضعها وحجمها
ولخلفيات متعدده لصوره واحده لابد وأن نقوم بتعريف متغييرين الخلفية وحجم الخلفية والأولي تكون علي كل الخلفيات مع تغيير الموضع والثانيه مع تغيير الحجم
جمله الخلفية
background:
[<url-1> <xpos> <ypos> <repeat-style>],
[<url-2> <xpos> <ypos> <repeat-style>],
[<url-3> <xpos> <ypos> <repeat-style>],
...
[color] ;

background-size:
[<style> || <width-1> <height-1>],
[<style> || <width-2> <height-2>],
[<style> || <width-3> <height-3>],
...
;

هذا مثال بسيط علي خلفية من صورتين وجه مبتسم والأخر حزين مع تغيير الحجم والموضع

لمشاهده المثال اضغط هنا
الخطوة الرابعه: دمج الإثنين معا
الأن تستطيع أن تتعلم التدريج الخطي ويمكن أن تجمعهم معا بdiv واحده
التدريج الخطي يمثل فضاء السماء وأيضا ثلاث سحابات بنفس الشكل ولكن أحجام مختلفه وأيضا هناك جبال ويمكنك أن تضيف أي شكل أخر تريده


والان دعونا نضيف كل هذا في خلفية واحده بكود html
الخطوة الخامسة: العبارةbackground:
[<url-1> <xpos> <ypos> <repeat-style>],
[<url-2> <xpos> <ypos> <repeat-style>],
[<url-3> <xpos> <ypos> <repeat-style>],
...
[gradient] ;

background-size:
[<style> || <width-1> <height-1>],
[<style> || <width-2> <height-2>],
[<style> || <width-3> <height-3>],
...
;

في ملف css ضع أولا الصورة ثم التدريج علي الصورة وقم بعمل الأحجام المختلفه علي الصورة واترك التدرج علي حجم الصورة تلقائي

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