Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QLukeWsvWVrmE7gEBnLnH5uPyQJdMVouOS_JYmH_bsFwupwyqsk-IzMVTyoB7AcBvZduc6iR40D_ehwIgkIuz1WPdmwTmY0nJg1dNHp8ipbRZVosCxIZfm4pGdLGF9h7AyLJgjsxHb-C/s643/sliding.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal" border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QLukeWsvWVrmE7gEBnLnH5uPyQJdMVouOS_JYmH_bsFwupwyqsk-IzMVTyoB7AcBvZduc6iR40D_ehwIgkIuz1WPdmwTmY0nJg1dNHp8ipbRZVosCxIZfm4pGdLGF9h7AyLJgjsxHb-C/s320/sliding.PNG" title="Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal" width="320" /></a></div><br />Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal | Sliding image panel bukan Slideshow. Sebelum tidur, aku share nich..Image Panel..Tanpa Javascript, Jquery hanya menggunakan CSS3 tentu juga HTML. Nah, ini gagal total...karena itu judulnya Sliding Image Panel Dengan CSS3 Tapi Gagal. Kalau berhasil, pasti saya share juga codingnya...<br /><br />Nah kegagalan saya ada di bagian yang konyol. Masih ada slider lain yang masih saya rahasiakan. Jika ada kesempatan akan saya coba share.<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/lis-i-1-displayrotmenu-linth-childi.html" target="_blank">ILUSTRASI KEGAGALAN</a></div>

Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal

Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal | Sliding image panel bukan Slideshow. Sebelum tidur, aku share nich..Image Panel..Tanpa ...

Baca selengkapnya »

