كيف يمكن دمج الالوان في نصوص

8 يوليو 2025

9 يوليو 2025

يمكن ذلك من خلال خاصية background-clip مع text-fill-color أو background-image لتطبيق تدرج ألوان على النص.

وإليك الكود من خلال إستخدام تدرج الألوان (Gradient) هكذا :

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gradient-text {
            font-size: 48px;
            font-weight: bold;
            background: linear-gradient(to right, #ff3333, #96ff33, #9966ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body>
    <h1 class="gradient-text">Build for everyone</h1>
</body>
</html>

حيث إستخدمنا الخاصية linear-gradient .

13 يوليو 2025

يمكنك أن تعتمد على الخصائص التالية

linear-gradient لتطبيق تدرج لوني كخلفية.
background-clip: text: لقص الخلفية بحيث تظهر فقط داخل حدود النص.
color: transparent لجعل لون النص شفافًا لإظهار الخلفية المتدرجة.

أو يمكنك استخدام SVG (Scalable Vector Graphics) وتعتمد هذه الطريقة على رسوميات SVG لتطبيق التدرج حيث يتم تعريف التدرج (مثل linearGradient) داخل وسم <defs> ثم يتم استخدام وسم <text> لعرض النص

وبعدها يتم تعيين خاصية fill للنص لتكون URL التدرج المعرف مسبقًا (fill="url(#gradientID)").

13 يوليو 2025

سأحاول إضافة زر حذف كل ملاحظات ما رأيكم

كيف يمكن دمج الالوان في نصوص

السؤال

Zen Eddin Allaham

3 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف25

عبدالباسط ابراهيم

Zen Eddin Allaham

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية