Membuat bingkai gambar menggunakan CSS

Membuat bingkai gambar menggunakan CSS

  07 January    Andika

---

Kali ini Saya akan membagi sebuah CSS image effect/sytle namun Saya bingung harus memberi judul apa untuk postingan ini.

Effect ini tidak seperti image hover atau efek yang timbul saat gambar tersentuh kursor melainkan efek latar yang membuat gambar seakan-akan berlapis-lapis ke belakang. Kesannya seakan-akan kita melihat-lihat sebuah album foto yang keren.

Dari pada belepotan ngejelasinnya, mendingan kamu simak saja seperti apa tampilannya,

Nah, jelas kan efeknya?

Adakah dari kamu yang telah mencoba atau justru mencari kode CSSnya?

Jika kamu butuh kode CCS untuk tampilan diatas, berikut kode CSSnya

    padding: 10px;
    border: solid 1px #CCC;
    overflow:auto;
    -webkit-box-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.100),
        3px 3px 0 rgba(255, 255, 255, 1.0),
        4px 4px 0 rgba(0, 0, 0, 0.125),
        6px 6px 0 rgba(255, 255, 255, 1.0),
        7px 7px 0 rgba(0, 0, 0, 0.150),
        9px 9px 0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0, 0, 0, 0.175);
    -moz-box-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.100),
        3px 3px 0 rgba(255, 255, 255, 1.0),
        4px 4px 0 rgba(0, 0, 0, 0.125),
        6px 6px 0 rgba(255, 255, 255, 1.0),
        7px 7px 0 rgba(0, 0, 0, 0.150),
        9px 9px 0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0, 0, 0, 0.175);
    box-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.100),
        3px 3px 0 rgba(255, 255, 255, 1.0),
        4px 4px 0 rgba(0, 0, 0, 0.125),
        6px 6px 0 rgba(255, 255, 255, 1.0),
        7px 7px 0 rgba(0, 0, 0, 0.150),
        9px 9px 0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0, 0, 0, 0.175);

Semoga berguna!