Membuat Banner Keren Dengan CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD6DVTRIYT8gH-NjkyvNYJnqAXUBBaSvi228oI4M6qA-4N4WQQRnZT7oHS9oLs4dhW_GluY8KaKU_RFQf9anBoaR94eYmanPCtN0MHVH0xZZb7pul_uYNHjar4Lpeq0JKrjH-_lBGIyEx/s575/css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Banner Keren Dengan CSS" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD6DVTRIYT8gH-NjkyvNYJnqAXUBBaSvi228oI4M6qA-4N4WQQRnZT7oHS9oLs4dhW_GluY8KaKU_RFQf9anBoaR94eYmanPCtN0MHVH0xZZb7pul_uYNHjar4Lpeq0JKrjH-_lBGIyEx/s320/css3.jpg" title="Membuat Banner Keren Dengan CSS" width="320" /></a></div>Membuat Banner Keren Dengan CSS | Siapa sangka, CSS bisa dipakai untuk membuat banner. Nah, baru saja dari asisten saya, Dreamweaver CS6. "Design di Corel atau Photoshop, upload di images hosting, dah selesai, permasalahan"...Ya. CSS untuk Style, berarti anda bisa merubah bentuk dan ukuran dengan mudah dan tidak ada yang salah. Itu menurut saya...Jadi silakan yang mau pakai.<br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS, Cool Banner With CSS</span></h3><pre class="brush:js;"> <style type="text/css">   <br />            .pesan{<br />                padding-top: 10px;<br />                font-size: 36px;<br />                padding:0px;<br />                margin: 0px;<br />                line-height:100px;<br />                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);<br />                width:310px;<br />                float:left;<br />            }<br />            .slogan{<br />                float: right;<br />                margin:75px 20px 0px 0px;<br />                font-size: 20px;<br />            }<br />            .wammy{<br />                width:620px;<br />                height: 100px;<br />                margin:7px auto;<br />                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />                -moz-border-radius: 15px;<br />                -webkit-border-radius: 15px;<br />                padding-left:190px;<br />            }<br />           .banner0{<br />                color:#6e9cf9;<br />                background: #FF0 url(http://s20.postimg.org/58r4plwk9/ban1.png) no-repeat center left;<br />                 font-family:"Coda"; <br />                font-style: italic;<br />            }<br />            .banner1{<br />                color:#FFF;<br />                background: #000 url(http://s20.postimg.org/lesj9d82h/image.png) no-repeat center left;<br />                font-family: "Coda"; <br />            }<br />        </style></pre><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Cool Banner With CSS</span></h3><pre class="brush:js;"><div class="wammy banner0"><br />            <div class="pesan">Tralala Trilili</div><br />            <div class="slogan">Wammy's Blog</div><br />        </div><br />        <div class="wammy banner1"><br />            <div class="pesan">Sleketep tep</div><br />            <div class="slogan">www.bocahit.com</div><br />        </div></pre><br /><blockquote class="tr_bq">width : lebar banner, atur banner sesuai kebutuhaan <br />height : tinggi banner</blockquote><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">Menambah Banner, Cool Banner With CSS</span></h3><h3>Anda tinggal menambah kode CSS</h3><pre>.banner5{<br />                color:#37535B;<br />                background: #C6CC10 url(url banner) no-repeat center left;<br />                font-family: "Trebuchet MS";<br />            } <br /><br /></pre><h3>Dan HTML</h3><pre> <div class="wammy banner5"><br />            <div class="pesan">Pesan</div><br />            <div class="slogan">Slogan</div><br />        </div><br /></pre><br /><h3>Jika anda ingin memberi link :</h3><pre><div class="wammy banner1"><br />            <div class="pesan"><span style="color: red;"><a href="http://www.bocahit.com/"></span>Wammy San<span style="color: red;"></a></span></div><br />            <div class="slogan">www.bocahit.com</div><br />        </div></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/h1-padding-top-10px-font-size-36px.html" target="_blank" title="demo">ILUSTRASI</a></div>

Membuat Banner Keren Dengan CSS

Membuat Banner Keren Dengan CSS | Siapa sangka, CSS bisa dipakai untuk membuat banner. Nah, baru saja dari asisten saya, Dreamweaver CS6. &q...

Baca selengkapnya »

Membuat Bingkai Catatan Dengan CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepIOK1CPdRlhWdiaWTCC7lPGlKZlkjJ2dUDoEnCQ1DcdsT2F2MiWBJ3vfo5X8dbad8Pq0Agx3dMGxM3IBZ6hX7QBliL68FDuMpA7hXwxJSOgH2r9VHQDz9A3mZMlUiOyoHZaCq5lAYHxQ/s563/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Bingkai Catatan Dengan CSS" border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepIOK1CPdRlhWdiaWTCC7lPGlKZlkjJ2dUDoEnCQ1DcdsT2F2MiWBJ3vfo5X8dbad8Pq0Agx3dMGxM3IBZ6hX7QBliL68FDuMpA7hXwxJSOgH2r9VHQDz9A3mZMlUiOyoHZaCq5lAYHxQ/s320/Capture.PNG" title="Membuat Bingkai Catatan Dengan CSS" width="320" /></a></div><br />Membuat Bingkai Catatan Dengan CSS | Ini adalah kreasi pertama saya bersama CSS. Note Box, mungkin itu namanya, tapi entahlah. Anda bisa memakai ini, untuk :<br /><ol><li>Memberikan pengumuman kepada pengunjung</li><li>Membuat puisi / kata mutiara di dalam web</li><li>Menampilkan foto</li></ol><div style="text-align: center;"><a alt="DEMO" class="button" href="http://iframe-wammy.blogspot.com/2013/06/blog-post_28.html" title="DEMO">DEMO BOX NOTE</a></div><br />Ini bukanlah serta merta ide saya, ini adalah berawal dari tutorial membuat link list dari mas zhinto. Saya berfikir gimana caranya bisa diubah ke dalam teks dengan porsi yang hampir mirip. Nah, akhirnya dengan asisten saya, dreamweaver cs6, jadilah.<br /><br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS, Box Note With CSS</span></h3><pre class="brush:js;"><style type="text/css"><br />.boxnotew {<br />    width: 40%; /*Ukuran kotak*/<br />    padding: 5px;<br />    background-color: rgba(215, 40, 40, 0.9);;<br />    border-bottom: 1px solid rgb(51, 51, 51);<br />    border-top: 1px solid rgb(51, 51, 51);<br />    box-shadow: 0px 1px rgb(0, 0, 0), 0px 2px 1px rgba(0, 0, 0, 0.4);<br />    margin: 5px auto;<br />    border: 1px solid rgba(0, 0, 0, 0.4);<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    border-radius: 5px;<br />    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);<br />    -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);<br />    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);<br />    }<br />.boxnotew .judul {<br />    text-align: center;<br />    font-size: 1.5em;<br />    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);<br />    border-bottom: 1px solid rgb(51, 51, 51);<br />    border-top: 1px solid rgb(51, 51, 51);<br />    box-shadow: 0px 1px rgb(0, 0, 0), 0px 2px 1px rgba(0, 0, 0, 0.4);<br />    padding:5px;<br />    color: #FFF;<br />    font-family: Coda;<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    border-radius: 5px<br />    }<br />.boxnotew .isi {<br />    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);<br />    margin-top:5px;<br />    height: 220px; /*tinggi kotak dalam*/<br />    overflow: auto;<br />    border: 1px solid #000;<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    border-radius: 5px<br />    }<br />.boxnotew p {<br />    list-style: none;<br />    color: #FFF;<br />    margin:0px;<br />    text-decoration: none;<br />    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);<br />    padding: 5px; /*jarak teks dari garis*/<br />    color: #BBB; /*warna huruf*/<br />    text-transform: capitalize; /*bentuk huruf (besar semua, normal, kapital*/<br />    font-size: 12px; /*ukuran huruf*/<br />    font-weight: bold; /*kondisi huruf*/<br />    font-family: Coda; /*jenis huruf*/<br />    -webkit-transition: all 0.5s ease 0s;<br />    -moz-transition: all 0.5s ease 0s;<br />    -o-transition: all 0.5s ease 0s;<br />    transition: all 0.5s ease 0s;<br />    }<br /></style></pre><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Box Note With CSS</span></h3><pre class="brush:js;"><div class="boxnotew"><br /><br /><div class="judul">Kebijakan Admin Wammy</div><br /><br /><div class="isi"><br /><br /><p>Teks / foto anda disini</p><br /><br /><p>Saya paham rasanya jadi blogger. Sebagaimana anda begitu, tapi bagaimana pun juga tetap saling mengharagai di bidang apapun dan dengan alasan apapun. <br /><br />Salam Admin Wammy</p><br /><br /></div><br /><br /><small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href="http://www.bocahit.com/2013/06/membuat-bingkai-catatan-dengan-css.html" target="_blank" title='Box Note With CSS'>+ Get This Widget Here</a></div></small><br /><br /></div></pre><br /><br />Gunakan <p> sebagai pembuka kalimat dan </p> sebagai penutup. Jika anda ingin memasukkan foto, berikan action <b>widht</b> dan <b>height</b>. Sebagai contoh berikan <img src="URL GAMBAR" width="300" height="250". Selamat mencoba..

