Maaf... Blog ini Hiatus dulu untuk waktu yang belum dapat ditentukan!

Membuat bingkai gambar menggunakan CSS


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,


frame


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!

0 komentar:

Post a Comment

Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.