درج ربان سه بعدی با استفاده از CSS3

درج ربان سه بعدی با استفاده از Css3 …

ترفندی بسیار جالب و ساده با استفاده از Css3 که میتوانید برای تیتر های وب سایت خود استفاده نمایید و طراحی خود را زیباتر نمایید …

برای انجام این کار ابتدا کد CSS زیر را به وب سایت خود اضافه نمایید :

.ribbon {
    width: 200px;
    font-size: 16px !important;
    font-family: tahoma;
    position: relative;
    background: #ba89b6;
    color: #fff;
    border-radius: 2px;
    text-align: center;
    padding: 1em 2em;
    margin: 0 0 3em;
}
.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #986794;
    z-index: -1;
}
.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}
.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
}
.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

و حال کد HTML زیر را در مکان دلخواه از وب سایت خود قرار دهید :

<div class="ribbon">
  <div class="ribbon-content">اسکریپت دات کام</div>
</div>

گرداوری و آموزش  : وحید مجیدی

پخش اختصاصی