كيفية إنشاء: شريط CSS

كيفية إنشاء الشريط

الخطوة الأولى - إضافة HTML:

في هذا المثال،يتبع الشريط عنصر الزر:

<button class="btn">زر للشيء الرائع <span class="ribbon">جديد</span></button>

الخطوة الثانية - إضافة CSS:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

جرب بنفسك

توضيح المثال:

في هذا المثال،يستخدم CSS لإضافة تأثير شريط ملون إلى الزر. يتم تحقيق هذا التأثير من خلال إضافة عنصر span مكتوب به نمط معين داخل عنصر الزر. يتم تحديد موقع هذا العنصر في الزاوية العلوية اليمنى للزر،و يتم تدويره بـ 20 درجة لإنشاء تأثير الشريط الملون. يتم أيضًا تعيين لون الخلفية ولون النص بشكل مختلف عن الزر لزيادة تأثير الرؤية.