دليل إنشاء مولد النص المتدرج اللوني
مقدمة عن المشروع
مولد النص المتدرج اللوني هو أداة ويب تتيح للمستخدمين إنشاء نصوص بتدرجات لونية جذابة يمكن استخدامها في مواقع الويب أو التصاميم المختلفة.
ويعمل هذا المولد على تقسيم النص المدخل إلى أحرف فردية، ثم يطبق تدرجًا لونيًا يبدأ بلون وينتهي بلون آخر، مع توزيع الألوان بشكل متساوٍ بين الأحرف.
الأدوات والتقنيات المستخدمة
- HTML5
- CSS3
- JavaScript
- Bootstrap 5
- Bootstrap Icons
- Google Fonts
خطوات إنشاء المشروع
-
إعداد الهيكل الأساسي (HTML)
إنشاء هيكل الصفحة الأساسي مع تضمين المكتبات المطلوبة:
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مولد النص المتدرج اللوني</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet"> </head> <body> <div class="container py-5"> <!-- محتوى الصفحة --> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="script.js"></script> </body> </html> -
تصميم الواجهة (CSS)
إضافة التنسيقات الأساسية والمتغيرات اللونية:
:root { --primary-color: #6366f1; --secondary-color: #8b5cf6; --dark-color: #1e293b; --light-color: #f8fafc; } body { font-family: 'Tajawal', sans-serif; background-color: #f1f5f9; } .gradient-title { background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; } -
تطوير الوظائف الأساسية (JavaScript)
معالجة الألوان وإنشاء التدرج اللوني:
// تحويل HEX إلى RGB function hexToRgb(hex) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } // إنشاء التدرج اللوني function createColorRange(c1, c2, count) { let colorList = []; for (let i = 0; i < count; i++) { let ratio = i / (count - 1); let r = Math.round(c1.r + (c2.r - c1.r) * ratio); let g = Math.round(c1.g + (c2.g - c1.g) * ratio); let b = Math.round(c1.b + (c2.b - c1.b) * ratio); colorList.push({r, g, b}); } return colorList; } -
إضافة التفاعلية
ربط الأحداث لإنشاء التدرج عند إدخال النص:
// تحديث المعاينة عند تغيير المدخلات document.getElementById('text-input').addEventListener('input', generateGradient); document.getElementById('color-from').addEventListener('input', updateColors); document.getElementById('color-to').addEventListener('input', updateColors); // نسخ الناتج document.getElementById('copy-btn').addEventListener('click', () => { const code = document.getElementById('output').value; navigator.clipboard.writeText(code); });
التحديات والحلول
توزيع الألوان بشكل متساوٍ
التحدي: توزيع التدرج اللوني على أحرف قد تكون بأطوال مختلفة
الحل: حساب النسبة المئوية لكل حرف في النص الكلي
دعم اللغة العربية
التحدي: مشاكل الاتجاه والخطوط
الحل: استخدام dir="rtl" واختيار خط مناسب مثل Tajawal
نصائح للتطوير المستقبلي
- إضافة خيارات متقدمة مثل اتجاه التدرج (أفقي/عمودي/قطري)
- دعم أنماط تدرج مختلفة (خطية، دائرية، مخصصة)
- إمكانية حفظ التصميمات محليًا أو تصديرها كصورة
- تحسين تجربة المستخدم بإضافة معاينة مباشرة مع التغيير
خاتمة
يمثل هذا المشروع مثالاً جيدًا على كيفية دمج تقنيات الويب الأساسية (HTML, CSS, JavaScript) لإنشاء أداة مفيدة.
كما يمكن توسيع هذا المشروع بعدة طرق ليكون أكثر فائدة، مثل إضافة خيارات متقدمة للتحكم في التدرجات أو دعم التصدير لمختلف الصيغ.