الخط هو عنصر أساسي في تصميم الويب. يحدد مظهر النص على صفحة الويب ويمكن أن يؤثر بشكل كبير على الانطباع العام للموقع. أحد تأثيرات الخط الأكثر إثارة للاهتمام هو تأثير "حرف على حرف" ، عندما تتداخل الحروف في الكلمة مع بعضها البعض. يعطي هذا التأثير النص مظهرا فريدا ويجذب انتباه القارئ.
يمكنك إنشاء تأثير الخط حرف على حرف باستخدام خاصية كس النص السكتة الدماغية. تتيح لك هذه الخاصية إضافة مخطط تفصيلي للحروف ، مما يسمح لك بإنشاء وهم التداخل. على سبيل المثال ، لجعل تأثير على الوجهين ، يمكنك تطبيق ضربة مزدوجة-واحدة رقيقة وسميكة واحدة. سيكون هذا التأثير مرئيا بشكل خاص في العناوين الرئيسية الكبيرة.
النص السكتة الدماغية: 1 بكسل الصلبة #000000;
نص السكتة الدماغية: 5 بكسل مزدوج # 000000;
نص السكتة الدماغية: 2 بكسل منقط #000000;
من المهم ملاحظة أن خاصية حد النص غير مدعومة بعد في جميع المتصفحات ، لذلك يجدر التحقق من توافقها قبل تطبيقها.
- تقنيات لخلق تأثير الخطوط المتداخلة
- استخدام خاصية وضع المزيج
- تطبيق العناصر الزائفة:: قبل و:: بعد
- الجمع بين خطوط متعددة في عنصر واحد
تقنيات لخلق تأثير الخطوط المتداخلة
يمكن أن يمنح إنشاء تأثير تداخل الخط نصوصك مظهرا أكثر ديناميكية وإثارة للاهتمام. هناك عدة طرق لتحقيق ذلك باستخدام كس.
- 1. تتيح لك خاصية ظل النص المغلق إضافة ظل إلى النص وإنشاء تأثير تداخل الخط. يمكنك تعيين قيم متعددة لهذه الخاصية لإنشاء تأثير أكثر تعقيدا.
- 2. تتيح لك خاصية كس الخلفية كليب تحديد مناطق العنصر التي سيتم تطبيق صورة الخلفية أو اللون عليها. إذا قمت بتعيين القيمة على نص ، فسيتم تطبيق الخلفية فقط على النص ، مما سيخلق تأثير الخطوط المتداخلة.
- 3. الخاصية المغلق مزيج مزيج الوضع يسمح لك لتحديد طريقة لخلط الألوان التي تتداخل. إذا قمت بتعيين القيمة على الضرب ، فستمتزج ألوان النص أدناه مع ألوان النص أعلاه.
- 4. يؤدي استخدام صورة خلفية أو تدرج مع نسيج شفاف يتداخل مع النص أيضا إلى إنشاء تأثير الخطوط المتداخلة.
باختيار إحدى هذه الطرق أو دمجها ، يمكنك إنشاء تأثير تداخل خط فريد وجذاب لموقعك على الويب.
استخدام خاصية وضع المزيج
واحدة من السمات الأكثر إثارة للاهتمام ومذهلة من الخاصية مزيج مزيج واسطة هو خلق تأثير الخط من الحروف فوق بعضها البعض. للقيام بذلك ، يكفي تعيين القيمة المناسبة لخاصية وضع مزيج المزيج لعنصر النص.
القيم المتاحة للخاصية مزيج مزيج واسطة:
عادي: هذه هي القيمة الافتراضية وتعني أن العنصر لن يرث ألوان وشفافية العنصر الأصلي.
مضاعفة: يعتمد التأثير على ضرب ألوان العناصر الأم والطفل ، مما يؤدي إلى تأثير غامق وعميق.
الشاشة: يتم إخفاء ألوان العناصر الأصل والعنصر الفرعي خلف بعضها البعض عن طريق الضرب في 1 مطروحا منه قيمة العنصر الأصل أو العنصر الفرعي. والنتيجة هي تأثير خفيف ولطيف.
تراكب: يتم خلط ألوان العناصر الأم والطفل باستخدام مزيج من الضرب والشاشة ، مما يخلق تأثيرا متباينا.
تغميق: يعتمد التأثير على اختيار اللون الأغمق من عنصرين.
تفتيح: يعتمد التأثير على اختيار اللون الأفتح من عنصرين.
يمكن تحقيق تأثير خطوط الحروف فوق بعضها البعض عن طريق تعيين وضع مزيج المزيج: مضاعفة الخاصية لعنصر مع نص ووضعه فوق عنصر آخر من نفس الحجم.
مثال على استخدام خاصية وضع المزيج:
عنصر النص من السطح
كس لديه القدرة على إضافة محتوى إضافي إلى العناصر دون استخدام العلامات أو تغيير رمز هتمل. يمكن القيام بذلك باستخدام العناصر الزائفة ::قبل و:: بعد.
بناء الجملة وتطبيق العناصر الزائفة هو كما يلي:
العنصر:: قبل {
موضع: مطلق;
أعلى: -2 بكسل;
اليسار :-2 بكسل;
اللون: #000;
وتجدر الإشارة إلى أنه لكي تعمل العناصر الزائفة بشكل صحيح ، يجب عليك تحديد خاصية المحتوى ، والتي تشير إلى ما سيتم عرضه على العنصر الزائف.
باستخدام العناصر الزائفة:: قبل و ::بعد يسمح لك لإضافة وأسلوب عناصر إضافية دون تغيير موقع المحتوى الرئيسي ودون استخدام علامات هتمل إضافية. العناصر الزائفة هي أداة قوية لإنشاء تأثيرات تصميم الويب المختلفة.
- الجمع بين خطوط متعددة في عنصر واحد
- يمكن تحقيق تأثير الخط للأحرف فوق بعضها البعض من خلال الجمع بين خطوط مختلفة في عنصر واحد. للقيام بذلك ، تحتاج إلى استخدام خاصية كس
- الخط الأسرة
.
- يوجد أدناه مثال على رمز كس يوضح كيفية دمج خطوط مختلفة:
- أريال
- هلفتيكا
تايمز نيو رومان