يتضمن تصميم الويب العديد من العناصر ، بما في ذلك كتل النص. من المهم أن تكون قادرا على التحكم في موقع النص ومظهره على صفحة الويب من أجل إنشاء تصميم جذاب وضمان سهولة الاستخدام.
المغلق (أوراق الأنماط المتتالية ، أوراق الأنماط المتتالية) يوفر إمكانيات واسعة للعمل مع النص. يمكنك استخدامه لتعيين الحجم واللون والخط والموضع والخصائص الأخرى للنص. وبالإضافة إلى ذلك ، كس يوفر طرق مختلفة لنقل النص في جميع أنحاء الصفحة.
الخصائص الرئيسية التي تسمح لك لنقل النص في كس تشمل الهامش ، الحشو ، الموقف ، وغيرها. باستخدام هذه الخصائص ، يمكنك التحكم في المسافة البادئة للنص من حواف الكتلة ، وموقعها بالنسبة للعناصر الأخرى ، بالإضافة إلى إنشاء تأثيرات مثيرة للاهتمام في التصميم.
تتمثل إحدى طرق نقل النص في كس في استخدام خاصية محاذاة النص. يسمح لك بمحاذاة النص إلى الحافة اليسرى أو اليمنى أو الوسطى أو ذات الوجهين للكتلة. على سبيل المثال ، إذا كنت ترغب في محاذاة النص إلى وسط الصفحة ، تحتاج فقط إلى إضافة السطر التالي إلى نمط كس: محاذاة النص: مركز;
- الخصائص الأساسية لحركة النص في كس
- نقل النص باستخدام خاصية التحويل-الترجمة
- تحريك حركة النص باستخدام خاصية الرسوم المتحركة
- حركة النص السلس باستخدام خاصية الانتقال
- سؤال وجواب
- ما هي الخصائص التي يمكنني استخدامها لنقل النص في المغلق?
- كيف تعمل خاصية الهامش لحركة النص?
- كيف يمكنني استخدام الخاصية موقف لنقل النص?
- ما هي الطرق لتحويل النص في المغلق?
- ما هي الخصائص التي يمكن تحريك حركة النص في المغلق?
الخصائص الأساسية لحركة النص في كس
كس لديها العديد من الخصائص الأساسية التي تسمح لك لتغيير موقف وحركة النص على صفحة ويب. تتيح لك هذه الخصائص إنشاء تأثيرات ورسوم متحركة مثيرة للاهتمام ، مما يجعل الموقع أكثر جاذبية للزوار.
تحويل (تحويل)
تتيح لك خاصية التحويل تغيير موضع العنصر وحجمه ودورانه وإمالته. باستخدام هذه الخاصية ، يمكنك نقل النص إلى أي مكان على الصفحة ، وكذلك تدويره إلى زاوية محددة. مثال الاستخدام:
ص {
تحويل: ترجمة (100 بكسل ، 50 بكسل) تدوير (45 درجة);
}
الرسوم المتحركة
تتيح لك خاصية الرسوم المتحركة إضافة رسوم متحركة إلى عنصر ما. باستخدام هذه الخاصية ، يمكنك إنشاء تأثيرات حركة النص ، مثل المظهر السلس أو نقل النص في دائرة. مثال الاستخدام:
ص {
الرسوم المتحركة-الاسم: نقل;
الرسوم المتحركة-المدة: 2 ثانية;
الرسوم المتحركة-التكرار-العد: لانهائي;
}
@إطارات مفتاحية نقل {
0% {
تحويل: ترانسلاتكس (0);
}
50% {
تحويل: ترانسلاتكس (200 بكسل);
}
100% {
تحويل: ترانسلاتكس (0);
}
}
نقل (موقف)
تسمح لك خاصية الموضع بتعيين موضع عنصر على الصفحة. باستخدام هذه الخاصية ، يمكنك نقل النص مسافة معينة بالنسبة إلى العنصر الأصل أو بالنسبة إلى عنصر آخر. مثال الاستخدام:
ص {
موضع: نسبي;
أعلى: 20 بكسل;
اليسار: 50 بكسل;
}
التظليل (نص الظل)
تتيح لك خاصية ظل النص إضافة ظل إلى النص. باستخدام هذه الخاصية ، يمكنك إنشاء تأثير حجمي أو جعل النص أكثر تعبيرا. مثال الاستخدام:
ص {
نص الظل: 2 بكسل 2 بكسل 4 بكسل رغبا (0 ، 0 ، 0 ، 0.5);
}
هذه الخصائص ليست سوى جزء صغير من الاحتمالات التي توفرها كس لتغيير موقف وحركة النص. استخدامها بشكل خلاق لجعل موقع الويب الخاص بك فريدة وجذابة!
نقل النص باستخدام خاصية التحويل-الترجمة
تتيح لك خاصية التحويل والترجمة نقل العناصر على صفحة الويب. هذه خاصية مفيدة للغاية تستخدم غالبا لإنشاء رسوم متحركة أو تغيير موضع العناصر استجابة لتفاعل المستخدم.
يبدو بناء جملة خاصية التحويل والترجمة كما يلي:
تحويل: ترجمة (س ، ص);
حيث تشير القيمة س إلى الإزاحة الأفقية وتشير القيمة ص إلى الإزاحة الرأسية. يمكنك أيضا تحديد قيمة واحدة فقط ، مما سيؤدي إلى حركة في بعد واحد فقط.
يمكن تعيين القيم بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات قياس أخرى مقبولة.
مثال على استخدام خاصية التحويل والترجمة:
في المثال أعلاه ، تم إنشاء كتلة مع فئة "المربع" ، والتي يبلغ عرضها وارتفاعها 200 بكسل ولون خلفية الضوء الأزرق. يتم نقل الكتلة إلى اليمين بمقدار 50 بكسل وهبوطا بمقدار 50 بكسل باستخدام خاصية التحويل-الترجمة.
باستخدام خاصية التحويل-الترجمة ، يمكنك أيضا استخدام القيم التي تشير إلى إزاحة عنصر نسبة إلى موضعه الحالي. على سبيل المثال ، ستحرك القيمة "ترجمة(50 ٪ ، 50٪)" العنصر بنسبة 50 ٪ من عرضه و 50 ٪ من ارتفاعه.
يسمح لك استخدام القيم السالبة في خاصية التحويل والترجمة بنقل العناصر في اتجاهين متعاكسين. على سبيل المثال ، القيمة "تحويل: ترجمة (-50 بكسل ، -50 بكسل) ؛" سينقل العنصر 50 بكسل إلى اليسار وأعلى بالنسبة إلى موضعه الأولي.
يمكنك أيضا استخدام خاصية التحويل والترجمة لتحريك حركة العناصر على صفحة الويب. للقيام بذلك ، يتم استخدام الكلمات الرئيسية أو الوظائف لتعيين نعومة ومدة الرسوم المتحركة.
مثال على الرسوم المتحركة لتحريك عنصر باستخدام خاصية التحويل والترجمة:
في المثال أعلاه ، تم إنشاء كتلة مع فئة "مربع" ، والتي ، عندما يتم تمرير مؤشر الماوس فوقها باستخدام خاصية التحويل-الترجمة ، سوف تتحرك 100 بكسل إلى اليمين وإلى أسفل في 2 ثانية مع نعومة التي وضعتها وظيفة "سهولة في الخروج".
وبالتالي ، فإن خاصية التحويل والترجمة هي أداة قوية تسمح لك بتغيير موضع العناصر على صفحة الويب وإنشاء رسوم متحركة مثيرة للاهتمام.
تحريك حركة النص باستخدام خاصية الرسوم المتحركة
كس لديه خاصية الرسوم المتحركة التي تسمح لك لإنشاء الرسوم المتحركة للنص. باستخدام هذه الخاصية ، يمكنك تعيين معلمات رسوم متحركة متنوعة ، مثل المدة والتأخير وعدد التكرارات والمزيد.
لاستخدام خاصية الرسوم المتحركة ، تحتاج إلى استخدام إطارات مفتاحية. تحدد الإطارات الرئيسية حالة الرسوم المتحركة في نقاط زمنية مختلفة. على سبيل المثال ، يمكنك تعيين حالتي البداية والنهاية للنص أو إضافة حالات وسيطة.
مثال على استخدام خاصية الرسوم المتحركة:
.أنيم-نص {
الرسوم المتحركة: موفيتكست 3 ثانية لانهائية;
}
تضمين التغريدة
0% {
تحويل: ترانسلاتكس (0);
}
50% {
تحويل: ترانسلاتكس (100 بكسل);
}
100% {
تحويل: ترانسلاتكس (0);
}
}
- في المثال المعطى ، إلى الفصل .أنيم-نص يحدد الرسوم المتحركة اسمه موفيتكست ، والتي سوف تستمر 3 ثوان ، وسوف يكرر إلى أجل غير مسمى (تعليمات لانهائية).
- يتم تعيين ثلاث حالات الرسوم المتحركة في @إطارات مفتاحية:
- 0 ٪ — الحالة الأولية: سيكون النص في مكانه;
50 ٪ — الحالة الوسيطة: سيتم تحويل النص إلى اليمين بمقدار 100 بكسل;
100 ٪ — الحالة النهائية: سيعود النص إلى موضعه الأولي.
لتطبيق الرسوم المتحركة على عنصر, تحتاج إلى إضافة .أنيم-فئة النص لهذا العنصر.
تسمح لك قيمة خاصية التحويل بتطبيق التأثيرات على العناصر ، وفي هذه الحالة نستخدم تأثير إزاحة النص الأفقي باستخدام وظيفة الترجمة (). القيمة 0 تعني عدم وجود إزاحة ، و 100 بكسل تعني إزاحة 100 بكسل.
وبالتالي ، بفضل خاصية الرسوم المتحركة والإطارات الرئيسية ، يمكنك بسهولة إنشاء رسوم متحركة لحركة النص والعناصر الأخرى في كس.
حركة النص السلس باستخدام خاصية الانتقال
طريقة واحدة لنقل النص في كس هو استخدام خاصية الانتقال. تتيح لك هذه الخاصية تعيين انتقال سلس من حالة عنصر إلى آخر.
لتطبيق الانتقال إلى نص ، يمكنك استخدام أي خاصية تحدد موضعها أو حجمها. على سبيل المثال ، يمكنك تطبيق الانتقال إلى الخاصية اليسرى أو العلوية لنقل النص أفقيا أو رأسيا ، على التوالي.
لتعيين الرسوم المتحركة لحركة النص ، يجب عليك تحديد قيم الحالات الأولية والنهائية للعنصر ، وكذلك الوقت الذي يجب أن يحدث فيه الانتقال. يمكن القيام بذلك باستخدام خصائص مختلفة ، على سبيل المثال ، يسار أو أعلى لتعيين الموضع.
مثال على استخدام خاصية الانتقال لنقل النص بسلاسة:
مرر مؤشر الماوس فوق النص لنقله بسلاسة.
نقل النص
في هذا المثال ، يتم تعيين عنصر مع فئة النص المتحرك إلى حالته الأولية باستخدام الخاصية اليسرى: 0 ، والتي تشير إلى أن العنصر موجود في بداية الحاوية الأصل. عند تحريك المؤشر فوق عنصر ، يكون هناك انتقال سلس إلى مجموعة الحالة النهائية باستخدام الخاصية اليسرى: 200 بكسل. وقت الانتقال هو 1 ثانية ، وتحدد وظيفة السهولة التسارع السلس وتباطؤ الحركة.
وبالتالي ، باستخدام خاصية الانتقال ، يمكنك تحقيق حركة نصية سلسة في كس. تتيح لك هذه الطريقة إنشاء عناصر تفاعلية تستجيب لإجراءات المستخدم ولها تأثير متحرك.
سؤال وجواب
ما هي الخصائص التي يمكنني استخدامها لنقل النص في المغلق?
في كس ، يمكنك استخدام خصائص مختلفة لحركة النص ، على سبيل المثال: الهامش ، الحشو ، الموقف ، تحويل.
كيف تعمل خاصية الهامش لحركة النص?
تتيح لك خاصية الهامش تعيين هوامش حول النص ، وبالتالي تغيير موضعه على الصفحة.
كيف يمكنني استخدام الخاصية موقف لنقل النص?
تسمح لك خاصية الموضع بتعيين موضع النص على الصفحة باستخدام القيم: ثابت ، نسبي ، مطلق ، ثابت.
ما هي الطرق لتحويل النص في المغلق?
هناك عدة طرق لتحويل النص إلى كس ، على سبيل المثال: نقل (ترجمة) ، مقياس (مقياس) ، تدوير (تدوير) ، إمالة (انحراف).