.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 <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/
nicolasgallagher.com/pure-css-folded-corner-effect/
Happy peel effect \m/
Tidak ada komentar:
Posting Komentar