كيفية إضافة زر "الرجوع إلى الأعلى" إلى مدونه بلوجر




هل رأيت مثل هذا السهم فى أخر الصفحه .  .   .

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

اولا :-   من لوحه تحكم بلوجر  blogger dashboard             
في لوحة تحكم المدونه، انقر على علامة التبويب  " نموذج " أو"المظهر "  ثم انقر على  تعديل   HTML


ثانيا :- ابحث عن علامة    <head > .  .  .   وستكون موجودة بالقرب من أعلى
  الصفحة. يمكنك أيضا البحث عنه، من خلال النقر داخل المربع ثم   ctrl + F
لظهور مربع البحث  .

ثالثا :-  ضع الشفرة التالية أسفل علامة  <head > 


                                للنسخ اضغط     "Select All"  ثم   ctrl + C

رابعا :- 
انتقل إلى علامة التبويب "تخطيط"، ثم انقر على "إضافة أداة". 

لا يهم أين تضع الأداة الخاصة بك، فإنه سيتم عرض تلقائيا في الجزء الاسفل  الأيسر من الشاشة عند التمرير لأسفل.

يفضل اضافته الى التذييل او الفوتر 

خامسا :-  قم بلصق الكود التالي داخل الاداه



    للنسخ اضغط     "Select All"  ثم   ctrl + C
ملحوظه :- الصوره الموجوده فى الرابط 
يمكن تغييرها بالصوره التى ترغبها
كذلك يمكن تغيير الكود  right: 10px    الى   left:10px
فيتم تغييرصوره السهم من اليمين الى الشمال

وهذا كل شيء! لقد انتهيت  . .  الان استمتع بما قمت به
 إذا كان لديك أي أسئلة على الإطلاق، يرجى ترك لي تعليق وأذا اعجبك المنشور  اعمل مشاركه . . .  هذا المنشور موجود فى بعض المدونات الاجنبيه منها
وقد قمت بترجمته بتصرف  

اقرأ المزيد
في ليست هناك تعليقات:

كيف تعمل رابط داخل الصفحة


Draw by Attiya

عندما يفكر معظم الناس في الروابط، يفكرون في ربط صفحتين ويب مختلفتين معا.
 يمكنك استخدام الارتباطات التشعبية لربط اثنين من مشاركات مدونتك، أو مشاركة مدونة وصفحة مقصودة، أو مشاركة مدونة وصفحة منتج، أو تغريدة إلى موقعك على الويب.

ولكن هذا ليس كل شئ يمكن القيام به.
 مع القليل من التغيير والتبديل، يمكنك أيضا إعداد ارتباطات تشعبية لربط المحتوى على نفس الصفحة. 
ربما تحتاج الى عمل  فهرس للمشاركه  الآن، عندما تشير إلى شيء ذكرته  في مكان آخر من تلك المقالة،وفى نفس الصفحه يمكنك ربطه به فعلا - مما يسهل على جمهورك معرفة ما تتحدث عنه
Draw by Attiya

رائع جدا، هذه مقدمه توضح كل شيء . . . لعمل ارتباطات داخل الصفحه اتبع الخطوات الاتيه

أولا :ـ أعط الكائن أو النص الذي تريد ربطه اسم
في سيناريو الربط العادي، فإن الشيء الذي تحتاج إلى الارتباط به  له عنوان  URL خاص به.
ولكن في هذا السيناريو، تكون الصفحة التي تريد ربطها والصفحة التي يكون الرابط فيها واحدة ونفس الشيء - لذا يجب أن تكون هناك اسما لوجهة الرابط
أوصي باستخدام كلمة أو عبارة تصف وجهة الرابط. إذا كنت تستخدم عبارة، يجب ألا تكون هناك مسافات - استخدم الشرطات السفلية بدلا من ذلك
مثال
لنفترض أننا أردنا الربط بمثال لفقره عن الصور والايقونات  في مشاركة.
إليك ما سأستخدمه كاسم لهذا النص
                                 photo_icon 