Membuat Bingkai Catatan Dengan CSS

Membuat Bingkai Catatan Dengan CSS | Ini adalah kreasi pertama saya bersama CSS. Note Box, mungkin itu namanya, tapi entahlah. Anda bisa mem...

Baca selengkapnya »

Cara Membuat Kotak Pemberitahuan Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhULygGZCbDtSuDMW24ezJMQPWcNM0dW56QirkdMmmKYRQTxu5QXdE65lm5DDpPatYzYf_ezsRwqUz43nshJh0MDHbOBIB2XQZ3lpOumnE-uonbAzKxvD6pliIo_cPXWfO8x3s6crjRI5/s1600/notif.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhULygGZCbDtSuDMW24ezJMQPWcNM0dW56QirkdMmmKYRQTxu5QXdE65lm5DDpPatYzYf_ezsRwqUz43nshJh0MDHbOBIB2XQZ3lpOumnE-uonbAzKxvD6pliIo_cPXWfO8x3s6crjRI5/s400/notif.PNG" width="400" /></a></div>Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat artikel. Tadi di jalan, ga sengaja lihat papan..Coution...ga jauh dari situ juga ada papan, Pemberitahuan, sedang ada perbaikan jalan. Langsung dari otak kanan ke otak kiri terus turun ke dengkul munculah ide ini. Menurut saya, ini penting ga penting, penting jika kita ingin menyampaikan sesuatu kepada visitor yang jelas dan langsung terbaca. Tapi ga penting juga kalau buat main - main. Nah, bagi yang butuh bisa deh, pakai ini :<br /><br /><h3>Langkah 1. CSS3, Notification Box</h3><pre>.alert-box {<br />    color:#555;<br />    border-radius:10px;<br />    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;<br />    padding:10px 10px 10px 36px;<br />    margin:10px;<br />}</pre><br />Sekarang lihat ini:<br /><ul><li><span class="code">color : #555;</span> – warna teks</li><li><span class="code">border-radius:10px;</span> – jarak border radius</li><li><span class="code">font-family:…</span> – jenis huruf, kesukaan anda</li><li><span class="code">padding:10px 10px 10px 36px;</span> – padding untuk atas bawah kanan kiri</li><li><span class="code">margin:10px;</span> – jarak sekeliling</li></ul><br /><pre>.alert-box span {<br />    font-weight:bold;<br />    text-transform:uppercase;<br />}</pre><br />Diatas, kenapa?karena kita gunakan span.<br /><br /><h3>Langkah 2, CSS3 Alert</h3><pre>.error {<br />    background:#ffecec url('images/error.png') no-repeat 10px 50%;<br />    border:1px solid #f5aca6;<br />}<br />.success {<br />    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;<br />    border:1px solid #a6ca8a;<br />}<br />.warning {<br />    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;<br />    border:1px solid #f2c779;<br />}<br />.notice {<br />    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;<br />    border:1px solid #8ed9f6;<br />}<br /></pre><br />Masalah url gambar bisa anda cari di google yang anda suka.<br /><h3>Langkah 3, CSS3 Alert</h3><pre><div class="alert-box error"><span>error: </span>Pesan Salah Anda.</div><br /><div class="alert-box success"><span>success: </span>Pesan Sukses Anda.</div><br /><div class="alert-box warning"><span>warning: </span>Pesan Larangan Anda.</div><br /><div class="alert-box notice"><span>notice: </span>Pesan Pemberitahuan Anda.</div></pre><br />Okey, langsung donwload gambarnya... <br /><div style="text-align: center;"><a class="button" href="http://adf.ly/QpTl7" target="_blank">Download Image</a></div>

