Membuat Background Sudut Terlipat Tampilan Mobile MyWapBlog

Cara membuat sudut terlipat dengan css mobile mywapblog ini memang tidak seindah tampilan desktop yang dibuat dengan javascript yang bisa goyang-goyang, bisa membesar saat cursor menyentuh... karena ini untuk tampilan hape jadi kesederhanaan yang kita tampilkan, walau sederhana tapi ga kalah keren tentunya

preview serta css yang diterapkan adalah

1. SUDUT TERLIPAT ATAS KIRI

#top { font-size: .8em; font-weight: bold; position: relative; margin: -26px 0 40px 0; float: right; color: #222; padding: 10px 30px; background-color: #3bbadb; clear: both; } #top:before { left: -6px; top: 0; border-color: transparent #555 #555 transparent; border-style: solid; } #top:after, #top:before { content: ''; position: absolute; }

2. SUDUT TERLIPAT KIRI KANAN

h1{ text-align: center; position: relative; color: #fff; margin: 0 -30px 30px -30px; padding: 10px 0; background: #5c5c5c; } h1:after, h1:before { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -10px; } h1:before { border-width: 0 10px 10px 0; border-right-color: #222; left: 0; } h1:after { border-width: 0 0 10px 10px; border-left-color: #222; right: 0; }

3. SUDUT LIPAT KIRI

.left { font-size: 1em; position: relative; color: #222; background-color: #ccc; margin: 0 -20px 30px -26px; padding: 10px 0 10px 30px; } .left:before, .left:after { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -6px; } .left:before { border-width: 0 6px 6px 0; border-right-color: #555; left: 0; }

4. SUDUT LIPAT KANAN

.right { font-size: 1em; position: relative; color: #222; background-color: #ccc; text-align: right; margin: 0 -26px 30px -20px; padding: 10px 30px 10px 0; } .right:before, .right:after { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -6px; } .right:after { border-width: 0 0 6px 6px; border-left-color: #555; right: 0; }

NOTE :

Ganti selector top, h1, left, right dengan selector css yang akan digunakan.

Ini ada previewnya yang saya buat sebentar tadi jadi kurang sempurna mohon maaf karena hanya sekedar memperkuat artikel ini saja. oke ini DEMONYA.

Demikian maaf atas kekurangan, tambahan, kritik serta saran dari abang kakak ditunggu.

Silakan Beri Kami 1 Menit untuk Sharing Posting Ini!

Share Media Social →

Tweet

FOLLOW US →

BAGIKAN KE →

Powered By : Official WapMasTer