Membuat efek Prangko pada bingkai gambar menggunakan CSS

Membuat efek Prangko pada bingkai gambar menggunakan CSS

  08 January    Andika

---

Membuat tampilan gambar pada postingan berbeda dari laman web lain memang merupakan suatu kebanggaan. Apakah tampilan yang di maksud itu hanya sekedar bingkai atau pun efek misalnya hover.

CSS yang akan saya bagikan ini hanyalah sebuah CSS sederhana yang mampu membuat sebuah gambar tampil seperti prangko. Jadi efek utamanya terlihat pada bingkai dari gambar. Dasar pembentuk pada CSS utamanya adalah background:radial-gradient.

Seperti biasa, ini hanyalah sebuah contoh dan tentu saja butuh setingan lanjut. Baik itu width maupun height nya. Pada pratinjau, saya hanya menggunakan font Arial dan tentu saja ini bisa di ganti sesuai kebutuhan. Dan untuk menganti judul gambarnya (pada laman pratinjau saya mengggunakan judul 'Go Green'), kamu dapat mengubah sesuai selera pada element .prangko:before. Namun jika tidak ingin menggunakannya atau menggunakan efek ini untuk gambar yang cukup banyak, kamu dapat menghapus teks Go Green pada element .prangko:before tersebut. Jadi content:'Go Green'; bisa di ganti ke content:'';.




Langsung saja,

Kode CSSnya

.prangko {
    width:280px;
    height:180px;
    display:inline-block;
    padding:10px;
    background:white;
    position:relative;
    background:radial-gradient(transparent 0,transparent 4px,white 4px,white);
    background-size:20px 20px;
    background-position:-10px -10px;
}

.prangko:after {
    content:'';
    position:absolute;
    left:5px;
    top:5px;
    right:5px;
    bottom:5px;
    box-shadow:0 0 20px 1px rgba(0,0,0,0.5);
    z-index:-1;
}

.prangko:before {
    content:'Go Green';
    position:absolute;
    bottom:0;
    left:0;
    font:bold 24px arial;
    color:white;
    opacity:0.75;
    line-height:100%;
    padding:20px;
}

Silahkan edit sesuai kebutuhan.

Kode HTMLnya

<div class="prangko">
    <img src="URL GAMBAR" />
</div>

Jangan lupa untuk mengganti URL GAMBAR dengan url dari gambar yang ingin kamu tampilkan.

Untuk tampilannya sendiri sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!