Cara Membuat Kotak Pemberitahuan Dengan CSS3

Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat arti...

Baca selengkapnya »

Cara Membuat Form Login Admin Dengan Javascript & CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFuDZos93Go45IQs6equhNsgrYmGk2dogttaHIU_L6slVVaBEbIrrAi21dlFLgQsI3gsWESV3YyOASXDxxk4_-pLAnB_yPkXcq9PlNxl3SG1U3ByxYg8ocwPzl7ZvsSKelGP_EIBcZ694/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Form Login Admin Dengan Javascript & CSS3" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFuDZos93Go45IQs6equhNsgrYmGk2dogttaHIU_L6slVVaBEbIrrAi21dlFLgQsI3gsWESV3YyOASXDxxk4_-pLAnB_yPkXcq9PlNxl3SG1U3ByxYg8ocwPzl7ZvsSKelGP_EIBcZ694/s320/Capture.PNG" title="Cara Membuat Form Login Admin Dengan Javascript & CSS3" width="320" /></a></div>Cara Membuat Form Login Admin Dengan Javascript & CSS3 | Hai, ketemu saya lagi. Kali ini, kita oprek masalah login. Yang pasti ini digunakan untuk web dinamis yang kita bangun. Emmm, jika kemarin adalah form signup yang bisa di ubah ke form kontak, form login ini, juga bisa di sulap jadi form kontak sesuai dengan kreatifitas anda.<br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">Javascript, Form Login</span></h3><pre class="brush:js;">$(function(){<br /><br /> // Mengecek dukungan CSS3 3D<br /> $.support.css3d = supportsCSS3D();<br /><br /> var formContainer = $('#formContainer');<br /><br /> $('.flipLink').click(function(e){<br /><br /> <br /> formContainer.toggleClass('flipped');<br /><br /> // Pilihan jika tidak support<br /> if(!$.support.css3d){<br /> $('#login').toggle();<br /> }<br /> e.preventDefault();<br /> });<br /><br /> formContainer.find('form').submit(function(e){<br /><br /> e.preventDefault();<br /> });<br /><br /> function supportsCSS3D() {<br /> var props = [<br /> 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'<br /> ], testDom = document.createElement('a');<br /><br /> for(var i=0; i<props.length; i++){<br /> if(props[i] in testDom.style){<br /> return true;<br /> }<br /> }<br /><br /> return false;<br /> }<br />});<br /></pre><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS3, Style Form</span></h3><pre class="brush:js;">#formContainer{<br /> width:288px;<br /> height:321px;<br /> margin:0 auto;<br /> position:relative;<br /> z-index:1;<br /> <br /> -moz-perspective: 800px;<br /> -webkit-perspective: 800px;<br /> perspective: 800px;<br />}<br /><br />#formContainer form{<br /> width:100%;<br /> height:100%;<br /> position:absolute;<br /> top:0;<br /> left:0;<br /> <br /> -moz-transform-style: preserve-3d;<br /> -webkit-transform-style: preserve-3d;<br /> transform-style: preserve-3d;<br /> <br /> -moz-backface-visibility: hidden;<br /> -webkit-backface-visibility: hidden;<br /> backface-visibility: hidden;<br /> <br /> -moz-transition:0.8s;<br /> -webkit-transition:0.8s;<br /> transition:0.8s;<br /> <br /> -moz-animation: pulse 2s infinite;<br /> <br /> -webkit-animation: pulse 2s infinite;<br />}<br /><br /><br />/* Firefox Keyframe Animation */<br />@-moz-keyframes pulse{<br /> 0%{ box-shadow:0 0 1px #008aff;}<br /> 50%{ box-shadow:0 0 8px #008aff;}<br /> 100%{ box-shadow:0 0 1px #008aff;}<br />}<br /><br />/* Webkit keyframe animation */<br />@-webkit-keyframes pulse{<br /> 0%{ box-shadow:0 0 1px #008aff;}<br /> 50%{ box-shadow:0 0 10px #008aff;}<br /> 100%{ box-shadow:0 0 1px #008aff;}<br />}<br /><br />#login{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2LBuKjRkvutwCz8LL3ebqtuG-N6pLYiPn4LgjxZxNjgs_GfMtxfI8pSQuMzoTE92xVbICzsUK2apqk_l0ibfoBZFKeRoQorJFJT6b9_mKPqsragHYUIwd-nAM30unotsCRHMNqY3y2lOH/s321/login_form_bg.jpg) no-repeat;<br /> z-index:100;<br />}<br /><br />#recover{<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaJHOY_XO7QqYOdARKXwoLLeKkUy86GVwYz7o5uMkfReCjd3iBy_z3piOys7Wib5CV2dfZfWih-0GIjoNNCNbnOW4aQ2CJK8tZro0S4gEhtCqSG0weT2NMR2YcQUgQRqqZ2M0gJkyyqZKj/s321/recover_form_bg.jpg) no-repeat;<br /> z-index:1;<br /> opacity:0;<br /> <br /> -moz-transform:rotateY(180deg);<br /> -webkit-transform:rotateY(180deg);<br /> transform:rotateY(180deg);<br />}<br /><br />#formContainer.flipped #login{<br /> <br /> opacity:0;<br /> <br /> <br /> -moz-transform:rotateY(-180deg);<br /> -webkit-transform:rotateY(-180deg);<br /> transform:rotateY(-180deg);<br />}<br /><br />#formContainer.flipped #recover{<br /> <br /> opacity:1;<br /> <br /> -moz-transform:rotateY(0deg);<br /> -webkit-transform:rotateY(0deg);<br /> transform:rotateY(0deg);<br />}<br /></pre><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS3, Untuk Input, Links & Button</span></h3><pre class="brush:js;">#login .flipLink,<br />#recover .flipLink{ <br /> height: 65px;<br /> overflow: hidden;<br /> position: absolute;<br /> right: 0;<br /> text-indent: -9999px;<br /> top: 0;<br /> width: 65px;<br />}<br /><br />#recover .flipLink{<br /> right:auto;<br /> left:0;<br />}<br /><br />#login:after{<br /> /* "Click here" tooltip */<br /> width:98px;<br /> height:16px;<br /> content:'';<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklwSjcW-mCsqXnes9nM3FNlBa2niHU9T1GgXreCERbAP-C-XpXzuqG6VmFKkgGxqQ0NU0o3yXhTCWHqdwiJaNHiMqCC1doQe-SpS_s_mz0s4Ipr-m76uGYFjsR0dKpY39FYdv2o9tL_hr/s98/click_here.png) no-repeat;<br /> position:absolute;<br /> right:-120px;<br /> top:22px;<br />}<br /><br />input[type=text],input[type=password]{<br /> /* text fields */<br /> font: 15px 'Segoe UI',Arial,sans-serif;<br /> border: none;<br /> background:none;<br /> height: 36px;<br /> left: 26px;<br /> position: absolute;<br /> top: 176px;<br /> width: 234px;<br /> text-indent: 8px;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);<br /> color:#eee;<br /> outline:none;<br />}<br /><br />#loginPass{<br /> top: 215px;<br />}<br /><br />#recoverEmail{<br /> top:215px;<br />}<br /><br />input[type=submit]{<br /> <br /> /* Submit button */<br /> <br /> opacity:0.9;<br /> position:absolute;<br /> top:262px;<br /> left:25px;<br /> width: 239px;<br /> height:36px;<br /> cursor:pointer;<br /> border-radius:6px;<br /> box-shadow:0 1px 1px #888;<br /> border:none;<br /> color:#fff;<br /> font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif;<br /> <br /> /* CSS3 Gradients */<br /> <br /> background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> <br /> background-image: -webkit-gradient(<br /> linear,<br /> left bottom,<br /> left top,<br /> color-stop(0.5, rgb(80,102,127)),<br /> color-stop(0.5, rgb(87,109,136)),<br /> color-stop(1, rgb(106,129,155))<br /> );<br />}<br /><br />input[type=submit]:hover{<br /> opacity:1;<br />}<br /><br />input::-webkit-input-placeholder {<br /> color:#eee;<br />}<br /></pre><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Form Login</span></h3><pre class="brush:js;"><div id="formContainer"><br /><form action="./" id="login" method="post"><br /><a class="flipLink" href="./" id="flipToRecover">Forgot?</a><br /> <input id="loginEmail" name="loginEmail" placeholder="Email" type="text" /><br /> <input id="loginPass" name="loginPass" placeholder="Password" type="password" /><br /> <input name="submit" type="submit" value="Login" /><br /> </form><br /><form action="./" id="recover" method="post"><br /><a class="flipLink" href="./" id="flipToLogin">Forgot?</a><br /> <input id="recoverEmail" name="recoverEmail" placeholder="Your Email" type="text" /><br /> <input name="submit" type="submit" value="Recover" /><br /> </form><br /></div><br /></pre>Lihat, demo yang ada di bawah ini...<br /><br /><div style="text-align: center;"><a class="button" href="http://adf.ly/MRX5F" target="_blank" title="Download Gambar"> Download Gambar</a>                <a class="button" href="http://iframe-wammy.blogspot.com/2013/06/form-login.html" target="_blank" title="Form Login">D E M O</a></div>

