Efek Slick dengan CSS

Assalamu'alaikum Wr.Wb.

Efek Slick dengan CSS, efek ini untuk Saya begitu mengagumkan tanpa sengaja ketika berkunjung ke Net.tutsplus menemukan Efek Slick nama-nya. Efek ini menggunakan Pseudo-Element :before dan :after yang menghasilkan efek bayangan dari Area Objek utama-nya yang terlihat seolah Objek tersebut melayang, seperti membuat bayangan kiri dan kanan seolah Area Objek melipat hal inilah yang menarik untuk di pelajari,< namun saat itu kendala yang muncul adalah Script CSS yang diberikan tidak komplit hanya dasar saja itupun tidak berfungsi, akhir-nya Saya coba ngotak ngatik CSS-nya sampai akhir-nya berhasil menciptakan Efek Slick seperti yang diharapkan bahkan dapat dikembangkan lagi terlihat fantastis. Disini Mojang dan Bujang, Go Blog Go hanya akan memberikan dasar utama CSS Slick ini, selanjut-nya silahkan kembangkan sendiri oleh Mojang dan Bujang untuk lebih kreatif. Untuk melihat salah satu hasil real-nya Mojang dan Bujang dapat melihat Akhir Area Main Posting ini menggunakan Efek Slick dengan bayangan ke-Tengah.

Dasar Utama CSS Slick dengan Pseudo-Element

.box:before,.box:after { /* efek bayangan sisi kiri & kanan objek */
    z-index:-1;
    position:absolute;
    content:" ";
    bottom:15px;
    left:10px;
    width:50%;
    height:18px; /* mengatur tinggi ukuran dasar bayangan */
    top: 68%; /* mengatur jarak bayangan ke atas atau ke bawah */
    -webkit-box-shadow:0 8px 7px rgba(0,0,0,.7); /* mengatur tipis tebal bayangan */
    -moz-box-shadow:0 8px 7px rgba(0,0,0,.7);
    box-shadow:0 8px 7px rgba(0,0,0,.7);
    -webkit-transform:rotate(-2.5deg);
    -moz-transform:rotate(-2.5deg);
    -o-transform:rotate(-2.5deg);
    -ms-transform:rotate(-2.5deg);
    transform:rotate(-2.5deg);
}

.box:after { /* efek bayangan sisi kiri & kanan objek */
    right:10px;
    left:auto;
    -webkit-transform:rotate(2.5deg);
    -moz-transform:rotate(2.5deg);
    -o-transform:rotate(2.5deg);
    -ms-transform:rotate(2.5deg);
    transform:rotate(2.5deg);
}

Contoh lain-nya yang telah Saya buat (hanya Image Screen Shoot) :

Efek Bayangan Objek Kiri Bawah

Efek Bayangan Objek Kanan Bawah

Efek Bayangan Objek Ke-Tengah

Hanya beberapa screen shoot yang Saya tampilkan, sebenar-nya ada 10 yang telah Saya coba dengan berbagai Variatif CSS.

Selamat berkreasi, jadikan yang sudah ada untuk menjadi lebih baik. Go Blog Go...!!! Amiin

Wassalam,