css : آموزش ایجاد روبان گوشه عکس

امروز در بسیاری از وب سایتهای فروشگاهی می بینیم که در گوشه عکسی که برای معرفی محصولات و کالاها به نمایش گذاشته می شود از یک روبان برای نمایش میزان تخفیف و یا محصول جدید فروشگاه استفاده می شود .

برای ایجاد این روبان می توان از css کمک گرفت و با امکاناتی که css3 در اختیار دارد می توان برای طراحی زیباتر این روبان از آن استفاده کرد.

برای این مطلب کدی نوشتم که می توان از آن برای ایجاد یک روبان زیبا استفاده کرد .

 

HTML

<div class="img">
<div class="ribbon">

<span>Ribbon Text</span>

</div>
</div>

 

STYLES

.img{
    background-color:#CCF;
    width:250px;
    height:350px;
    border-radius:5px;
    box-shadow:0 2px 15px 5px #CCc;
    border:1px solid #CCC;
    margin:auto;
    direction:rtl;

    }
.ribbon{
    width:115px;
    height:115px;
   position:absolute;
   overflow:hidden;
   margin-right:-4px;
   margin-top:-4px;
   text-align:center;
 
}

.ribbon span{
 font-family:Verdana;
   font-size:12px;
   color:#fff;
 -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
line-height:30px;
   letter-spacing:1px;
   background:#C50DA9;
   background: linear-gradient(#e80da9 0%, #C50DA9 100%);
   position:absolute;
   width:140px;
   top: 23px;
   right: -31px;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    text-transform: uppercase;
    padding:1px;
    }
    
.ribbon span:before , .ribbon span:after {
    content: "";
  border-top:   3px solid #a50DA9;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon span:before {
    left:0;
}

.ribbon span:after {
    right:0;
}   

 


تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2022