يعد لون الخط الشفاف طريقة أنيقة وغير عادية لتمييز النص على صفحة الويب. بدلا من الخطوط التقليدية السوداء أو الملونة ، يسمح لك الخط الشفاف برؤية صورة الخلفية أو اللون في المكان الذي يوجد فيه النص. يؤدي هذا إلى إنشاء تأثير مرئي مثير للاهتمام ويمكن استخدامه للتأكيد على أجزاء مهمة من النص أو لإضافة أصالة إلى تصميم الويب.
يمكنك إنشاء لون خط شفاف باستخدام كس. للقيام بذلك ، استخدم خاصية اللون وحدد قيمتها بتنسيق رغبا ، حيث تحدد القيم الثلاث الأولى (الأحمر والأخضر والأزرق) لون النص ، وتحدد القيمة الرابعة (ألفا) شفافية النص.
ملاحظة: يتم تغيير شفافية النص عن طريق تحديد قيمة لقناة ألفا في النطاق من 0 (شفاف تماما) إلى 1 (معتم تماما). كلما انخفضت القيمة ، زادت الشفافية.
على سبيل المثال ، لإنشاء خط بلون أحمر شفاف ، استخدم الكود التالي:
اللون: رغبا (255 ، 0 ، 0 ، 0.5);
تغيير قيم الأحمر والأخضر والأزرق لتتناسب مع اللون المطلوب ، وقيمة ألفا لتحقيق الشفافية المطلوبة. يمكنك أيضا تطبيق لون خط شفاف على عناصر أو فئات معينة عن طريق تحديد المحددات المناسبة قبل خاصية اللون في كس.
- تحديد لون الخط الشفاف
- ما هو لون الخط الشفاف ولماذا هو مطلوب?
- طرق إنشاء لون خط شفاف
تحديد لون الخط الشفاف
عادة ، يتم تحديد لون النص بواسطة خاصية لون كس ، والتي تأخذ قيمة في شكل عرافة ، رغب ، أو اسم اللون. لكن لا يسمح لك أي من هذه التنسيقات بتعيين لون خط شفاف تماما. لحسن الحظ ، مع مساعدة من خصائص كس إضافية مثل التعتيم أو رغبا ، فمن الممكن لتحقيق النتيجة المرجوة.
تتمثل إحدى طرق إنشاء لون خط شفاف في استخدام خاصية التعتيم. يسمح لك بتعيين شفافية عنصر من 0 (شفاف تماما) إلى 1 (معتم تماما). على سبيل المثال ، يحدد رمز كس التالي لون الخط الأسود الشفاف:
مثال:
لنفترض أنك تريد إنشاء لون خط أبيض شفاف. في هذه الحالة ، يجب أن تكون قيمة قناة ألفا في لون رغبا 0 لجعلها شفافة تماما. على سبيل المثال:
مثال:
ضع في اعتبارك أن استخدام خاصية العتامة يؤثر أيضا على شفافية العنصر نفسه ، وليس فقط لون النص. إذا كنت بحاجة إلى تعيين لون شفاف للنص فقط ، فستحتاج إلى استخدام طريقة أخرى ، مثل استخدام خاصية الخلفية والعناصر الزائفة.
ونتيجة لذلك ، يتطلب تحديد لون خط شفاف استخدام خصائص كس إضافية. كن حذرا عند اختيار الطريقة التي تناسبك بشكل أفضل ، اعتمادا على تفاصيل مشروعك ومتطلبات التصميم.
ما هو لون الخط الشفاف ولماذا هو مطلوب?
يمكن استخدام لون الخط الشفاف في مواقف مختلفة:
1. خلق تأثيرات خلط الألوان:
يسمح لك لون الخط الشفاف بإضافة تأثيرات إبداعية إلى تصميم الصفحة. على سبيل المثال ، يمكن وضع نص بلون خط شفاف على صورة ذات خلفية وإنشاء تأثير تراكب يتفاعل فيه النص والصورة ويخلقان تأثيرا مرئيا مثيرا للاهتمام.
2. ترميز وتصميم صفحات الويب:
باستخدام لون الخط الشفاف ، يمكنك تصميم وتصميم عناصر مختلفة من صفحة الويب. على سبيل المثال ، يمكنك إضافة لون خط شفاف إلى قائمة التنقل أو العناوين لجعلها أقل وضوحا ، ولكن لا تزال مرئية.
3. إنشاء كتل نصية متناقضة:
عند إنشاء تصميم متباين ، من المهم مراعاة إمكانية الوصول إلى النص وقابليته للقراءة. باستخدام لون الخط الشفاف ، يمكنك إنشاء كتل بنص يتناقض مع الخلفية ، مع الحفاظ على سهولة القراءة.
يوفر لون الخط الشفاف للمصممين المزيد من الفرص لإنشاء حلول تصميم أصلية ومذهلة ، ويساعد أيضا على تحسين إمكانية قراءة محتوى النص وإمكانية الوصول إليه.
طرق إنشاء لون خط شفاف
يمكن أن يمنحك إنشاء لون خط شفاف لصفحة ويب الفرصة لتصميم النص بطريقة تبدو أكثر أناقة وحداثة. في هذا القسم ، سننظر في عدة طرق لإنشاء لون خط شفاف باستخدام هتمل و كس.
1. باستخدام خاصية التعتيم
يسمح لك بتعيين شفافية العنصر. لإنشاء لون خط شفاف ، يمكنك استخدام هذه الخاصية بقيمة أقل من 1. على سبيل المثال:
نص بلون خط شفاف
معلومات أساسية
لإنشاء لون خط شفاف. تحتاج إلى تعيين لون خلفية العنصر إلى شفاف ، ثم تعيين لون الخط. على سبيل المثال:
الفرق
. على سبيل المثال: