اخر مواضيع عبدالصمد

عبدالصمد المازغي

مؤسس شركة نجمة بلس، مطور ويب

طريقة عمل تدرج للـborder بـCSS3

السلام عليكم أحبابي في الله، بعد تعلمك أساسيات لغة الـCSS التي سبق و شرحناها على قناة نجمة (من هنا)، يجب عليك أن تبحث أكثر و تتعلم كل جديد هذه اللغة،  مع جميع الميزات الجديدة التي أتت بها الـCSS3، نحن الآن قادرون على بناء المواقع بصور أقل، يعني لعمل تدج ألوان لاحاجة لنا بعمله بالفوتوشوب و رفع الصورة على الموقع، سنقوم بعمله مباشرة باستعمال الـCSS3. اليوم، أصبحت لغة CSS3 أكثر احترافية و تمكنك من عمل أشياء خيالية، تدرجات، انميشن...
في هذا الدرس سنتعرف معا كيف نقوم بعمل تدرج للحدود أو لجوانب العناصر في صفحة HTML مثلا (border) مع العديد من الطرق و التي يمكنك تطبيقها على أي عنصر كان.
1 - أولا، تدرج الألوال من أعلى إلى أسفل العنصر :

2 -  تدرج الألوال من يسار إلى يمين العنصر :

3 -  تدرج الألوال مائل (Diagonal ) :

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

ليست هناك تعليقات:

إرسال تعليق

صفحة نجمة الرسمية

قناة نجمة الرسمية

الأكثر تصفحا

جميع الدورات

{"type":"footer-slider","label":"جميع الدورات","posts_number":"12"}

نجمة :

أحيانًا، عليكَ أن تلقِ نظرة على ماضيك، وتبتسم برضا على ما وصلت إليه