انعكاس الخط هو تأثير يمكن أن يجلب عمقا خاصا وواقعية لتصميم موقع ويب أو مشروع رسومي. يسمح للخط أن يبدو كما لو أنه ينعكس على سطح أملس ، مما يخلق تأثيرا للحجم والحركة. في هذه المقالة ، سنخبرك بعدة طرق لإنشاء انعكاس للخط ، بالإضافة إلى مشاركة النصائح المفيدة لمساعدتك في تحقيق التأثير المطلوب.
هناك عدة طرق لإنشاء تأثير انعكاس للخط. واحد منهم هو استخدام كس لتطبيق التحول إلى النص وخلق وهم التفكير. للقيام بذلك ، يمكنك استخدام خاصية التحويل مع مقياس القيمة(-1) لتعكس النص عموديا. هذا الأسلوب يتطلب بعض المعرفة كس ، لكنه يمنحك المزيد من المرونة والسيطرة على انعكاس الخط.
هناك طريقة أخرى لإنشاء تأثير انعكاس وهي استخدام محرر رسومي مثل أدوبي فوتوشوب أو جيمب... يمكنك إنشاء طبقة نص بالخط الخاص بك ثم عكسها للحصول على انعكاس. ثم يمكنك ضبط الشفافية والمعلمات الأخرى للحصول على النوع المطلوب من الانعكاس. هذه الطريقة أسهل في التنفيذ،ولكنها قد تتطلب بعض المهارات في العمل مع محرري الرسوم.
تعتمد أفضل طريقة لإنشاء تأثير انعكاس للخط على تفضيلاتك ومتطلبات المشروع. جرب طرقا مختلفة وجرب للعثور على أفضل خيار لتصميمك.
- باستخدام خاصية النص الظل المغلق
- باستخدام عنصر زائف: بعد
- باستخدام ملف سفغ خارجي
- تطبيق عامل تصفية على النص
- باستخدام قماش هتمل5 لخلق انعكاس
- استخدام جافا سكريبت لإنشاء تأثير انعكاس
- استخدام برامج تحرير الرسوم لإنشاء تأثير انعكاس
باستخدام خاصية النص الظل المغلق
يجب عليك تحديد قيم للوسيطات الثلاث: الإزاحة الأفقية والإزاحة الرأسية ونصف قطر التمويه.
:
ح1 {في هذا المثال ، سيكون للنص مسافة بادئة أفقية ورأسية تبلغ 2 بكسل ، وسيكون له أيضا نصف قطر ضبابي يبلغ 4 بكسل. يتم تعيين لون الظل أيضا باستخدام
استخدام العقار
من المهم أن تتذكر أنه ليست كل المتصفحات تدعم الخاصية بشكل كامل
نص الظل
لذلك ، قبل استخدامه ، يجدر التحقق من التوافق على الأنظمة الأساسية المختلفة.
باستخدام عنصر زائف: بعد
.بعض العناصر {
موضع: نسبي;
}
.بعض العناصر: بعد {
}
في هذا المثال ، اخترنا عنصرا مع فئة.بعض العناصر وجعلت موقعها نسبيا بحيث يكون العنصر الزائف :بعد وضعه بالنسبة لهذا العنصر. ثم قمنا بتعيين موضع العنصر الزائف باستخدام محتوى الخصائص: "" ، الموضع: مطلق ، أسفل: -20 بكسل ، يسار: 0. يمكن تغيير هذه القيم اعتمادا على التخطيط المطلوب.
بعد ذلك ، حددنا الأبعاد والخلفية للعنصر الزائف. يجب أن يكون عرض العنصر الزائف مساويا لـ 100 ٪ من عرض العنصر الأصل (العرض: 100٪) ، والارتفاع يساوي حجم الانعكاس الذي نحتاجه (الارتفاع: 20 بكسل). يتم تعيين الخلفية باستخدام التدرج مع الشفافية لخلق وهم الانعكاس.
بعد تخصيص الأنماط ، يمكنك اختياريا إضافة خصائص أخرى لتخصيص تأثير الانعكاس بشكل أكبر ، مثل الظل أو التمويه.
الآن بعد أن تم إنشاء العنصر الزائف :بعد الأنماط المطلوبة ، سيتم عرض تأثير الانعكاس في العنصر المقابل على صفحة الويب.
باستخدام ملف سفغ خارجي
أولا ، تحتاج إلى إنشاء ملف سفغ مع انعكاس الخط. يمكن تعيين خصائص مختلفة في ملف سفغ ، مثل الحجم واللون وسمك الخط ، الخ. تعتمد خوارزمية إنشاء تأثير الانعكاس على النتيجة المرجوة.
| بعد إنشاء ملف سفغ ، تحتاج إلى لصقه في صفحة ويب باستخدام العلامة | . للقيام بذلك ، حدد المسار إلى الملف في |
|---|---|
السمة سرك . يمكنك أيضا تحديد سمات أخرى ، مثل العرض | و |
الارتفاع لتعيين أبعاد العرض من الرسومات سفغ. نموذج التعليمات البرمجية لاستخدام ملف سفغ خارجي: | |
متصفحك لا يدعم سفغ |
وبالتالي ، باستخدام ملف سفغ خارجي ، يمكنك بسهولة إنشاء تأثير انعكاس للخط. تتيح لك هذه الطريقة تحقيق تأثيرات أكثر تعقيدا وجمالا يصعب تنفيذها باستخدام كس العادية.
تطبيق عامل تصفية على النص
لإنشاء تأثير انعكاس لخط ، يمكنك استخدام عامل تصفية كس-ويبكيت-بوكس-ريفلكس. يتيح لك هذا الفلتر إنشاء انعكاس للعناصر على صفحة الويب.
- لتطبيق عامل تصفية على النص ، يجب عليك أولا تعيين الفئة أو المعرف المناسب لعنصر النص. ثم إضافة نمط باستخدام بكت مربع تعكس الممتلكات وتحديد المعلمات اللازمة لإنشاء انعكاس.
- هنا هو رمز سبيل المثال لإنشاء عامل تصفية انعكاس:
- .ينعكس-نص {
- - بكت مربع-تعكس: أقل من 0 بكسل الخطي التدرج (شفافة ، رغبا(0, 0, 0, 0.3));
- - بكت مربع-تعكس: أقل من 5 بكسل الخطي التدرج (شفافة ، رغبا(0, 0, 0, 0.5));
الوصف
.ينعكس-نص {
}
يطبق مرشح انعكاس من الأسفل مع تعتيم معتدل (0.5)
.ينعكس-نص {
- بكت مربع-تعكس: أقل من 10 بكسل الخطي التدرج (شفافة ، رغبا(0, 0, 0, 0.7));
- }
- يطبق مرشح انعكاس من الأسفل مع تعتيم قوي (0.7)
- عرض تأثير انعكاس الخط على صفحة ويب يمكن أن يتحقق باستخدام هتمل5 قماش. يوفر هتمل5 كانفاس أداة قوية لرسم ومعالجة العناصر الرسومية مباشرة في المتصفح.
- لإنشاء تأثير انعكاس الخط باستخدام قماش هتمل 5 ، اتبع الخطوات التالية:
- إنشاء عنصر قماش: أضف العلامة إلى صفحة الويب الخاصة بك وقم بتعيين معرف فريد لها.
احصل على سياق الرسم: استخدم جافا سكريبت للحصول على سياق الرسم لعنصر اللوحة القماشية. هنا مثال:
فار قماش = وثيقة.جيتليمينتبيد ('ميكانفاس');
فار كتكس = قماش.جيتكونتيكست ('2د');
رسم نص على اللوحة القماشية: استخدم أساليب سياق الرسم لتعيين معلمات الخط وعرض النص على عنصر اللوحة القماشية.
تعكس النص: لإنشاء انعكاس للخط ، ضع نسخة من النص أسفل النص الأصلي واقلبه باستخدام سياق الرسم. للقيام بذلك ، يمكنك استخدام أساليب سياق الرسم مثل كتكس.ترجمة () و كتكس.مقياس (). على سبيل المثال:
سي تي إكس.ترجمة (0 ، قماش.الارتفاع);
سي تي إكس.مقياس (1 ، -1);
سي تي إكس.دراويماج (تكستكانفاس ، 0 ، 0);
تطبيق الآثار: لتحقيق تأثير الانعكاس المطلوب ، يمكنك استخدام تقنيات سياق الرسم مثل كتكس.غلوبالفا لتغيير شفافية التفكير.
باستخدام قماش هتمل5 وتقنيات سياق الرسم المناسبة ، سوف تكون قادرة على خلق تأثيرات انعكاس مختلفة للخط وتعزيز مظهر صفحة الويب الخاصة بك.