آموزش ایجاد Ribbon در طراحی سایت
nazanin در 18/02/10
در این آموزش می توانید به راحتی یک روبان (Ribbon) ساده مشابه تصویر زیر در هر قسمت از سایت خود روی تصویر موردنظر با کدهای html و css قرار دهید.
کدهایی که باید در html قرار بگیرد:
این ribbon می تواند روی هر باکسی قرار بگیرد ولی در این آموزش من روی عکس گذاشتم.
<"img src="images/151128474951.png" alt="" height="365" width="370>
<"h2 class="ribbon>
</br</span>>تخفیف
به صورت محدود
<h2/>
حالا باید در css کلاس ribbon را تعریف کرد تا روبان (ribbon) روی تصویر قرار بگیرد می توانید به جای تگ h2 از تگ های متنی دیگر هم استفاده کنید.
کدهای css
}ribbon.
;display: block
;background: #f04040
;height: 64px
;width: 250px
;text-align: center
;position: absolute
;top: 14px
;left: -62px
;border: 1px solid #f04040
;color: #fff
;text-decoration: none
;font-size: 1.6rem
;(transform: rotate(-45deg
{
می توانید اعداد top، left، width و height را با توجه به تصویری که ribbon رویش قرار می گیرد، تغییر دهید.
