Cara Mudah Buat Panel Split Teks Pada Gambar

Baca Juga

Assalamu Alaikum WR.WB

Cara Mudah Buat Panel Split Teks Pada Gambar

selamat Malam buat semuanya .. Ketemu lagi dengan Admin Ocha .. pada kesempatan kali ini .. saya akan sedikit menjelaskan Cara Mudah Buat Panel Split Teks Pada Gambar .. dan sebelum melanjutkan .. baca juga postingan saya yang sebelum nya .. yaitu Cara Buat Efek Hover Pada Text Dengan CSS dan juga Cara Termudah Dan Cepat Buat Aplikasi Android .. dan sebelum melanjutkan .. ada baik nya .. baca juga .. Download Aplikasi Chat Terbaru Buat OS Android yang mungkin ingin mencoba nya .. dan jugaDownload Aplikasi AutoLike Fb 2000+ Per Submit 100% Work dan postingan yang Lalu Download Aplikasi Hack Facebook 2016 100% Work

Baca Label : Tutorial Blogging

Ok Next .. langsung saja ke intinya .. yaitu Cara Mudah Buat Panel Split Teks Pada Gambar .. setelah kemarin buat postingan Cara Buat Efek Hover Pada Text Dengan CSS .. rasa nya belum komplit kalau tidak di tambahkan dengan cara buat split text pada gambar .. cara ini supaya tampilan lebih ok saja gan .. bisa di katakan biar sedikit lebih cantik .. dan beda dari yang lain .. :wink: .. dan cara ini pun ...sebenr nya buat di Blogspot .. tapi disini saya buatkan Demo / Review nya .. di akun sextgem.com .. dan hasil nya sperti pada gambar di bawah ini .. so .. dengan begitu .. code ini .. bisa juga kita pakai di wap builder sextgem.com atau pun wap builder xtgem.com ...wiiihhh jelas keren banget bukan ?? ...wap kita bisa terlihat menarik .. tampil beda dari yang lain .. ok tanpa banyak bicara lagi ...silahkan di lihat dulu demo nya .. di bawah ini .. atau bisa juga langsung klik link ini www.gadis69.ml/demo .. saya tes kode css ini .. pada wap bokep .. yang kmaren juga sebagai contoh review .. Cara Buat Efek Hover Pada Text Dengan CSS .. jadi silahkan kunjungi langsung .. jika berkenan .. sekalian lihat - lihat ada apa saja di sana :wink: .. ok next .. di bawah ini gambar Demo nya .. lihat baik - baik ke 2 gambar tersebut .. sebelum dan sesudah gambar di klik ..

1. Gambar berikut ini .. sebelum di klik ..

2. Dan gambar di bawah ini .. setelah di klik ..

Gimana ? Setelah lihat demo nya .. sudah ngerti kan .. apa yang saya maksud ? .. untuk lebih jelas nya .. silahkan di coba sendiri .. klik gambar nya .. dengan terlebih dulu masuk / klik wap saya yang ini www.gadis69.ml/demo .. dan sekalian praktekan sendiri .. jika ada yang minat untuk membuat nya .. di bawah ini kode nya ..

KODE CSS

<style type="text/css"><br />.split-top,<br />.split-bottom<br />{position:absolute;<br />width:300px;height:150px;}<br />.split-top {top: 0;}<br />.split:hover .split-top{top:-50px;}<br />.split:hover .split-bottom{top:200px;}<br />.split-bottom {<br />top:150px;background-position:0 -150px}<br />.split {width: 300px;<br />height: 300px; float:left;position: relative}<br /><p>.split-top, .split-bottom{<br /> -webkit-transition: top 0.3s ease;<br /> -moz-transition: top 0.3s ease;<br /> -o-transition: top 0.3s ease;<br /> -ms-transition: top 0.3s ease;<br /> transition: top 0.3s ease;}<br /></p> <p>.split p {<br /> font:bold 45px/300px Helvetica,<br />Arial, sans-serif;<br /> text-align: center;opacity: 0;<br /> -ms-filter:"progid:<br />DXImageTransform.<br />Microsoft.Alpha(Opacity=0)";<br /> filter: alpha(opacity=0);<br /></p> <p> -webkit-transition: all 0.3s ease;<br /> -moz-transition: all 0.3s ease;<br /> -o-transition: all 0.3s ease;<br /> -ms-transition: all 0.3s ease;<br /> transition: all 0.3s ease;}<br /></p> <p>.split:hover p {<br /> -ms-filter:"progid: DXImageTransform.Microsoft.Alpha<br />(Opacity=100)";<br /> filter: alpha(opacity=100);<br /> opacity: 1;cursor: pointer;}<br /></p> <p>.split1 {background:#DC143C;color:#fff;<br />text-shadow:2px 2px 4px #111}<br />.split1 .split-top, .split1 .split-bottom {<br /> background-image: url(<font color="#FF0000"><b>http://URL-Gambar Agan.jpg</b></font>);<br /> background-repeat: no-repeat}<br /></style></p>

Keterangan : ganti text / URL .. yang berwarna merah .. dengan URL gambar agan .. yang mau di beri efek split .. dan untuk warna background .. silahkan atur - atur lagi ...sesuai warna kesukaan masing - masing .. disitu berwarna merah .. di mana warna tersebut .. salah satu warna kesukaan saya .. jadi kalau tidak suka ganti saja ..

Penjelasan : split effect merupakan gaya untuk membuka sebuah gambar .. sebagai objek dengan sistem membelah gambar tersebut menjadi 2 bagian .. dengan position center area .. untuk menampilkan text yang sudah kita tuliskan disana .. sebagai keterangan gambar .. seperti contoh nya pada demo di atas .. saat gambar di klik .. gambar terbelah .. dengan menampilkan text Ocha Pratama .. dan Banyak ragam efek gambar yang sudah pernah saya desain .. untuk menampilkan tulisan singkat .. tentang deskripsi gambar tersebut seperti desain - desain efek gambar lain nya .. dan insyallah .. jika masih punya banyak waktu .. untuk ngeblog disini .. nanti satu - satu saya buatkan postingan .. dan di bawah ini .. kode HTML nya .. sebagai tempat menaruh keterangan gambar nya

KODE HTML
<div class="split split1"><br /> <p><font color="#0000FF"><b>Ocha Pratama</b></font></p><br /> <div class="split-top"></div><br /> <div class="split-bottom"></div><br /></div>

Keterangan : ganti text / tulisan yang berwarna Biru .. dengan keterangan gambar agan ..
Selamat Mencoba :idea:

baca label : Tutorial Blogging

Penulis

Dari, Majalengka, Rajagaluh - Jawa Barat OCHA Jangan jadikan sesuatu ke gagalan sebagai ketakutan untuk mengulang nya kembali .. Sehingga anda tak mau mencoba nya lagi .. Tapi jadikan lah ke gagalan sebagai awal ke suksesan untuk menjadi yang lebih baik dari sebelum nya ..." [View More]

Itu lah Postingan kali ini .. mengenai » Cara Mudah Buat Panel Split Teks Pada Gambar « .. yang bisa saya bagikan .. Pada kesempatan yang ke 53x nya ini .. Kurang lebih nya mohon di maklum aja .. Jika ada salah - salah kata atau pun penulisan .. Semoga bermanfaat dan sampe ketemu lagi di lain waktu dan lain kesempatan .. Akhir kata saya ucapkan ..

Wassalamu'Alaikum WR.WB