November 28, 2011   Tutorial CSS ( cascading style sheet ).

Tutorial CSS : Membuat Efek Tumpukan Foto

Pada tutorial kali ini, kami akan membahas mengenai cara membuat efek tumpukan foto menggunakan CSS. Pada dasarnya di dalam membuat efek fo...

Pada tutorial kali ini, kami akan membahas mengenai cara membuat efek tumpukan foto menggunakan CSS.
Pada dasarnya di dalam membuat efek foto bertumpuk adalah dengan pengaturan posisi penempatan gambar (position/margin). Selain itu, supaya gambar terkesan 3D, lebih nyata, dan juga terlihat lebih berantakan, kita juga dapat tambahkan efek shadow dan rotation pada gambar.

Menambahkan Efek Shadow

Sebelumnya perlu kita ketahui yaitu style CSS tidak selalu sama antara satu browser dengan browser yang lainnya. Contoh awal, kita tambahkan efek shadow untuk sebuah gambar dengan CSS :

/* Firefox F3.5+ */
-moz-box-shadow: 3px 3px 4px #444; 
/* Safari3.0+, Chrome */
-webkit-box-shadow: 3px 3px 4px #444; 
/* Opera 10.5, IE 9.0 */
box-shadow: 3px 3px 4px #444; 
/* IE6, IE7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); 
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
 

Hasil Penambahan Efek Shadow :

Menambahkan Efek Rotation

Selanjutnya yaitu kita tambahkan efek rotation untuk memutar gambar dengan derajat putaran tertentu.

/* Safari, Chrome */
-webkit-transform: rotate(45deg);
/* Mozilla */
-moz-transform: rotate(45deg);
/* Opera */
-o-transform: rotate(45deg);
/* KDE Browser */
-khtml-transform: rotate(45deg);
/* IE9 */
-ms-transform:rotate(45deg);
/* < IE8 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

Hasil Penambahan Efek Shadow dan Rotation 45deg :

Menambahkan Background, Padding, & Border

Satu lagi, kita tambahkan border, padding, dan background untuk membuat efek gambar seperti lembaran foto.

background:#fff;
padding:5px;
border:1px solid #999;

Hasil penambahan Background, Padding, & Border :

Penulisan Skrip

Karena efek shadow, background, padding, & border akan digunakan sama di dalam setiap gambar, maka kita buat class pada CSS untuk menampung efek-efek tersebut.

<style type="text/css">
    .gambar{
        /* Firefox F3.5+ */
        -moz-box-shadow: 3px 3px 4px #444; 
        /* Safari3.0+, Chrome */
        -webkit-box-shadow: 3px 3px 4px #444; 
        /* Opera 10.5, IE 9.0 */
        box-shadow: 3px 3px 4px #444; 
        /* IE6, IE7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); 
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
        background:#fff;
        padding:5px;
        border:1px solid #999;
}
</style>

dan untuk efek rotation nya kita tempatkan pada style tag img, karena nilai rotasi gambar akan dibuat berbeda pada setiap gamar dan jangan lupa panggil class “gambar” yang sebelumnya kita buat.

<img src="<file gambar>" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(45deg);
                /* Mozilla */
                -moz-transform: rotate(45deg);
                /* Opera */
                -o-transform: rotate(45deg);
                /* KDE Browser */
                -khtml-transform: rotate(45deg);
                /* IE9 */
                -ms-transform:rotate(45deg);
                ">
 

Lakukan juga hal yang sama pada tag img lainnya dengan mengubah nilai
derajatnya. dan juga jangan lupa untuk membuat gambar menumpuk, 
tambahkan nilai margin dengan nilai minus (misal; margin:-100px -58px;) 
contoh:

<img src="<gambar ke2>" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(0deg);
                /* Mozilla */
                -moz-transform: rotate(0deg);
                /* Opera */
                -o-transform: rotate(0deg);
                /* KDE Browser */
                -khtml-transform: rotate(0deg);
                /* IE9 */
                -ms-transform:rotate(0deg);
                margin:-100px -150px;
                ">
<img src="<gambar ke3>" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(310deg);
                /* Mozilla */
                -moz-transform: rotate(310deg);
                /* Opera */
                -o-transform: rotate(310deg);
                /* KDE Browser */
                -khtml-transform: rotate(310deg);
                /* IE9 */
                -ms-transform:rotate(310deg);
                margin:100px -10px;
                ">
