Berlangganan Situs Kami

Smile Untuk Tidak Spam.

Cara Css Membuat Sudut Terlipat MyWapBlog Mobile

Jumpa lagi abang kakak disini saya akan meneruskan post terdahulu bagaimana membuat sudut terlipat tanpa gambar untuk tampilan mobile mywapblog yang tentunya saya memanfaatkan css yang seadanya serta after before berperan besar disini.

Sekadar mengingatkan kembali postingan terdahulu kita telah membuat sudut lipatan dimana sifatnya kelihatan mencengkram body lebih diutamakan sudut terlihat keluar yang menawan.
pada tutor kali ini saya kembali mengotak atik css yang sama hanya saya putar warna border pada after before jadi kelihatan sudut lipatan kedalam dan ini juga terinspirasi ketika saya melihat salah satu teman kita berbagi themesnya yang keren itu disana saya melihat beliau menggunakan gambar (terima kasih saya ucapkan) jadi buat sobat yang mempunyai hp jadul seperti saya c1-01 lumayan sangat susah membuat menggunakan gambar karena hpnya memang jadul mrgreen semoga dengan artikel ini dapat sedikit membantu anda berexpresi melalui css layaknya hp modern 'piss' smile

Mau tahu Awal otak atik saya lewat css bagaimana ???

1. Sudut Balok Mwb
saya mencoba memberi warna yang sama disemua border, langkah pertama cukup menggunakan before TANPA after jangan terburu-buru. hasilnya

topleft-1.png

css yang diterapkan:

2. Sudut Lipatan Mwb Kanan Atas
Dari hasil praktek tampilan pertama saya mencoba memberi warna bagian dalam yang agak gelap dari warna background element yang diterapkan, ingat ini warna ini penting karena disinilah yang menentukan sudutnya, masih css before jangan terburu-buru karena jika terburu-buru bikin gondok dan mumet aja hasilnya tidak memuaskan, hasilnya
topleft.png

css yang digunakan:


3. Sudut Css Terlipat Kiri Kanan Mywapblog.
nah hasil yang kedua sudah terlihat hasilnya maka saya coba membuat 2 sudut lipatan sekaligus. disini saya memasukan css after, pertama kali jika sobat telah menambahkan kode ini maka hasilnya sudut terlipat itu posisinya sama dengan before jadi menggerakannya gunakan position absolute lalu dengan nilai -3 untuk menggerakkan sudut ini, semakin kecil nilainya maka posisinya akan semakin menjauh dari before atau semakin mendekat dengan body kiri begitu sebaliknya, seperti ini:
topleft-right.png

css yang diterapkan


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 jangan ditanya bagaimana membuat 4 sudut sekaligus saya juga tidak tahu lol atau bisa memanfaatkan gambar untuk 2 sudut lain, bisa juga jika di mwb misal kode diatas diterapkan di header, anda dapat memanfaatkan selector navigation atau search untuk sudut bawahnya lalu gerakkan saja keheader.

Oh ya kode ini saya buat dengan hp c1-01 layar kecil jadi kemungkinan untuk layar besar seperti e63 atau x2 atau blackberry kode ini akan berubah jika diterapkan jadi harap otak atik lagi pada widthnya.

Oke mau rolleyes dulu lalu frown ntarkan mau sahur, selanjutnya tambahan, kritik serta sarannya ditunggu

Silakan Beri Kami 1 Menit untuk Sharing Posting Ini!
Share Media Social →
FOLLOW US →
BAGIKAN KE →
Powered By : Official WapMasTer