تخطيط صفحات الويب ليس فقط إنشاء هيكل ، ولكن أيضا إنشاء تصميم يجذب انتباه المستخدمين. تتمثل إحدى طرق جعل الصفحة مثيرة للاهتمام وغير عادية في تدوير النص بمقدار 90 درجة. في هذه المقالة ، سننظر في كيفية القيام بذلك باستخدام كس.
لتدوير النص بمقدار 90 درجة ، يمكننا استخدام خاصية التحويل: تدوير (). تتيح لك هذه الخاصية ضبط زاوية دوران العنصر بالدرجات. وبالتالي ، لتدوير النص بمقدار 90 درجة ، نقوم ببساطة بتعيين القيمة 90 لخاصية التدوير ().
ومع ذلك ، لكي يتم تدوير النص ، نحتاج أيضا إلى تحديد اتجاه محاذاته. يمكن القيام بذلك باستخدام خاصية وضع الكتابة. من خلال تعيين قيمة رأسية-رل ، نحدد أن النص يجب أن تكون محاذاة عموديا مع الاتجاه من اليمين إلى اليسار.
لتطبيق هذه الأنماط على النص الذي يجب تدويره ، يمكننا استخدام فئة كس منفصلة لهذا العنصر ، أو تطبيق الأنماط مباشرة على العلامة. على سبيل المثال ، لتطبيق الأنماط على جميع الفقرات في الصفحة ، يمكننا استخدام رمز كس التالي:
ص {
وضع الكتابة: عمودي-رل;
تحويل: تدوير (90 درجة);
}
بهذه الطريقة يمكننا بسهولة تدوير النص بمقدار 90 درجة باستخدام كس. هذه طريقة سهلة لجعل صفحة الويب الخاصة بك أكثر أصالة وجاذبية للزوار.
- 90 درجة تخطيط النص باستخدام المغلق
- قم بتدوير النص بمقدار 90 درجة
- كيفية استخدام كس لتخطيط النص في زاوية
- تعلم كيفية إنشاء نص استدارة باستخدام المغلق
- سؤال وجواب
90 درجة تخطيط النص باستخدام المغلق
في بعض الأحيان ، عند إنشاء تصميم موقع ويب ، يصبح من الضروري تدوير النص بمقدار 90 درجة. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، لإنشاء قائمة رأسية أو لإضافة أنماط إلى العناوين.
هناك عدة طرق لتدوير النص بمقدار 90 درجة ، ولكن واحدة من أبسط وأكثر فعالية هو استخدام خاصية تحويل كس مع قيمة تدوير.
في ما يلي مثال على رمز يسمح لك بتدوير النص بمقدار 90 درجة:
يتم تدوير هذا النص 90 درجة
في المثال أعلاه ، تم إنشاء فئة تدوير النص ، والتي تطبق خصائص التحويل ووضع الكتابة واتجاه النص والمساحة البيضاء. نتيجة لذلك ، سيتم تدوير النص داخل العنصر مع فئة تدوير النص 90 درجة عكس اتجاه عقارب الساعة.
تقوم خاصية التحويل: تدوير (90 درجة) بتطبيق دوران 90 درجة للنص. يمكن تغيير قيمة 90 درجة إلى أي زاوية دوران أخرى.
وضع الكتابة: عمودي-رل والنص الاتجاه: خصائص تستقيم تعيين الاتجاه الرأسي للنص. يعد ذلك ضروريا حتى يتم عرض النص عموديا ، وليس جانبيا أو مقلوبا.
تمنع خاصية المساحة البيضاء: نوراب نقل النص إلى سطر جديد. يمكن أن يكون هذا مفيدا بحيث يتم عرض النص في سطر واحد ولا يتداخل مع العناصر المجاورة.
وهكذا ، باستخدام خصائص كس ، يمكنك بسهولة وبسرعة تدوير النص بنسبة 90 درجة. هذه طريقة رائعة لإضافة أنماط مثيرة للاهتمام ومبتكرة إلى موقع الويب الخاص بك.
قم بتدوير النص بمقدار 90 درجة
يمكن أن يكون تدوير النص 90 درجة في كس مفيدا لإنشاء تصميم فريد على صفحة ويب. يمكن استخدام هذا لترتيب العناوين رأسيا أو قائمة العناصر أو أي محتوى نصي آخر.
لتدوير النص بمقدار 90 درجة في كس ، يمكنك استخدام خاصية التحويل. يمكن أن تكون قيمة الخاصية هي وظيفة التدوير ، والتي تحدد زاوية الدوران بالدرجات.
مثال الاستخدام:
النص الذي سيتم تدويره 90 درجة
في المثال أعلاه ، سيتم تدوير النص مع فئة "تدوير النص" 90 درجة. لتدوير عنصر آخر ، ما عليك سوى إضافة هذه الفئة إليه.
إذا كنت بحاجة إلى تدوير النص إلى زاوية مختلفة ، فما عليك سوى تغيير القيمة داخل وظيفة التدوير (). على سبيل المثال ، لتدوير النص بمقدار 45 درجة ، استخدم "تدوير(45 درجة)".
كيفية استخدام كس لتخطيط النص في زاوية
يمكن أن يضيف تخطيط النص بزاوية تأثيرا مرئيا مثيرا للاهتمام إلى صفحة ويب أو تصميم. باستخدام كس يجعل من السهل لتدوير النص في زاوية معينة.
يتم استخدام خاصية التحويل لإنشاء نص تم تدويره في كس. يمكنك استخدام قيمة التدوير لتعيين زاوية دوران النص. على سبيل المثال:
"'المغلق
.تدوير النص {
تحويل: تدوير (90 درجة);
}
«`
تحدد سمة التدوير زاوية دوران النص بالدرجات. في هذا المثال ، يتم استخدام زاوية 90 درجة لتدوير النص عموديا. يمكنك أيضا استخدام قيم الدرجات السالبة لتدوير النص في الاتجاه المعاكس.
لتطبيق نمط التخطيط على نص معين ، تحتاج إلى إضافة فئة إلى العنصر:
"'أتش تي أم أل
يمكنك أيضا تغيير قيمة 90 درجة إلى رقم آخر لتغيير زاوية الدوران.