Selasa, 20 November 2012

Peel Effect or CSS3 Box Shadow!

Mengangkat kembali tutorial lawas mengenai peel effect, flip effect, atau apapun namanya, yang pasti trik ini berbicara membuat satu ujung (sisi) dibuat efek melipat! Berbagai cara dapat ditempuh menjadi seperti itu, dari memakai gambar dan disimpan di pojokan flip effect use image, penggunaan variabel CSS 3 Make Page Peel Effect Using CSS3 dll. Tutorial diluaran banyak sudah berbicara tentang hal ini. Koben hanya ingin memberi tahu, sederhanakanlah kode CSS yang sudah ada. Jangan terlalu banyak memakai efek var. CSS yg malah membingungkan dalam penerapan. Hiasilah kreasi sesuai dengan keperluan. Contoh sederhana...
.peel_effect {
position: relative;
width: 380px;
padding: 20px;
color: #fff;
background: #aaa;
overflow: hidden;
height: 151px;
}
.peel_effect:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-width: 35px;
border-style: solid;
border-color: #f3f3f3 #fff #fff #f3f3f3;
display: block;
}
Kunci efek ada pada var. code border-color: #f3f3f3 #fff #fff #f3f3f3; Hiaslah, rubahlah, tambahkanlah variasi kode-kode CSS sesuai kebutuhan.<div class="peel_effect"></div>Kodenya sederhana, maka hasilnya pun simpel :D Lantas bagaimana dengan code's yg ribet agar menghasilkan kreasi efek peel full stylish b-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Koben mengambil satu contoh dari postingan web Css3 box shadow by webdesignshock Disana ada 16 model, perhatikan Koben rubah, hapus, tambahkan kode css pade demo no.2 Yang terpenting terlihat efek melipat-lipatnya kan ;)) Silahkan sobat bereksperimen ria, tingkatkan skill CSS kalian :D
nicolasgallagher.com/pure-css-folded-corner-effect/
Happy peel effect \m/

Tidak ada komentar:

Posting Komentar