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

Zen Eddin Allaham · 8 يوليو

محمد_عاطف · 9 يوليو

يمكن ذلك من خلال خاصية 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 يوليو

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

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

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

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

Zen Eddin Allaham · 13 يوليو

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

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

السؤال

Zen Eddin Allaham

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

Recommended Posts

محمد_عاطف

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

Zen Eddin Allaham

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية