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 semoga dengan artikel ini dapat sedikit membantu anda berexpresi melalui css layaknya hp modern 'piss'
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
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
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:
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 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 dulu lalu ntarkan mau sahur, selanjutnya tambahan, kritik serta sarannya ditunggu