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

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


إضافة مؤثرات على الروابط تقنية css
 

 إضافة مؤثرات على الروابط تقنية css

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

JoryAbdallah

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

إضافة مؤثرات على الروابط تقنية css Empty
مُساهمةموضوع: إضافة مؤثرات على الروابط تقنية css   إضافة مؤثرات على الروابط تقنية css Emptyالإثنين نوفمبر 28, 2016 11:31 pm

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

ما هي الفئة المزيفة؟

الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML.
لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم
الكود:
<a>
لذلك يمكننا أن نستخدم
الكود:
a
كمنتقي في CSS:

الكود:

   a {
      color: blue;
   }
   

الرابط له عدة حالات، فمثلاً يمكن أن يزوره المستخدم أو لا يفعل، لذلك يمكنك أن تستخدم فئة مزيفة لكي تحدد شكلاً مختلفاً للرابط الذي زاره المستخدم عن الرابط الذي لم يزره بعد.

الكود:

   a:link {
      color: blue;
   }

   a:visited {
      color: red;
   }
   

استخدم
الكود:
a:link
و
الكود:
a:visited
للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي
الكود:
a:active
أما
الكود:
a:hover
فهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط.
سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة.

الفئة المزيفة: link

الفئة المزيفة
الكود:
:link
تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها.
في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح.

الكود:

   a:link {
      color: #6699CC;
   }
   



الفئة المزيفة: visited

الفئة المزيفة
الكود:
:visited
تستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق:

الكود:

   a:visited {
      color: #660099;
   }
   



الفئة المزيفة: active

الفئة المزيفة
الكود:
:active
تستخدم للروابط النشطة.
في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء:

الكود:

   a:active {
      background-color: #FFFF00;
   }
   



الفئة المزيفة: hover

الفئة المزيفة
الكود:
:hover
تستخدم عندما يكون مؤشر الفأرة فوق الرابط.
يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل:

الكود:

   a:hover {
      color: orange;
      font-style: italic;
   }
   



المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط

هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط، لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة
الكود:
:hover
.

مثال 1أ: وضع مسافات بين الحروف

الكود:
letter-spacing
، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:

الكود:

   a:hover {
      letter-spacing: 10px;
      font-weight:bold;
      color:red;
   }
   



مثال 1ب: الحروف الكبيرة والصغيرة

الكود:
text-transform
والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط:

الكود:

   a:hover {
      text-transform: uppercase;
      font-weight:bold;
      color:blue;
      background-color:yellow;
   }
   



في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب!

مثال 2: إزالة السطر من أسفل الرابط

أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟
يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك.
على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في الدرس 5 الخاصية
الكود:
text-decoration
يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية
الكود:
text-decoration
.

الكود:

   a {
      text-decoration:none;
   }
   

يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط:

الكود:

   a:link {
      color: blue;
      text-decoration:none;
   }

   a:visited {
      color: purple;
      text-decoration:none;
   }

   a:active {
      background-color: yellow;
      text-decoration:none;
   }

   a:hover {
      color:red;
      text-decoration:none;
   }
   



ملخص

في هذا الدرس تعلمنا الفئة الزائفة، واستخدمنا بعض الخصائص من الدروس السابقة، هذا يجب أن يعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تقدمها.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.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:03 am

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


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

abuahmad

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

إضافة مؤثرات على الروابط تقنية css Empty
مُساهمةموضوع: رد: إضافة مؤثرات على الروابط تقنية css   إضافة مؤثرات على الروابط تقنية css Emptyالأربعاء مايو 10, 2017 9:10 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:38 am

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

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