هذا درسين و لكن احببت ان ادمجهما مع بعض لانهما في غاية السهولة

عند إستخدام الطريقتين في عرض عنصر سينعكس ذلك على جمالية ممتازة للعنصر

اولاً سأطبقها على صورة و سأعرض لكم الصورة بحدود حولها و بغير حدود

 

لو أن لدينا هذة الصورة

 

 

الآن كما نرى ان شكلها عادي لانها بدون حدود تبرز شكل الصورة

 

بإمكاننا إستخدام حدود مبدئية لها 

 

في هذا الدرس سنستخدم حدود إحترافية بالـcss3 و سنستخدم بالتحديد الحدود الشفافة او الزجاجية

 

سأقوم بإضافة الكود التالي مع خصائص ستايل الصورة

   border: 8px solid transparent;
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:    0 0 8px rgba(0, 0, 0, 0.3);
	box-shadow:         0 0 8px rgba(0, 0, 0, 0.3);

 

 

الكود السابق يقوم بعرض حدود للصورة بمقاس 8 بيكسل شفاف

و لإنه شفاف لن يظهر لنا لذلك قمت بإضافة ظلال للحد بإستخدام الألوان RGBA لأستفيد من تحديد شفافية الظل

فمن غير المعقول ان يكون الظل معدوم الشفافية

 

لتصبح الصورة

 

 

 

بهذا قمنا بإضافة حد للصورة بشكل لافت للنظر

 

الآن سنتعرف على التدرجات اللونية

و عادة يستخدمها المصممون بمساعدة الفوتوشوب

 

نحن هنا سنستخدمها بالـCSS3

 

الآن سأعرض عليكم تدرج بخمسة ألوان جميلة و سأستخدم الخصائص التالية

 

background-image: -webkit-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:    -moz-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:     -ms-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:      -o-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);

 

الكود السابق يعرض الألوان – البرتقالي الفاتح و من ثم يتدرج الى البرتقالي الغامق و من ثم يتدرج الى الاخضر الفاتح (التفاحي) ومن ثم الى الازرق و آخيراً الى اللون البنفسجي

التدرج سيبدأ من اليسار كما هو واضح بالكود

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

 انظر كيف

 

 

 

بإمكانك إختيار اي لون تريدة يتدرج الى اي لون آخر 

ليس المهم ان تكون خمسة الوان بإمكانك إختيار لونين او ثلاثة او اربعه …. إلخ

 

في المثال السابق اخترت تدرج الألوان من اليسار

الآن سأجربها مع و لكن للأعلى 

 

 

 

قلت في بداية الدرس انه عند إستخدام الطريقتين (الحدود الشفافة – التدرجات اللونية ) لعنصر ما فذلك سيعكس جمالية لا متناهية

 

غالباً ما أستخدمها انا هنا بمدونتي لعرض الاعلانات الخارجية

 

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

و سأستخدم الألوان الخمسة بالمثال السابق

 

اولاً سنطبق نتيجة المثال الاول حينما عرضت صورة بحدود شفافة

و من ثم نصيف إليها هوفر HOVER اي عند مرور الماوس

 

تابع معي

لنفترض ان الصورة معرفها في الـHTML بـ XXXX 

 

<div id="XXXX">
<img src="/images/pulpit.jpg" alt="Pulpit rock"/>

</div>

 

سأستخدم نفس خصائص الستايل للصورة بالمثال الاول و لكن سأضيف مع الحد الشفاف خلفية شفافة

 

#XXXX{background: transparent;
   border: 8px solid transparent;
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:    0 0 8px rgba(0, 0, 0, 0.3);
	box-shadow:         0 0 8px rgba(0, 0, 0, 0.3);}
/*
الآن سنضيف للعنصر خاصية هوفر
*/

#XXXX:hover{ border: 8px solid transparent;
background-image: -webkit-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:    -moz-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:     -ms-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:      -o-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5); }

 

 

جرب مرر الماوس على الصورة

 

 

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

و إضافة تباطؤ زمني عند ظهور التدرجات

و إضافة ضل للحد المتدرج

 

نستخدم الخصائص التالية

 

#bbbb{background: transparent;
   border: 8px solid transparent;
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:    0 0 8px rgba(0, 0, 0, 0.3);
	box-shadow:         0 0 8px rgba(0, 0, 0, 0.3);
-webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
  -moz-box-shadow:    0 0 10px rgba(0,0,0,0.3);}
/*
الآن سنضيف للعنصر خاصية هوفر
*/

#bbbb:hover{ border: 8px solid rgba(98,98,98,0.27);
background-image: -webkit-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:    -moz-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:     -ms-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
	background-image:      -o-linear-gradient(left, #f3a01e, #D05D2A, #9dc425, #4b8db5, #7c48b5);
-webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
  -moz-box-shadow:    0 0 10px rgba(0,0,0,0.3);
  box-shadow:         0 0 10px rgba(0,0,0,0.3);
     -moz-transition: all 0.1s ease-out;
       -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
      -ms-transition: all 0.1s ease-out;
          transition: all 0.1s ease-out; }

 

 

قم بتمرير الماوس لترى

 

 

 

 

 

 

الى هنا انتهى الدرس

قد تكون مدة قرائتك للدرس لا تتعدى 5 دقائق

لكن كتابتي للدرس و تكويد الصور استغرق مني 4 ساعات 

سُعدت بتقديم الدرس  

 

تحديث 

 

كتبت هذا الدرس وانا  مداوم 

مديري كان يراقب و صورني قبل نشر التدوينة  :grin: