Jumat, 03 November 2017

Cara Membuat Ribbon Dengan Effect CSS Keren

Ribbon Dengan Effect CSS Keren
Sebelum berganti nama..

Setelah sebelumnya saya membuat artikel " Cara Memasang Touch Screen Scroll Effect " sekarang kali ini membuat ribbon dengan effect css sehingga menjadi keren dan tidak polosan saja. Sebenarnya dalam suatu web itu yang membuat cantik tampilanya adalah css nya jika css nya biasa saja website tersebut kurang menarik. CSS itu seperti diibaratkan pakaianya web dan HTML adalah kerangkanya sedangkan JavaScript adalah gw bingung ayo langsung aja ke pembuatan Ribbon Dengan Effect CSS Keren yang sudah dipostkan pada tahun 2016.

Cara Membuat Ribbon Dengan Effect CSS Keren


Pertama kalian harus menaruh kode CSS dibawah ini pada template kalian agar kalian tidak usah menulis kode ini berulang kali dalam setiap postingan. Taruhlah kode CSS dibawah ini tepat diatas </style> .

.non-semantic-protector {
    position: relative;
    z-index: 1;
}

.ribbon {
    font-size: 16px !important;
    width: 50%;
    position: relative;
    background: #ba89b6;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 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;
}

Sesudah itu simpanlah template kalian.

Untuk menerapkan Ribbonya kalian harus menaruh kode HTML dibawah ini. Kalian bisa gunakan ribbon ini sebagai header title atau banner ataupun lainya.

<div class="non-semantic-protector">
<h1 class="ribbon">
    <strong class="ribbon-content">This is ribbons</strong>
  </h1>
</div>

Kalian ganti tulisan This is ribbons dengan tulisan sesuka hati kalian.

Artikel Terkait

Hidup itu sederhana, namun seringkali kita lah yang membuatnya menjadi sulit.