درس تركيب خلفيات فوتوشوب Css3

يناير 4th, 2012

1174مشاهدات

لمشاهده المنتج النهائي Demo اضغط

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

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

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

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

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

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

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

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

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

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

[html] [/html]

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

[html] /*Full page linear background */
body.linear{
height:100%;/* To add a full page body CSS3 gradient you need to set this height to 100% */

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>]*

[html]</pre>
<div>
<div><code>/*Gradients*/</code></div>
<div><code> </code><code>.linear_gradient{</code></div>
<div><code> </code><code>background-image</code><code>:-moz-linear-gradient(</code><code>top</code><code>, </code><code>#6f828b</code><code>, </code><code>#122938</code><code>);</code></div>
<div><code> </code><code>background-image</code><code>: -webkit-gradient(linear, </code><code>0%</code> <code>0%</code><code>, </code><code>0%</code> <code>100%</code><code>, from(</code><code>#6f828b</code><code>), to(</code><code>#122938</code><code>), color-stop(</code><code>1</code><code>,</code><code>#FFF</code><code>));</code></div>
<div><code> </code><code>}</code></div>
<div><code> </code><code>.angle_gradient{</code></div>
<div><code> </code><code>background</code><code>: -moz-linear-gradient(</code><code>right</code> <code>top</code> <code>260</code><code>deg, </code><code>#ffe930</code><code>, </code><code>#ed9700</code><code>);</code></div>
<div><code> </code><code>background</code><code>: -webkit-gradient(linear, </code><code>right</code> <code>top</code><code>, </code><code>left</code> <code>bottom</code><code>, from(</code><code>#ffe930</code><code>), to(</code><code>#ffa200</code><code>));</code></div>
<div><code> </code><code>}</code></div>
<div><code> </code><code>.radial_gradient{</code></div>
<div><code> </code><code>background</code><code>: -moz-radial-gradient(</code><code>50%</code> <code>50%</code><code>, </code><code>circle</code> <code>farthest-corner, </code><code>#ff0000</code><code>, </code><code>#a00000</code><code>);</code></div>
<div><code> </code><code>background</code><code>: -webkit-gradient(radial, </code><code>50%</code> <code>50%</code><code>, </code><code>0</code><code>, </code><code>50%</code> <code>50%</code><code>, </code><code>100</code><code>, from(</code><code>#ff0000</code><code>), to(</code><code>#a00000</code><code>));</code></div>
<div><code> </code><code>}</code></div>
<div><code> </code><code>.stops_gradients{</code></div>
<div><code> </code><code>background</code><code>: -moz-linear-gradient(</code><code>top</code><code>, </code><code>#676767</code> <code>0%</code><code>, </code><code>#262626</code> <code>50%</code><code>, </code><code>#1D1D1D</code> <code>50%</code><code>, </code><code>#000000</code> <code>100%</code><code>);</code></div>
<div><code> </code><code>background</code><code>: -webkit-gradient(linear, </code><code>left</code> <code>top</code><code>, </code><code>left</code> <code>bottom</code><code>, from(</code><code>#676767</code><code>), color-stop(</code><code>0.5</code><code>, </code><code>#262626</code><code>), color-stop(</code><code>0.5</code><code>, </code><code>#1D1D1D</code><code>), to(</code><code>#000000</code><code>));</code></div>
<div><code>}</code></div>
</div>
<pre>
[/html]

لمشاهده التنفيذ اضغط هنا
الخطوة الثالثة: خلفية الصور
بوضوح لا نستطيع الإعتماد فقط علي التدرجات لإنشاء خلفية ولكن أيضا لابد وأن نأخذ بعين الإعتبار الصور كخلفية
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>], ... ;

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

[html]</pre>
<div><code>.images{</code></div>
<div><code> </code><code>/*Background Images*/</code></div>
<div><code> </code><code>background</code><code>: </code><code>url</code><code>(images/smile.png) </code><code>50px</code> <code>50px</code> <code>no-repeat</code><code>, </code><code>/* First Smile Face */</code></div>
<div><code> </code><code>url</code><code>(images/smile.png) </code><code>350px</code> <code>200px</code> <code>no-repeat</code><code>, </code><code>/* Second Smile Face */</code></div>
<div><code> </code><code>url</code><code>(images/sad.png) </code><code>500px</code> <code>120px</code> <code>no-repeat</code><code>, </code><code>/* Sad Face */</code></div>
<div><code> </code><code>#000</code><code>; </code><code>/*Color*/</code></div>
<div><code> </code><code>/*Background sizes*/</code></div>
<div><code> </code><code>background-</code><code>size</code><code>: </code><code>auto</code><code>, </code><code>/* First Smile Face */</code></div>
<div><code> </code><code>128px</code> <code>128px</code><code>, </code><code>/* Second Smile Face */</code></div>
<div><code> </code><code>64px</code> <code>64px</code><code>; </code><code>/* Sad Face */</code></div>
<div><code> </code><code>-moz-background-</code><code>size</code><code>: </code><code>auto</code><code>, </code><code>/* First Smile Face */</code></div>
<div><code> </code><code>128px</code> <code>128px</code><code>, </code><code>/* Second Smile Face */</code></div>
<div><code> </code><code>64px</code> <code>64px</code><code>; </code><code>/* Sad Face */</code></div>
<div><code> </code><code>-webkit-background-</code><code>size</code><code>:</code><code>auto</code><code>, </code><code>/* First Smile Face */</code></div>
<div><code> </code><code>128px</code> <code>128px</code><code>, </code><code>/* Second Smile Face */</code></div>
<div><code> </code><code>64px</code> <code>64px</code><code>; </code><code>/* Sad Face */</code></div>
<div><code>}</code></div>
<pre>
[/html]

لمشاهده المثال اضغط هنا
الخطوة الرابعه: دمج الإثنين معا
الأن تستطيع أن تتعلم التدريج الخطي ويمكن أن تجمعهم معا ب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 ضع أولا الصورة ثم التدريج علي الصورة وقم بعمل الأحجام المختلفه علي الصورة واترك التدرج علي حجم الصورة تلقائي

[html]</pre>
<div><code>.</code><code>landscape</code><code>{</code></div>
<div><code> </code><code>/*Background Images*/</code></div>
<div><code> </code><code>background</code><code>: </code><code>url</code><code>(images/cloud.png) </code><code>100px</code> <code>250px</code> <code>no-repeat</code><code>, </code><code>/*First Cloud*/</code> <code>/*images go first*/</code></div>
<div><code> </code><code>url</code><code>(images/cloud.png) </code><code>510px</code> <code>170px</code> <code>no-repeat</code><code>, </code><code>/*Small Cloud*/</code></div>
<div><code> </code><code>url</code><code>(images/cloud.png) </code><code>740px</code> <code>310px</code> <code>no-repeat</code><code>, </code><code>/*Smallest Cloud*/</code></div>
<div><code> </code><code>url</code><code>(images/mountains.png) </code><code>430px</code> <code>340px</code> <code>no-repeat</code><code>, </code><code>/* Mountains */</code></div>
<div><code> </code><code>-moz-linear-gradient(</code><code>top</code><code>, </code><code>#71B1D5</code> <code>0%</code><code>, </code><code>#FFFFFF</code> <code>70%</code><code>, </code><code>#7CB71D</code> <code>70%</code><code>, </code><code>#5E8113</code> <code>100%</code><code>); </code><code>/*Gradient*/</code> <code>/*Gradients go last*/</code></div>
<div><code> </code><code>background</code><code>: </code><code>url</code><code>(images/cloud.png) </code><code>100px</code> <code>250px</code> <code>no-repeat</code><code>, </code><code>/*First Cloud*/</code> <code>/*images go first*/</code></div>
<div><code> </code><code>url</code><code>(images/cloud.png) </code><code>510px</code> <code>170px</code> <code>no-repeat</code><code>, </code><code>/*Small Cloud*/</code></div>
<div><code> </code><code>url</code><code>(images/cloud.png) </code><code>740px</code> <code>310px</code> <code>no-repeat</code><code>, </code><code>/*Smallest Cloud*/</code></div>
<div><code> </code><code>url</code><code>(images/mountains.png) </code><code>430px</code> <code>340px</code> <code>no-repeat</code><code>, </code><code>/* Mountains */</code></div>
<div><code> </code><code>-webkit-gradient(linear, </code><code>left</code> <code>top</code><code>, </code><code>left</code> <code>bottom</code><code>, from(</code><code>#71B1D5</code><code>), color-stop(</code><code>0.7</code><code>, </code><code>#FFFFFF</code><code>), color-stop(</code><code>0.7</code><code>, </code><code>#7CB71D</code><code>), to(</code><code>#5E8113</code><code>));</code><code>/*Gradient*/</code></div>
<div><code> </code><code>/*Background sizes*/</code></div>
<div><code> </code><code>background-</code><code>size</code><code>: </code><code>auto</code><code>, </code><code>/*First Cloud*/</code></div>
<div><code> </code><code>165px</code> <code>50px</code><code>, </code><code>/*Small Cloud*/</code></div>
<div><code> </code><code>105px</code> <code>30px</code><code>, </code><code>/*Smallest Cloud*/</code></div>
<div><code> </code><code>auto</code><code>, </code><code>/*Mountains*/</code></div>
<div><code> </code><code>auto</code><code>; </code><code>/*Gradient*/</code></div>
<div><code> </code><code>-moz-background-</code><code>size</code><code>: </code><code>auto</code><code>, </code><code>/*First Cloud*/</code></div>
<div><code> </code><code>165px</code> <code>50px</code><code>, </code><code>/*Small Cloud*/</code></div>
<div><code> </code><code>105px</code> <code>30px</code><code>, </code><code>/*Smallest Cloud*/</code></div>
<div><code> </code><code>auto</code><code>, </code><code>/*Mountains*/</code></div>
<div><code> </code><code>auto</code><code>; </code><code>/*Gradient*/</code></div>
<div><code> </code><code>-webkit-background-</code><code>size</code><code>:</code><code>auto</code><code>, </code><code>/*First Cloud*/</code></div>
<div><code> </code><code>165px</code> <code>50px</code><code>, </code><code>/*Small Cloud*/</code></div>
<div><code> </code><code>105px</code> <code>30px</code><code>, </code><code>/*Smallest Cloud*/</code></div>
<div><code> </code><code>auto</code><code>, </code><code>/*Mountains*/</code></div>
<div><code> </code><code>auto</code><code>; </code><code>/*Gradient*/</code></div>
<div><code>}</code></div>
<pre>
[/html]

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

Tags درس،تصميم،خلفيات،مركبة،فوتوشوب،css3

عن مدهش

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

اضف رد

انقر هنا لإلغاء الرد.