يعد إنشاء سهم باستخدام كس طريقة سهلة وفعالة لإضافة عنصر زخرفي إلى موقع الويب الخاص بك. يمكن استخدام الأسهم للإشارة إلى الاتجاه أو إبراز العناصر المهمة أو ببساطة لإنشاء تصميم مثير للاهتمام.
في هذه المقالة ، سنلقي نظرة على دليل خطوة بخطوة لإنشاء سهم باستخدام كس. سنلقي نظرة على طرق مختلفة لإنشاء الأسهم ، بما في ذلك الأسهم ذات الزاوية المستديرة والأسهم ذات اللونين وأسهم الظل.
الخطوة 1: قم بإنشاء عنصر هتمل يحتوي على سهم. يمكنك استخدام أي عنصر هتمل ، على سبيل المثال,
أو. أضف فئة أو معرفا إلى هذا العنصر لتسهيل التصميم.
الخطوة 2: إضافة أنماط للعنصر الخاص بك. اضبط العرض والارتفاع ولون الخلفية والخصائص الضرورية الأخرى. لإنشاء سهم ، سوف نستخدم الحدود وتحويل الخصائص. قم بتعيين حجم ولون السهم باستخدام خصائص عرض الحدود ولون الحدود.
الخطوة 3: اضبط موضع واتجاه السهم باستخدام خاصية التحويل. تعيين القيمة لتدوير () لتدوير السهم وترجمة () لتحريك السهم. تغيير قيم هذه الخصائص لتحقيق التأثير المطلوب.
مثال:
.السهم {
العرض: 0;
الارتفاع: 0;
الحدود: 10 بكسل صلبة شفافة;
لون الحدود السفلية: #000;
تحويل: تدوير (45 درجة);
}
- هذا مجرد مثال على إنشاء سهم بسيط باستخدام كس. يمكنك تخصيص هذه الخصائص وإضافة أنماط أخرى لتحقيق التأثير المطلوب وتناسب السهم في التصميم الخاص بك. أنت الآن على استعداد لإنشاء السهم الخاص بك باستخدام المغلق!
- أساسيات كس لإنشاء سهم
- كيفية إنشاء سهم باستخدام عناصر زائفة
- كيفية تغيير لون وحجم السهم
- كيفية إضافة الرسوم المتحركة إلى سهم باستخدام كس
- سؤال وجواب
- لماذا استخدام السهم على موقع على شبكة الانترنت?
- كيف يمكنني تغيير شكل السهم?
هل من الممكن إنشاء الرسوم المتحركة السهم باستخدام المغلق?
أساسيات كس لإنشاء سهم
border-bottom: 10px solid transparent;
border-left: 10px solid black;
- transform: translateY(-50%);
- }
- باستخدام سفغ
- طريقة أخرى لإنشاء سهم هو استخدام سفغ. سفغ يسمح لك لخلق مختلف الأشكال والأشكال باستخدام الرسومات المتجهة. لإنشاء سهم ، يمكنك استخدام عناصر المسار والمضلع وتعيينها على الشكل والأسلوب المطلوبين.
استخدام المكتبات
إذا كنت لا ترغب في إنشاء سهم بنفسك أو كنت تبحث عن خيارات أكثر تعقيدا ، فيمكنك استخدام مكتبات متنوعة توفر حلولا جاهزة لإنشاء الأسهم.
بعض هذه المكتبات تشمل السهم كس ، كس السهام ، و كس السهم من فضلك. أنها توفر أنماط مختلفة من الأسهم وتسمح لك بتخصيص مظهرها.
يعتمد اختيار طريقة إنشاء السهم على تفضيلاتك ومتطلباتك وتعقيد التصميم. استخدم أساليب وتجربة مختلفة للعثور على الخيار الأنسب.
كيفية إنشاء سهم باستخدام عناصر زائفة
يمكنك إنشاء سهم باستخدام كس باستخدام العناصر الزائفة:: قبل و:: بعد. تسمح لك هذه العناصر الزائفة بإضافة محتوى أو تصميم إضافي إلى عنصر دون إضافة رمز هتمل مباشرة.
يوجد أدناه خوارزمية خطوة بخطوة لإنشاء سهم باستخدام عناصر زائفة:
قم بإنشاء العنصر الذي ينتمي إليه السهم. على سبيل المثال ، يمكنك استخدام علامة هتمل
.
قم بتعيين فئة أو معرف للعنصر لسهولة التصميم.
باستخدام كس ، إضافة أنماط إلى العنصر:
تحديد عرض وارتفاع العنصر.
أضف حشوة إذا لزم الأمر.
اضبط موضع العنصر على أنه نسبي أو مطلق.
حدد لون الخلفية أو الصورة للعنصر.
إذا لزم الأمر ، أضف خصائص نمط أخرى.
باستخدام العناصر الزائفة ، أضف سهما إلى العنصر:
حدد موضع العناصر الزائفة على أنها مطلقة.
تعيين العرض والارتفاع من العناصر الزائفة.
حدد لون الخلفية أو الصورة للعناصر الزائفة.
Используя свойства, как transform и rotate, поворотом и располагайте псевдоэлементы, чтобы они образовывали стрелку.
Вот пример CSS-кода, который создает стрелку с помощью псевдоэлементов:
.arrow {
position: relative;
width: 100px;
height: 50px;
background-color: #f00;
}
.arrow::before,
.arrow::after {
content: "";
position: absolute;
width: 0;
height: 0;
}
.arrow::before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
الحد السفلي: 10 بكسل صلب # 00;
أعلى: -10 بكسل;
}
.السهم:: بعد {
الحدود اليسرى: 10 بكسل صلبة شفافة;
الحدود اليمنى: 10 بكسل صلبة شفافة;
أعلى الحدود :10 بكسل صلب # إف 00;
| أسفل: -10 بكسل; | } |
|---|---|
| يقوم نموذج الكود بإنشاء سهم بخلفية حمراء. العناصر الزائفة:: قبل و:: بعد تستخدم لإضافة أشكال مثلثة تشكل سهما لأعلى ولأسفل. | كيفية تغيير لون وحجم السهم |
| في هذا القسم ، سننظر في كيفية تغيير لون وحجم السهم باستخدام كس. | تغيير لون السهم: |
| لتغيير لون السهم ، يمكنك استخدام خاصية اللون لمحدد العنصر. على سبيل المثال: | .السهم { |
| اللون: أحمر; | } |
| في المثال أعلاه ، سيتم تلوين السهم الذي يحتوي على فئة "السهم" باللون الأحمر. | تغيير حجم السهم: |
لتغيير حجم السهم ، يمكنك استخدام خصائص العرض والارتفاع لمحدد العنصر. على سبيل المثال:
.السهم {
العرض: 50 بكسل;
- العرض
الآن دعونا إنشاء الرسوم المتحركة باستخدام إطارات مفتاحية. لنبدأ بتعريف الإطار الرئيسي نفسه @الإطارات الرئيسية:
@إطارات مفتاحية تدوير {