Cara Membuat Efek Sudut Lipatan Kertas Untuk Mywapblog Mobile

Tidak dipungkiri lagi mywapblog telah melahirkan para designer css yang wahid, ini dikarenakan mwb dapat diakses melalui hp, kapan dan dimanapun... berbeda dgn blog lain, sistem yang diterapkan mwb sangat-sangat mudah sehingga siapapun yang baru mengenal tidak membutuhkan waktu lama untuk beradaptasi.

kali ini masih seputar css untuk tampilan hp tentunya, kita terapkan sudut lipatan kertas mwb jadi tidak hanya versi desktop saja mobilepun tak mau ngalah.. dan SUDUT LIPATAN INI TANPA GAMBAR


css yang digunakan:
.selector { text-align: left; position:relative; width:30%; padding:6px; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .selector:before { content:""; position:absolute; top:0; right:0; border-width:0 24px 24px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; display:block; width:0; }

lainnya


css yang diterapkan
.selector { text-align: center; font-weight:normal; font-size:14px; position:relative; width:30%; padding:6px; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .selector:after { content:""; position:absolute; top:0; left: -3px; border-width:24px 24px 0 0; border-style:solid; border-color:#fff #658E15 #658E15 #fff; display:block; width:0; } .selector:before { content:""; position:absolute; top:0; right:0; border-width:0 24px 24px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; display:block; width:0; }

NOTE :
#fff pada after before Adalah warna luar yang disamakan dengan warna background body, misal jika menggunakan warna bakground body #000 maka #fff ganti dengan #000 jangan menggunakan transparent.
.selector diganti dengan selector yang akan deterapkan di css

Demikian semoga bermanfaat

Baca Juga :

1. Menu Keren Mwb Bag.11
2. Menu Keren Mwb Bag.1
3. Background Efek Jahitan Mwb
4. Css Efek Kertas Bertumpuk Mywapblog
5. Css Efek Benjolan Mywapblog
6. Mempersingkat Css border
7. Efek Sudut Terlipat Mywapblog