Membuat Gambar Menjadi Transparan Dengan Css MyWapBlog

Merubah gambar asli agar kelihatan transparent dapat kita gunakan css dengan bantuan opacity maka gambarpun tampak berbeda, lalu bagaimana cara kerja css transparan ini.

contoh css mengubah gambar asli menjadi transparent
.bunga { width: 100%; opacity:0.4; filter:alpha(opacity=40); /* For IE8 */ background: url(http://www. w3schools. com/css/ klematis2.jpg) no-repeat; } .bunga:hover { opacity:1.0; filter:alpha(opacity=100); /* support IE8 */ }

contoh css membuat background transparan, background dasar dengan gambar selanjutnya diberi background selector hitam yang kita beri efek transparan agar warna hitam memudar dan background dasar tetap keliatan
#content .post { width:100%; background:url() repeat; border:2px solid black; } .post-content { width:80%; margin:4px; font-weight:bold; color:#fff; padding:4px; background-color:#000; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 */ }

NOTE :

opacity:0.6 : semakin kecil angka 6 maka akan tampak efek transparannya, value yang disarankan 0.0 - 1.0.
filter:alpha(opacity=60): hanya support IE8

sumber css dan gambar dari w3cschool css telah saya edit sesuai kebutuhan sendiri heheee.. thanks

Read More

Memasang Widget Pendeteksi Negara, Browser, Os Serta Ip Address Pengunjung Di MyWapBlog

Oke langsung saja copy code ini
<img src="http://*www.wieistmeineip.de/*ip-address" />

Hapus semua tanda bintang *

Demonya:

Udah yang lain ga tau dari itu tambahan, kritik serta saran selalu terbuka dari mas serta mbak bro yang cuakep serta guanteng sepanjang hari

Read More

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.

Read More

Membuat Background efek jahitan Tampilan Mobile MywapBlog

Efek menu jahitan mywapblog ini masih menggunakan fungsi after before mirip seperti MEMBUAT KERTAS BERTUMPUK DI MWB kemarin yang telah dipost... curhat dulu akh

lagi sibuk belajar jquery vs script sampai blog ini terabaikan, ini kebiasaan saya didumay cepat bosan, terus udah keasyikan ditempat lain mwb benar2 saya abaikan, ntar di tempat lain juga bosan semua terabaikan, terus muncul lagi.. yah begitulah diriku apa adanya hahaaa...

Lanjut jika efek kertas tumpukan kemarin kita geser kesamping background kedua dan ketiga, pada efek jahitan ini kita buat full background lalu beri border dashed disekelilingnya dan menghasilkan jahitan kecil seperti ini


Gambar diatas menerapkan css ini
#selector { width: 273px; color: #787878; background:#eee;margin:0 0 10px; padding:15px;text-shadow:0 1px 0 #fff;position:relative;z-index:0 } #selector:before{content:'';position:absolute;z-index:-1; border:1px dashed #ccc;top:3px;bottom:3px;left:3px;right:3px; }
NOTE :

Ganti selector dengan element yang diinginkan,
#eee warna background
#ccc warna jahitan

hasil lainnya
Sekian dan terima kasih.. tambahan, kritik serta saran ditunggu

Read More

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 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:
.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 #fff #fff; display:block; width:0; }
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:
.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; }

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
.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 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

Read More

Membuat Nomor Otomatis Pada Menu Dengan Css MyWapBlog

Cara membuat angka muncul secara otomatis pada menu dengan css di mywapblog ini di maksudkan yaitu pada menu tanpa css li seperti di blogroll, category dan recent post sudah ada menu li nya tapi bagaimana di navigation yaitu home, about atau pada komentar jelas bagian itu tidak ada li nya dan berikut ini cara menampilkannya.

Disini saya memberi contoh pada navigation dan sudah saya coba di komentar silahkan kreasi sendiri, saya tidak memberi kode untuk komentar karena bisa menimbulkan bahasa komentar baru seperti ini..

"Dapat nomer butut nih bro komentar nomor 69"

bisa-bisa blog ini di bilang menjadi apa tuh seperti penggerak demo lupa namanya...


Css yang diterapkan.
#navigation {background:#bbb/*warna background*/;margin:0;padding:5px 9px; display: inline-block; overflow: hidden; text-align: left; counter-reset: item;} #navigation span a {color:#555/*warna link*/; text-decoration: none; display: inline-block/*posisi sejajar*/; font-size: 13px; color: white; margin: 0; padding: 4px 18px 4px 25px/*jarak link ke background*/; background: #000/*warna bckground link*/; position: relative;/*agar dapat digeser*/} #navigation span a:before/*ubah after untuk tampil di kanan*/ { content: counter(item); counter-increment: item; width: 23px/*panjang angka*/; height: 23px/*lebar angka*/; margin: 0 3px 0 -7px/*jarak background angka*/; color:#fff/*warna angka*/; position: absolute/*agar angka tidak bergeser*/; top: 3px/*jarak atas*/; left: 0/*jarak kiri*/; background: #777/*warna background angka jika mau menampilkan bulat gunakan ur ini hapus semua spasi*//*url(http: // ykub. xtgem.com/ svg/ images/ 777777. svg) no-repeat*/; text-align: center;/*posisi angka*/}

Disana kode untuk menampilkan adalah counter-reset: item, content: counter(item); counter-increment: item pada item dapat di ganti dengan flag dan banyak lagi seperti, sub menu, heading dll dapat anda cari lewat pencarian google.

CATATAN :
Jika ingin mengubah angka yang di mulai misal 5 6 7 pada kode css before cari kode ini counter-increment: item dan ganti menjadi counter-increment: item 4 jadi cukup tambahkan angka di ujungnya.

sumber artikel
1. W3school klik disini untuk mempelajari css counter section
2. W3org klik disini untuk mempelajari counter automatic numbering list mwb.

Demikian tambahan, kritik serta sarannya di tunggu .

Read More