منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


الألوان والخلفيات بتقنية css
 

 الألوان والخلفيات بتقنية css

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : الألوان والخلفيات بتقنية css Saudi-10
العمر : 35

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالإثنين نوفمبر 28, 2016 11:20 pm

الألوان والخلفيات

في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:
•color
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
•background

لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML.

فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم
الكود:
<h1>
، المثال أدناه سيقوم بتوضيح كيفية تحويل كل
الكود:
<h1>
إلى اللون الأحمر:


الكود:

   h1 {
      color: #ff0000;
   }
   


الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).

خاصية 'background-color'

خاصية
الكود:
background-color
تحدد لون خلفية أي عنصر.
العنصر
الكود:
<body>
يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر
الكود:
<body>
.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري
الكود:
<body>
و
الكود:
<h1>
.

الكود:

   body {
      background-color: #FFCC66;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   


لاحظ أننا قمنا بتفعيل خاصيتين للعنصر
الكود:
<h1>
وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.

الصورة كخلفية "background-image"

خاصية
الكود:
background-image
تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسوبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
الألوان والخلفيات بتقنية css Butterfly
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر
الكود:
<body>
وحدد مسار الصورة:

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   



انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif").

تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية
الكود:
background-repeat
تتحكم بتكرار الصورة.
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية
الكود:
background-repeat
.
[th]القيمة[/th][th]الوصف[/th][th][/th]
الكود:
Background-repeat: repeat-x
الصورة ستتكرر أفقياً
الكود:
background-repeat: repeat-y
الصورة ستتكرر عمودياً
الكود:
background-repeat: repeat
الصورة ستتكرر أفقياً وعمودياً
الكود:
background-repeat: no-repeat
لن تتكرر بأي شكل
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   


    تثبيت صورة الخلفية "background-attachment"

الخاصية
الكود:
background-attachment
تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية
الكود:
background-attachment
، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
[th]القيمة[/th][th]الوصف[/th][th][/th]
الكود:
Background-attachment: scroll
الصورة ستتحرك مع الصفحة
الكود:
Background-attachment: fixed
الصورة ستبقى ثابتة
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   


    مكان صورة الخلفية "background-position"

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية
الكود:
background-position
تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة
الكود:
background-position
، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
الألوان والخلفيات بتقنية css Figure004

الجدول أدناه يوضح بالمزيد من الأمثلة
[th]القيمة[/th][th]الوصف[/th][th][/th]
الكود:
background-position: 2cm 2cm
هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة
الكود:
background-position: 50% 25%
هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة
الكود:
background-position: top right
هذه الصورة وضعت في أعلى يمين الصفحة
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: right bottom;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   

جمع كل الخصائص "background"

الخاصية
الكود:
background
هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس.
باستخدام
الكود:
background
يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.
فمثلاً يمكن اختصار هذه الأسطر:

الكود:

   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;
   

باستخدام
الكود:
background
يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:

الكود:

   background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
   

القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
الكود:
background-color
|
الكود:
background-image
|
الكود:
background-repeat
|
الكود:
background-attachment
|
الكود:
background-position
إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية
الكود:
background-attachment
و
الكود:
background-position
في المثال:

الكود:

   background: #FFCC66 url("butterfly.gif") no-repeat;
   

الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
1sLaM A7mEd
سوبر الإبداع 

1sLaM A7mEd

ذكر
الاسد
عدد المساهمات : 9940
نقاط النشاط : 11686
السٌّمعَة : 65
بلد العضو : الألوان والخلفيات بتقنية css Egypt10
العمر : 23

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالإثنين نوفمبر 28, 2016 11:21 pm

شكرا لك على الطرح الرائع
و هذه الاكواد المهمة
بارك الله فيكي
بانتظار جديدك دائما
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.anjezweb.com/
Mr.Mohammed
سوبر الإبداع 

Mr.Mohammed

ذكر
عدد المساهمات : 9674
نقاط النشاط : 10588
السٌّمعَة : 174
بلد العضو : الألوان والخلفيات بتقنية css Saudi-10

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالأحد ديسمبر 11, 2016 7:23 pm

شكرا على الموضوع المميز وما تقدمينه للابداع والى الامام دوما
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://tatwer3araby.ahlamontada.com
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : الألوان والخلفيات بتقنية css Lebano10
العمر : 35

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالثلاثاء مارس 21, 2017 2:00 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Princess Abir
عضو ذهبي 

Princess Abir

انثى
الثور
عدد المساهمات : 2130
نقاط النشاط : 2168
السٌّمعَة : 9
بلد العضو : الألوان والخلفيات بتقنية css Algeri10
العمر : 20

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالثلاثاء مارس 21, 2017 2:02 am

طرح مميز يعطيك العافية


الألوان والخلفيات بتقنية css 21484110
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
abuahmad
عضو محترف 

abuahmad

ذكر
السرطان
عدد المساهمات : 1485
نقاط النشاط : 1637
السٌّمعَة : 4
العمر : 54

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالأربعاء مايو 10, 2017 9:12 am

موضوع رائع



وطرح مميز



شكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : الألوان والخلفيات بتقنية css Ioao10
العمر : 37

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالسبت يونيو 16, 2018 11:15 pm

يعطيكم العافية على الطرح الألوان والخلفيات بتقنية css 837876428
كل الاحترام الألوان والخلفيات بتقنية css 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
Mohamed Sobhi
عضو ذهبي 

Mohamed Sobhi

ذكر
الاسد
عدد المساهمات : 3330
نقاط النشاط : 3996
السٌّمعَة : 57
بلد العضو : الألوان والخلفيات بتقنية css Egypt10
العمر : 24

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالسبت يوليو 21, 2018 11:45 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك وردة حمراء


الألوان والخلفيات بتقنية css P_947wjtlk1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : الألوان والخلفيات بتقنية css Ioao10

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالإثنين يوليو 23, 2018 9:03 am

جزاكم الله كل خير 


سبحان الله والحمدلله ولا إله إلا الله 
 
الألوان والخلفيات بتقنية css Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
D.YouSSef
سوبر الإبداع 

D.YouSSef

ذكر
الدلو
عدد المساهمات : 6124
نقاط النشاط : 7079
السٌّمعَة : 34
بلد العضو : الألوان والخلفيات بتقنية css Morocc10
العمر : 52

الألوان والخلفيات بتقنية css Empty
مُساهمةموضوع: رد: الألوان والخلفيات بتقنية css   الألوان والخلفيات بتقنية css Emptyالخميس أغسطس 30, 2018 3:42 am

جزاك الله خيراعلى العطاء
والدرس الجميل والمفيد
 واصل تالقك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
الألوان والخلفيات بتقنية css
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: دروس تعلم لغات البرمجة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020