<img src="<gambar ke4>" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(75deg);
                /* Mozilla */
                -moz-transform: rotate(75deg);
                /* Opera */
                -o-transform: rotate(75deg);
                /* KDE Browser */
                -khtml-transform: rotate(75deg);
                /* IE9 */
                -ms-transform:rotate(75deg);
                margin:-100px -58px;
                ">
<img src="<gambar ke5>" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(330deg);
                /* Mozilla */
                -moz-transform: rotate(330deg);
                /* Opera */
                -o-transform: rotate(330deg);
                /* KDE Browser */
                -khtml-transform: rotate(330deg);
                /* IE9 */
                -ms-transform:rotate(330deg);
                margin:300 -208px;
                ">
 

Hasil akhir

Keseluruhan Skrip Kode

<!DOCTYPE html>
<html>
    <head>
        <title>Membuat Tumpukan Gambar</title>
        <style type="text/css">
            .gambar{
                /* Firefox F3.5+ */
                -moz-box-shadow: 3px 3px 4px #444; 
                /* Safari3.0+, Chrome */
                -webkit-box-shadow: 3px 3px 4px #444; 
                /* Opera 10.5, IE 9.0 */
                box-shadow: 3px 3px 4px #444; 
                /* IE6, IE7 */
                filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); 
                /* IE8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
                background:#fff;
                padding:5px;
                border:1px solid #999;
            }
        </style>
    </head>
    
    <body>
        <img src="gambar/citra.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(315deg);
                /* Mozilla */
                -moz-transform: rotate(315deg);
                /* Opera */
                -o-transform: rotate(315deg);
                /* KDE Browser */
                -khtml-transform: rotate(315deg);
                /* IE9 */
                -ms-transform:rotate(315deg);
                margin:100px 100px;
                ">
        <img src="gambar/citra2.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(0deg);
                /* Mozilla */
                -moz-transform: rotate(0deg);
                /* Opera */
                -o-transform: rotate(0deg);
                /* KDE Browser */
                -khtml-transform: rotate(0deg);
                /* IE9 */
                -ms-transform:rotate(0deg);
                margin:-100px -150px;
                ">
        <img src="gambar/citra3.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(310deg);
                /* Mozilla */
                -moz-transform: rotate(310deg);
                /* Opera */
                -o-transform: rotate(310deg);
                /* KDE Browser */
                -khtml-transform: rotate(310deg);
                /* IE9 */
                -ms-transform:rotate(310deg);
                margin:100px -10px;
                ">
        <img src="gambar/citra4.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(75deg);
                /* Mozilla */
                -moz-transform: rotate(75deg);
                /* Opera */
                -o-transform: rotate(75deg);
                /* KDE Browser */
                -khtml-transform: rotate(75deg);
                /* IE9 */
                -ms-transform:rotate(75deg);
                margin:-100px -58px;
                ">
        <img src="gambar/citra5.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(330deg);
                /* Mozilla */
                -moz-transform: rotate(330deg);
                /* Opera */
                -o-transform: rotate(330deg);
                /* KDE Browser */
                -khtml-transform: rotate(330deg);
                /* IE9 */
                -ms-transform:rotate(330deg);
                margin:50 -150px;
                ">
        <img src="gambar/citra6.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(330deg);
                /* Mozilla */
                -moz-transform: rotate(330deg);
                /* Opera */
                -o-transform: rotate(330deg);
                /* KDE Browser */
                -khtml-transform: rotate(330deg);
                /* IE9 */
                -ms-transform:rotate(330deg);
                margin:-100 108px;
                ">
        <img src="gambar/citra7.jpg" class="gambar" style="
                /* Safari, Chrome */
                -webkit-transform: rotate(20deg);
                /* Mozilla */
                -moz-transform: rotate(20deg);
                /* Opera */
                -o-transform: rotate(20deg);
                /* KDE Browser */
                -khtml-transform: rotate(20deg);
                /* IE9 */
                -ms-transform:rotate(20deg);
                margin:-100 108px;
                ">
    </body>
</html>

Tips & Trik

1. Jika anda menggunakan PHP, anda dapat menggenerate secara otomatis nilai derajat putaran gambar dengan menggunakan fungsi rand(0,360);

Contoh :

... rotate(<?php echo rand(0,360); ?>deg) ...
Sumber artikel dari situs : http://stripbandunk.com/tag/efek-lembaran-foto/