Cara Membuat Form Login Admin Dengan Javascript & CSS3

Cara Membuat Form Login Admin Dengan Javascript & CSS3 | Hai, ketemu saya lagi. Kali ini, kita oprek masalah login. Yang pasti ini digu...

Baca selengkapnya »

Cara Membuat Formulir Pendaftaran Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj349ARFR9arhv1E59iHHaRgY1qa60VSTayUi2ytPfd_rZNoSBJrv2_u3KKmh7KoiZt6jzqwVf40_tjD-jWYsNmeRNrhEaC4m-RgeFmQm70MO-IANCTWPPE8iCCPHqCE4UsLS-CSTG8_-gN/s1600/sederhana.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Formulir Pendaftaran Dengan CSS3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj349ARFR9arhv1E59iHHaRgY1qa60VSTayUi2ytPfd_rZNoSBJrv2_u3KKmh7KoiZt6jzqwVf40_tjD-jWYsNmeRNrhEaC4m-RgeFmQm70MO-IANCTWPPE8iCCPHqCE4UsLS-CSTG8_-gN/s1600/sederhana.JPG" title="Cara Membuat Formulir Pendaftaran Dengan CSS3" /></a></div>Cara Membuat Formulir Pendaftaran Dengan CSS3 | Hai, ketemu lagi dengan saya, Wammy. Kali ini, sedikit berbagi tentang CSS3. Lebih tepatnya adalah Formulir Pendataran. Kenapa ? Yups, ini di gunakan pada web dinamis dinama, form ini yang akan mengantar user pada akunnya. Seperti yang teman - teman, baca pada memasukan data dari formulir ke localhost, cara ini juga bisa dipakai untuk membuat Formulir Kontak. Cukup ganti bagian - bagian tertentu saja yang diperlukan. Jika ada yang belum baca, cara koneksi ke localhost. <a href="http://www.bocahit.com/2013/04/menghubungkan-form-ke-database.html" target="_blank">Klik Disini</a>.<br /><br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS3, Formulir Pendaftaran</span></h3><br /><pre class="brush:js;">form.registration{<br /> width:600px;<br /> float:left;<br /> color:#818181;<br /> background: #f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzq_TcAz9eu2wMAfLGfejflbNx9t2lGKKE2-_DU9R_rrKH4AwO9bCxDQX6t0nuQ4TnGLYfN4-XVMUmsHKYUeMPs1m4sWzqD5p_EmePx4JP_HHLbx-4Dod4ANyBRLZMgC8tGztiar4N99K/s64/pen.png) no-repeat top right;<br /> border: 2px solid #ccc;<br /> padding:10px;<br /> font-family: Georgia;<br /> font-size: 14px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -moz-border-radius: 15px;<br /> -webkit-border-radius: 15px;<br />}<br /><br />form.registration fieldset{<br /> border-top:1px solid #ccc;<br /> border-left:0;<br /> border-bottom:0;<br /> border-right:0;<br /> padding:6px;<br /> margin:0px 30px 0px 0px;<br />}<br /><br />form.registration legend{<br /> text-align:left;<br /> color:#ccc;<br /> font-size:18px;<br /> padding:0px 4px 0px 4px;<br /> margin-left:20px;<br />}<br /><br />form.registration label{<br /> font-size: 32px;<br /> width:200px;<br /> float: left;<br /> text-align: right;<br /> color:#999;<br /> clear:left;<br /> margin:4px 4px 0px 0px;<br /> padding:0px;<br />}<br />form.registration input{<br /> font-family: Georgia;<br /> font-size: 28px;<br /> float:left;<br /> width:300px;<br /> border:1px solid #cccccc;<br /> margin:2px 0px 2px 2px;<br /> color:#00abdf;<br /> height:32px;<br /> padding:3px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br />}<br />form.registration input:focus, form.registration select:focus{<br /> background-color:#E0E6FF;<br />}<br />form.registration select{<br /> font-family: Georgia;<br /> font-size: 28px;<br /> float:left;<br /> border:1px solid #cccccc;<br /> margin:2px 0px 2px 2px;<br /> color:#00abdf;<br /> height:40px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br />}<br /><br />.button, .button:visited{<br /> float:right;<br /> text-shadow: 0 -1px 1px rgba(0,0,0,0.25);<br /> border-bottom: 1px solid rgba(0,0,0,0.25);<br /> cursor: pointer;<br /> padding: 5px 10px 5px 5px;<br /> color: #fff;<br /> text-decoration: none;<br /> font-size: 32px;<br /> padding: 10px 15px;<br /> background-color: #00abdf;<br /> display: inline-block;<br /> -moz-border-radius: 10px;<br /> -webkit-border-radius: 10px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />}<br />.button:hover{<br /> background-color: #777;<br />}<br /></pre><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Formulir Pendaftaran</span></h3><br /><pre class="brush:js;"><form class="registration"><br /> <fieldset><br /> <legend>About you</legend><br /> <label>First name</label><br /> <input type="text" maxlength="100" value=""/> <br /> <label>Last name</label><br /> <input type="text" maxlength="100" value=""/> <br /> <label>Birthdate</label><br /> <select><br /> <option value="1">1</option><br /> <option value="2">2</option> <br /> </select><br /> <select> <br /> <option value="1">January</option><br /> <option value="2">February</option><br /> </select><br /> <select> <br /> <option value="2009">2009</option><br /> <option value="2008">2008</option> <br /> </select> <br /> </fieldset><br /> <fieldset><br /> <legend>Account details</legend><br /> <label>E-Mail</label><br /> <input type="text" maxlength="120" value=""/><br /> <label>Password</label><br /> <input type="password" maxlength="20"/> <br /> </fieldset><br /> <fieldset> <br /> <a class="button">Register</a> <br /> </fieldset> <br /></form><br /></pre><br />Anda bisa letakkan ini, pada halaman blog, atau di Dreamweaver. Silakan lihat contoh dibawah ini....<br /><br /><style type="text/css">form.registration{ width:600px; float:left; color:#818181; background: #f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzq_TcAz9eu2wMAfLGfejflbNx9t2lGKKE2-_DU9R_rrKH4AwO9bCxDQX6t0nuQ4TnGLYfN4-XVMUmsHKYUeMPs1m4sWzqD5p_EmePx4JP_HHLbx-4Dod4ANyBRLZMgC8tGztiar4N99K/s64/pen.png) no-repeat top right; border: 2px solid #ccc; padding:10px; font-family: Georgia; font-size: 14px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-border-radius: 15px; -webkit-border-radius: 15px; } form.registration fieldset{ border-top:1px solid #ccc; border-left:0; border-bottom:0; border-right:0; padding:6px; margin:0px 30px 0px 0px; } form.registration legend{ text-align:left; color:#ccc; font-size:18px; padding:0px 4px 0px 4px; margin-left:20px; } form.registration label{ font-size: 32px; width:200px; float: left; text-align: right; color:#999; clear:left; margin:4px 4px 0px 0px; padding:0px; } form.registration input{ font-family: Georgia; font-size: 28px; float:left; width:300px; border:1px solid #cccccc; margin:2px 0px 2px 2px; color:#00abdf; height:32px; padding:3px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; } form.registration input:focus, form.registration select:focus{ background-color:#E0E6FF; } form.registration select{ font-family: Georgia; font-size: 28px; float:left; border:1px solid #cccccc; margin:2px 0px 2px 2px; color:#00abdf; height:40px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; } .button, .button:visited{ float:right; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); cursor: pointer; padding: 5px 10px 5px 5px; color: #fff; text-decoration: none; font-size: 30px; padding: 10px 15px; background-color: #00abdf; display: inline-block; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .button:hover{ background-color: #777; } </style> <br /><form class="registration"><fieldset><legend>About you</legend> <label>First name</label> <input maxlength="100" placeholder="Wammy" type="text" value="" /> <label>Last name</label> <input maxlength="100" placeholder="San" type="text" value="" /> <label>Birthdate</label> <select> <option value="1">1</option> <option value="2">2</option> </select> <select> <option value="1">January</option> <option value="2">February</option> </select> <select> <option value="2009">2009</option> <option value="2008">2008</option> </select> </fieldset><fieldset><legend>Account details</legend> <label>E-Mail</label> <input maxlength="120" placeholder="wammy@bocahit.com" type="text" value="" /> <label>Password</label> <input maxlength="20" placeholder="******" type="password" /> </fieldset><fieldset><a class="button" href="http://www.blogger.com/blogger.g?blogID=6116493370491553443#">Enter</a> </fieldset></form><br /><br/><br/><br/>

Cara Membuat Formulir Pendaftaran Dengan CSS3

Cara Membuat Formulir Pendaftaran Dengan CSS3 | Hai, ketemu lagi dengan saya, Wammy. Kali ini, sedikit berbagi tentang CSS3. Lebih tepatnya ...

Baca selengkapnya »