ثانيا:ـ خذ الاسم الذي اخترته وأدخله في علامة ربط ارتباط HTML  مفتوحة
استبدال القسم الأحمر من العلامة أدناه بالاسم الذي اخترته في الخطوة السابقة

   <"a id="INSERT_NAME_HERE>

ثالثا:ـ ضع علامة  #
  قبل النص أو الكائن الذي تريد الربط به، ثم أضف علامة إغلاق <a>
</a>
يؤدي هذا إلى تعيين موقع الرابط. هذا هو الشكل الذي ستبدو عليه شفرتك الآن

<a id="INSERT_NAME_HERE">  الكائن الذي تريد ربطه. </a>

 رابعا :ـ إنشاء الارتباط التشعبي الذي سوف يأخذك إلى هذا النص أو الكائن
انتقل الآن إلى الجزء الذي تريد تضمين الرابط التشعبي فيه.
 ستحتاج إلى إضافة ترميز هتمل للوصلة التشعبية النموذجية، ولكن في الجزء الذي عادة ما تتضمن فيه عنوان URL، ستدرج  رمز ( # )     ثم اسم الكائن الذي تربطه. وإليك ما يبدو عليه
  <a href="# INSERT_NAME_HERE"> انقر هنا . </a>

Draw by Attiya


 مثال
كثيرا ما نرى فى نهايه كل صفحه هذا الرابط  Back to top
وعند الضغط عليها ننتقل الى اعلى الصفحه . 
هذا راط داخل الصفحه ويمكن ان ننفذه بكل سهوله 
1- نضع هذا الكود 
   <a href="# top"> انقر هنا . </a>

فى اعلى الصفحه او اى مكان نريد الانتقال اليه           
2-  فى المكان الذى نحدده للرابط نضع هذا الكود 
           <a id="top">  Back to top</a>
             لاحظ بكل سهوله تم عمل الرابط داخل الصفحه 
تم الاعتماد فى هذه التدوينه على الترجمه من المواقع الاتيه




Back to top
اقرأ المزيد
في ليست هناك تعليقات:

النسخ من المواقع المحمية

النسخ  من المواقع المحمية

نسخ و لصق بعض السطور أمر شائع جدا.

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

منع إستخدام زر الماوس الأيمن .... right mouse button off


وعند تصفحى للانترنت احتاج الى الاحتفاظ  ببعض العناوين وبعض المقتطفات للرجوع اليها والمشكله التى واجهتها ان العديد من المواقع تقوم بتعطيل  استخدام زر الماوس الأيمن و العديد من المواقع تقوم بتعطيل  CTrl+C
لضمان أمن أفضل ضد المتسللين والمواقع الخبيثة


يستخدم معظم المدونين ومشرفي المواقع تقنية جافا سكريبت لتعطيل النقر بزر الماوس الأيمن، لمنع سرقة المحتوى الخاص بهم.

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

ولكن هناك طرق عديدة من خلال واحده منها يمكن نسخ المحتويات من المواقع المحمية
طرق نسخ النص من الصفحات التى تعطل استخدام زر الماوس الأيمن


ـــ تعطيل عمل جافا سكريبت في المتصفح
ـــ استخدام مواقع البروكسى
ـــ باستخدام عرض شفره المصدر للموقع عن طريقاختيار

                View page source                                  

أولا :-  تعطيل عمل جافا سكريبت في المتصفح غوغل كروم

في متصفح كروم، يمكنك تعطيل جافا سكريبت بسرعة عن طريق الانتقال إلى الإعدادات. انظر لقطة الشاشة للحصول على توضيح أفضل
Setting  >>  Content Settings 
                              <<
Do not allow  run JavaScript                     


ثم حدد عدم السماح لأي موقع بتشغيل جافا سكريبت

وبالمثل إذا كنت تستخدم فايرفوكس، يمكنك إزالة القراد من الخيار "  تمكين جافا سكريبت   "
  
ثانيا:- استخدام مواقع البروكسى
هناك العديد من المواقع البروكسى ، والتي تمكنك من تعطيل جافا سكريبت أثناء التصفح. كل ما تحتاجه هو استخدام تلك المواقع البروكسى ، والتي تقدم هذه الميزات ويمكنك استخدامها بسرعة انقر بزر الماوس الأيمن فوق المواقع المحميه
ومن هذه البروكسى موقع

Secure Proxy Site
وقد تم تجربته .


ثالثا :- من خلال عرض كود المصدر
كل متصفح يوفرخيار عرض كود الصفحة، والتي يمكنك الوصول إليها مباشرة عن طريق النقر بزر الماوس الأيمن.
وهذه الطريقه للمتمرسين  ومن لديهم خبره فى التعامل مع HTML


تم النقل من بعض المواقع باللغه الانجليزيه مثل موقع

shoutmeloud.
                                                           
اقرأ المزيد
في ليست هناك تعليقات:

العلامات الوصفية Meta Tags واهميتها للسيو seo

ما هي العلامات الوصفية؟  . .
What Are Meta Tags?


العلامات الوصفية هي مقتطفات من النص تصف محتوى الصفحة. لا تظهر العلامات الوصفية في الصفحة نفسها، ولكن في شفرة الصفحة فقط. تساعد محركات البحث على معرفة ما هي صفحة الويب                                            
العلامات الوصفية هي أجزاء من نص مرتبط بصفحات الويب. هذه العلامات  توضح ما هي هذه الصفحة وتبينها لمحركات البحث ومستخدميها، ويتم عرضها في محركات البحث. وهي تؤثر في ترتيب الصفحات فىمحركات البحث
أنواع العلامات الوصفية
هناك عدة علامات وصفية مختلفة.
هنا، سنتحدث عن الاربعه التي لها صلة وثيقة ب سيو:
1- علامات العنوان،
2- أوصاف ميتا،
3-  علامات الكلمات الرئيسية.
4- علامات الروبوت.
 وأخيرا، لا تعد علامات ألنص البديل للصوره
  image alt tags                                                   
   من الناحية التقنية علامات وصفية، ولكنها تحقق مهام مماثلة

علامة عنوان العنوان / الصفحة الوصفية هي العلامة الأكثر أهمية، حيث إنها تستخدم لوصف المحتوى على الصفحة وتعطي محركات البحث الكثير من الوزن. يتم عرض المعلومات التي تضعها في هذه العلامة أعلى نافذة المتصفح وهي أيضا ما سيظهر في محرك البحث باعتباره الرابط القابل للنقر إلى موقعك


- علامات العنوان Title tag 
تعتبر علامات العنوان مهمة للغاية بالنسبة إلى تحسين محركات البحث. أنها تظهر 
في علامات تبويب المتصفح
في نتائج محرك البحث - وهذا هو جزء مهم للغاية.
وهذا ايضا  يعني امران.
 الامر الأول: فإن الكلمات في علامة العنوان تخبر غوغل ومحركات البحث الاخرى عن صفحتك. 
الامر الثاني: علامة العنوان هي أول شيء يراه المستخدم عند تصفح صفحات نتائج محرك البحث  SERPs

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

يتم عرض العنوان عادة كعنوان رئيسي قابل للنقر عليه في صفحة نتائج محرك البحث ويسمح للمستخدمين بتقييم مدى ملاءمة الصفحة في بحثهم.
تسمح جوجل ب 8-9 كلمات ( 65 حرفا تقريبا ) ضمن علامة العنوان لنتائج محرك البحث حاول تحديد عنوانك بتسعة كلمات، وتأكد من حصولك على كلماتك الرئيسية في الكلمات التسع الأولى
يجب أن تحتوي كل صفحة على علامة عنوان فريدة لتلك الصفحة تحديدا
 إذا كانت علامة العنوان تعكس المحتوى الموجود في الصفحة، فسيؤدي ذلك إلى تحسين ترتيب محركات البحث حيث سيتم اعتبارها أكثر ملاءمة؛ فتأكد من أن العنوان يصف بدقة محتوى الصفحة التي يرتبط بها من محرك بحث
فكر في نوع كلمات البحث والعبارات التي تتوقعها من الأشخاص الذين يبحثون عن موقعك في محرك بحث لاستخدامه، واستخدام تلك العناوين في عناوين صفحتك
كود علامة العنوان
Title tag code

<head>
<title>Title Tag Goes Here</title>
< head / >

=====================

 علامه الوصف   Meta descriptions  من 150-160 حرفا
                   
يتم عرض أوصاف ميتا أيضا في محركات البحث، لكنها لا تؤثر بشكل مباشر على الترتيب.
 إلا أنها قد تؤثر في نسب النقر.
 من المرجح أن يتم اقتطاع الكلمات أكثر من 160 حرفا للديسك توب و 115 حرفا للموبايل

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

يجب أن يكون الوصف جذابا وموجزا، حيث إن الزائرين المحتملين لصفحتك على الويب سيستخدمون هذه الكلمات لتحديد ما إذا كان يجب عليهم اتباع رابط العنوان 
على الرغم من أن، في رأينا، أنها أقل اهميه بكثير من علامات العنوان، الا أنه ينبغي عدم تجاهلها

وهناك قليل من  الامور التى يجب معرفتها

اولا :- تقوم محركات البحث أحيانا بإنشاء أوصاف ميتا خاصة بها. إذا لم تعجب غوغل وصف ميتا الخاص بك، فإنها قد تولد تلقائيا. كما أنها قد تتغير اعتمادا على البحث. إذا كانت صفحتك تحتوي على معلومات ذات صلة، على سبيل المثال، في نص الصفحة، فقد تعرض غوغل جزءا من النص الذي تراه مناسبا كنص وصفي.

ثانيا :- تعرض العلامات الوصفية التي تحتوي على كلمات رئيسية بخط عريض. في نتيجة البحث

ثالثا:- الناس تمسح صفحات نتائج محرك البحث بحثا عن معلومات محددة جدا غالبا ما تستخدم هذه الأوصاف لتحديد أي نتيجة هى أفضل لاحتياجاتهم

قم بوصف الصفحة بوضوح واحتفظ بالوصف قصير وموجز، لا يزيد طوله عن 150 حرفا
قم بتضمين عبارات الكلمات الرئيسية  بالقرب من بداية الوصف بدون تكرار
إذا لم تقدم بيانات وصفية ، فسيعرض محرك البحث بضعة أسطر من النص من صفحة الويب بدلا من ذلك. قد تعرض غوغل أيضا وصفها الخاص المأخوذ من صفحتك على الويب إذا كانت تعتقد أنها ستكون أكثر ملاءمة من وصفك

كود العلامات الوصفية
Meta description code


<head>
>
meta name="description" content="Meta description"> tag goes here
<head/>


الكلمات الرئيسية
Meta keywords
الكلمات الرئيسية ميتا قديمة، ولا تستخدمها معظم محركات البحث حاليا.

الكلمات الرئيسية هي الكلمات التي يكتبها المستخدمون في محرك بحث عندما يبحثون عن موقع ويب..

في الأيام "القديمة" ( التي تعود إلى عشر سنوات فقط )، استخدمت محركات البحث كلمات رئيسية وصفية لتحديد المحتوى الذي تتناوله. ولكن الإنترنت تغيرت بشكل كبير منذ ذلك الحين: الروبوتات هي أفضل في الزحف و الجوده وفك شفرة المعلومات فى الصفحة.
 كقاعده عامه ان  المحتوى يتحدث عن نفسه،


كود الكلمات الرئيسية
Meta keywords code

<head>
<meta name="keywords" content="keyword, keyword, , etc.">
</head>

علامات الروبوتات
Meta robots
علامات الروبوتات   بسيطة. فهى  تقول لمحركات البحث عما إذا  سيتم "فهرسة" الصفحة وعما إذا  سيتم "متابعة" الصفحة أم لا

*- الفهرسه - افتراضيا، تقوم محركات البحث بفهرسة  الصفحة. وهذا يعني أن محركات البحث يمكنها العثور على الصفحة ووضعها في نتائج البحث.أما الصفحات التي تريدها مخفية من محركات البحث، استخدم   noindex

*- المتابعة - افتراضيا، تقوم محركات البحث بمتابعة  الصفحة. وهذا يعني أن محركات البحث ستقوم بالبحث عن الروابط داخل الصفحة والبدء في الزحف إلى تلك الصفحات المرتبطة. اما الصفحات التي لا تريد اتباعها، استخدم nofollow

 التوصية: السماح لمحركات البحث بفهرسة جميع صفحاتك ومتابعتها، ما لم يكن لديك أسباب محددة لعدم ذلك.
. في معظم الحالات، تعطي لنفسك أفضل فرصة لترتيب، والسماح محركات البحث لفهرسه ومتابعة صفحاتك.




كود علامات الروبوتات
 Meta robots code


<head>
<meta name="robots" content="noindex, nofollow">
</head>

علامات النص بديل الصوره
Image alt tags

في حين أن علامات ألت من الناحية التقنية ليست علامات ميتا، فإنها تخدم غرضا مماثلا.
 كما هو الحال بالنسبة إلى علامات العناوين التي تخبر محركات البحث عن صفحتك، فإن علامات ألت إيماج تخبر محركات البحث بمحتويات صورك.
 قد يتم عرض صور ذات جودة عالية تحتوي على علامات ألت وصفية تحتوي على الكلمات الرئيسية المناسبة في نتائج بحث الصور.

إنشاء علامات بديل تحتوي على كلمات رئيسية ذات صلة بصفحتك. إذا تم عرضها في نتائج محركات البحث، فقد ينقر الباحثون على صورتك، وينقرون على صفحتك، ويصلون إلى موقعك على الويب.



كود علامات النص بديل الصوره
Image alt tags code


<img src="image-file.jpg" alt="Image alt tag description.">


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

 تم الاعتماد فى كتابه هذه التدوينه  على المواقع الاتيه : 
wordstream

metatags.org

 metatagseo.com

logicalseo.net

































اقرأ المزيد
في ليست هناك تعليقات:

تدرج الالوان فى CSS3 ... .اى CSS3 Gradients

تدرج الالوان  فى CSS3
                                         
التدرج هو مزج بين اثنين أو أكثر من الألوان  حيث يكون التحول بين الألوان على نحو سلس.
 هذه التدرجات  مفيده لكل من الخلفية، اللافتات والأزرار و غيرها.





CSS3 Gradients

تدرج الالوان فى

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

* التدرجات الخطية      Linear Gradients

  و أتجاهاتها /تحت / أعلى / يسار / يمين / قطريا

* التدرجات الشعاعية   Radial Gradients

 واتجاهاتها  يحددها مركزها

========================

 المتصفحات التى  تدعم هذه الخاصيه
Attiya

 تظهر من الشكل السابق ان اغلب المتصفحات تدعم هذه االخاصيه
========
التدرج الخطي    Linear Gradients 

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


بناء الجملة

  Syntax

background: linear-gradient(direction, color-stop1, color- stop2, ...);

التدرج الخطى

يبدا  من  اعلى  ألى اسفل   ووهذا هو الافتراضى

Linear Gradient - Top to Bottom  this is default

يوضح المثال التالي التدرج الخطي الذي يبدأ في الأعلى. يبدأ باللون الأحمر، والانتقال إلى اللون الأصفر



تدرج خطى يبدا من اعلى الى اسفل . .

يبدا باللون الاحمر ويتحول الى

اللون الاصفر

الكود


لنسخ الكود . . .      select  All    .  .  . ثم . .   Ctrl + c

التدرج من الشمال الى اليمين و بالعكس

Linear Gradient - Left to Right

وضح المثال التالي التدرج الخطي الذي يبدأ من اليسار الى اليمين  يبدأ باللون الأحمر،والانتقال إلى اللون الأصفر


تدرج خطى يبدا من اليمين الى الشمال . .

يبدا باللون الاحمر ويتحول الى

اللون الاصفر

الكود

لنسخ الكود . . .      select  All    .  .  . ثم . .   Ctrl + c
===
 مثال أخر يبين التدرج الخطي الذي يبدأ من اليمين الى اليسار  يبدأ باللون الأحمر،والانتقال إلى اللون الأصفر



تدرج خطى يبدا من الشمال الى اليمين . .
يبدا باللون الاحمر ويتحول الى
اللون الاصفر


    
لنسخ الكود . . .      select  All    .  .  . ثم . .   Ctrl + c
                                    =====
التدرج القطرى

 Linear Gradient - Diagonal

التدرج الخطي  القطري

يمكنك جعل التدرج قطريا من خلال تحديد كل من لنقطه الانطلاق  الأفقية والرأسية
بأستخدام هذا الكود
(background: linear-gradient(to bottom right, red, yellow

يوضح المثال التالي التدرج الخطي الذي يبدأ في أعلى اليسار ويذهب إلى أسفل اليمين يبدأ الأحمر، والانتقال إلى الأصفر


تدرج قطرى يبدا من اعلى الشمال الى اسفل اليمين . .
يبدا باللون الاحمر ويتحول الى

اللون الاصفر


لنسخ الكود . . .      select  All    .   . ثم . .   Ctrl + c

استخدام الزوايا

Using Angles


إذا كنت تريد المزيد من السيطرة على اتجاه التدرج، يمكنك تحديد زاوية، بدلا من الاتجاهات المحددة مسبقا إلى أسفل، إلى أعلى، إلى اليمين، إلى اليسار، إلى أسفل اليمين، وما إلى ذلك

بناء الجملة

Syntax

background: linear-gradient(angle, color-stop1, color-stop2);

 ;( background: linear-gradient (  deg , red, yellow

وتحدد الزاوية  deg  كزاوية بين خط أفقي وخط تدرج.

يوضح المثال التالي كيفية استخدام الزوايا على التدرجات الخطية:



تدرج قطرى يبدا من اعلى بزاويه 90 درجه . .
يبدا باللون الاحمر ويتحول الى
اللون الاصفر



لنسخ الكود . .    select  All    . . ثم . .   Ctrl + c

Using Multiple Color

استخدام تدرج  لالوان متعددة 
باستخدام الكود الاتى كمثال على تدرج ذو الوان متعدده

 ;( background: linear-gradient ( red, yellow, green

يوضح المثال التالي التدرج الخطي (من أعلى إلى أسفل) مع ألوان متعددة


تدرج من الوان متعدده يبدا باللون الاحمر .

.ويتحول الى اللون الاصفر

ثم اللون الاخضر


يوضح المثال التالي كيفية إنشاء تدرج خطي (من اليسار إلى اليمين) مع لون قوس قزح وبعض النص:



الوان قوس قزح




الشفافة  Transparency                                                                  

تدعم CSS3 أيضا الشفافية، التي يمكن استخدامها

لخلق آثار الخفوت او تلاشى اللون.

 

لإضافة الشفافية، نستخدم الدالة rgba()   لتحديد توقف الألوان.

المعامل الاخيرفى الداله "a " لتحديد الشفافيه و يأخذ قيمه من    

  0 إلى 1، وتحدد شفافية اللون:

حيث ان 0 تشير إلى شفافية كاملة، 1 تشير إلى اللون الكامل بدون شفافية

يتم استخدام هذا الكود
 ;(( background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1
يوضح المثال التالي التدرج الخطي الذي يبدأ من اليسار. ويبدأ شفافة تماما،والانتقال إلى اللون الأحمر الكامل 










  تكرار التدرج الخطي
Repeating a linear-gradient
تم استخدام هذا الكود
;(background: repeating-linear-gradient(60deg,red,yellow 7%,green 10%
للوصول للشكل التالى







                                                          
وتستخدم دالة التكرار الخطية
repeating-linear-gradient() function
 لتكرار التدرجات الخطية
                                         يوضح المثال التالي تكرار التدرج الخطي











اقرأ المزيد
في ليست هناك تعليقات: