Modifikasi Form Login Dengan CSS3 Dan Javascript

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXMSXNYR1BAYNM6J2Q6oNB9lzAy7entYNasdZ6HnQNXRpepg0g2LAQXAk9sYg5N0_Ev_QotdFDduG8eovm-zSmFFi4dGKmxpd3jXdXfnf70yH5bMoaHQuWan4ZhvkSeNOH0UvHNUEG5c-/s324/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Form Login Dengan CSS3 Dan Javascript" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXMSXNYR1BAYNM6J2Q6oNB9lzAy7entYNasdZ6HnQNXRpepg0g2LAQXAk9sYg5N0_Ev_QotdFDduG8eovm-zSmFFi4dGKmxpd3jXdXfnf70yH5bMoaHQuWan4ZhvkSeNOH0UvHNUEG5c-/s320/Capture.PNG" title="Modifikasi Form Login Dengan CSS3 Dan Javascript" width="320" /></a></div><br />Modifikasi Form Login Dengan CSS3 Dan Javascript | Form login biasa muncul di web dinamis. Yang awalnya hanya kumpulan dari <table> dan <input>, kali ini hanya <input> yang di modifikasi dengan CSS3 dan JS. Hanya sedikit dan tidak terlalu rumit. Pemakaian yang hemat tempat.<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;">JS, Form Login</span></h3>Anda bisa download dan lihat script via Dropbox. Atau sama seperti punya saya. (Upload Via Yourjavascript.com).<br /><pre><script type="text/javascript" src="http://yourjavascript.com/232147282/modernizr-custom-63321.js"></script></pre><br /><div style="text-align: center;"> <a alt="js" class="button" href="https://www.dropbox.com/s/s85gd77xln8a1ys/modernizr.custom.63321.js" title="JSnya">Download JS Via Dropbox</a></div><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, Form Login</span></h3><pre class="brush:js;"><style type="text/css"><br />*,<br />*:after,<br />*:before {<br />    -webkit-box-sizing: border-box;<br />    -moz-box-sizing: border-box;<br />    -ms-box-sizing: border-box;<br />    -o-box-sizing: border-box;<br />    box-sizing: border-box;<br />    padding: 0;<br />    margin: 0;<br />}<br /><br />.clearfix:after {<br />    content: "";<br />    display: table;<br />    clear: both;<br />}<br /><br />.bocahform {<br />    font-family: 'Coda';<br />    font-weight: 400;<br />    /* Size and position */<br />    width: 300px;<br />    position: relative;<br />    margin: 60px auto 30px;<br />    padding: 10px;<br />    overflow: hidden;<br /><br />    /* Styles */<br />    background: #111; <br />    border-radius: 0.4em;<br />    border: 1px solid #191919;<br />    box-shadow: <br />        inset 0 0 2px 1px rgba(255,255,255,0.08), <br />        0 16px 10px -8px rgba(0, 0, 0, 0.6);<br />}<br /><br />.bocahform label {<br />    /* Size and position */<br />    width: 50%;<br />    float: left;<br />    padding-top: 9px;<br /><br />    /* Styles */<br />    color: #ddd;<br />    font-size: 12px;<br />    text-transform: uppercase;<br />    letter-spacing: 1px;<br />    text-shadow: 0 1px 0 #000;<br />    text-indent: 10px;<br />    font-weight: 700;<br />    cursor: pointer;<br />}<br /><br />.bocahform input[type=text],<br />.bocahform input[type=password] {<br />    /* Size and position */<br />    width: 50%;<br />    float: left;<br />    padding: 8px 5px;<br />    margin-bottom: 10px;<br />    font-size: 12px;<br /><br />    /* Styles */<br />    background: #1f2124; /* Fallback */<br />    background: -moz-linear-gradient(#1f2124, #27292c);<br />    background: -ms-linear-gradient(#1f2124, #27292c);<br />    background: -o-linear-gradient(#1f2124, #27292c);<br />    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));<br />    background: -webkit-linear-gradient(#1f2124, #27292c);<br />    background: linear-gradient(#1f2124, #27292c);   <br />    border: 1px solid #000;<br />    box-shadow:<br />        0 1px 0 rgba(255,255,255,0.1);<br />    border-radius: 3px;<br /><br />    /* Font styles */<br />    font-family: 'Ubuntu', 'Lato', sans-serif;<br />    color: #fff;<br /><br />}<br /><br />.bocahform input[type=text]:hover,<br />.bocahform input[type=password]:hover,<br />.bocahform label:hover ~ input[type=text],<br />.bocahform label:hover ~ input[type=password] {<br />    background: #27292c;<br />}<br /><br />.bocahform input[type=text]:focus, <br />.bocahform input[type=password]:focus {<br />    box-shadow: inset 0 0 2px #000;<br />    background: #494d54;<br />    border-color: #51cbee;<br />    outline: none; /* Remove Chrome outline */<br />}<br /><br />.bocahform p:nth-child(3),<br />.bocahform p:nth-child(4) {<br />    float: left;<br />    width: 50%;<br />}<br /><br />.bocahform label[for=remember] {<br />    width: auto;<br />    float: none;<br />    display: inline-block;<br />    text-transform: capitalize;<br />    font-size: 11px;<br />    font-weight: 400;<br />    letter-spacing: 0px;<br />    text-indent: 2px;<br />}<br /><br />.bocahform input[type=checkbox] {<br />    margin-left: 10px;<br />    vertical-align: middle;<br />}<br /><br />.bocahform input[type=submit] {<br />    /* Width and position */<br />    width: 100%;<br />    padding: 8px 5px;<br />  <br />    /* Styles */<br />    border: 1px solid #0273dd; /* Fallback */<br />    border: 1px solid rgba(0,0,0,0.4);<br />    box-shadow:<br />        inset 0 1px 0 rgba(255,255,255,0.3),<br />        inset 0 10px 10px rgba(255,255,255,0.1);<br />    border-radius: 3px;<br />    background: #38a6f0;<br />    cursor:pointer;<br />  <br />    /* Font styles */<br />    font-family: 'Ubuntu', 'Lato', sans-serif;<br />    color: white;<br />    font-weight: 700;<br />    font-size: 15px;<br />    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);<br />}<br /><br />.bocahform input[type=submit]:hover { <br />    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);<br />}<br /><br />.bocahform input[type=submit]:active { <br />    background: #287db5;<br />    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);<br />    border-color: #000; /* Fallback */<br />    border-color: rgba(0,0,0,0.9);<br />}<br /><br />.no-boxshadow .bocahform input[type=submit]:hover {<br />    background: #2a92d8;<br />}<br /><br />.bocahform:after {<br />    /* Size and position */<br />    content: "";<br />    height: 1px;<br />    width: 33%;<br />    position: absolute;<br />    left: 20%;<br />    top: 0;<br /><br />    /* Styles */<br />    background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));<br />    background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />}<br /><br />.bocahform:before {<br />    /* Size and position */<br />    content: "";<br />    width: 8px;<br />    height: 5px;<br />    position: absolute;<br />    left: 34%;<br />    top: -7px;<br />    <br />    /* Styles */<br />    border-radius: 50%;<br />    box-shadow: 0 0 6px 4px #fff;<br />}<br /><br />.bocahform p:nth-child(1):before{<br />    /* Size and position */<br />    content:"";<br />    width:250px;<br />    height:100px;<br />    position:absolute;<br />    top:0;<br />    left:45px;<br /><br />    /* Styles */<br />    -webkit-transform: rotate(75deg);<br />    -moz-transform: rotate(75deg);<br />    -ms-transform: rotate(75deg);<br />    -o-transform: rotate(75deg);<br />    transform: rotate(75deg);<br />    background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    pointer-events:none;<br />}<br /><br />.no-pointerevents .bocahform p:nth-child(1):before {<br />    display: none;<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, Form Login</span></h3><pre class="brush:js;"><section class="main"><br />                <form class="bocahform"><br />                    <p class="clearfix"><br />                        <label for="login">Username</label><br />                        <input type="text" name="login" id="login" placeholder="Username"><br />                    </p><br />                    <p class="clearfix"><br />                        <label for="password">Password</label><br />                        <input type="password" name="password" id="password" placeholder="Password"> <br />                    </p><br />                    <p class="clearfix"><br />                        <input type="checkbox" name="remember" id="remember"><br />                        <label for="remember">Remember me</label><br />                    </p><br />                    <p class="clearfix"><br />                        <input type="submit" name="submit" value="Sign in"><br />                    </p>      <br />                </form>​<br />            </section></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/afterbefore-webkit-box-sizing-border.html" target="_blank" title="ILUSTRASI">ILUSTRASI</a></div>

Modifikasi Form Login Dengan CSS3 Dan Javascript

Modifikasi Form Login Dengan CSS3 Dan Javascript | Form login biasa muncul di web dinamis. Yang awalnya hanya kumpulan dari <table> da...

Baca selengkapnya »

Template Blogger W#1 HTML5 Untuk Blog Guru

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDinz7aRZbcNhA_bFNR01BZal74f1GAABgYCgDrt_gnTfsJ80nZTigd6h-6nMASPEWC-GiJpGGnjEe47rwl22ufctRuFmy5bZmZoTCk4QAsx1Ce0qFgGmDej8887DxuxGTorAy1hid0oY/s1460/W%231.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger W#1 HTML5 Untuk Blog Guru" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDinz7aRZbcNhA_bFNR01BZal74f1GAABgYCgDrt_gnTfsJ80nZTigd6h-6nMASPEWC-GiJpGGnjEe47rwl22ufctRuFmy5bZmZoTCk4QAsx1Ce0qFgGmDej8887DxuxGTorAy1hid0oY/s320/W%231.png" title="Template Blogger W#1 HTML5 Untuk Blog Guru" width="295" /></a></div><br />Template Blogger W1 HTML5 Untuk Blog Guru | Alhamdulillah, kejadian juga. Dari dulu pengen banget yang namanya Design Template Blogger. Ini adalah template perdana. Karna itu namanya W1 alias Wammy #1. Template ini, dibuat dengan HTML5. Kenapa harus HTML5? jawaban <a href="http://www.bocahit.com/2013/01/kenapa-wammy-san-pilih-html5.html" target="_blank">disini</a>. Blog ini, saya tujukan ke pada guru - guru yang memiliki blog untuk kepentingan mengajar. Kenapa harus guru? saya sendiri juga tidak tahu kenapa. Template yang sangat sederhana, dan memiliki :<br /><ol><li>Fast Loading</li><li>Auto Readmore</li><li>Search JSON</li><li>Recent Post JSON</li><li>Recent Comment JSON</li><li>Threaded Comment</li><li>Related Post</li><li>Breadcrumb</li><li>SEO <a href="http://chkme.com/seo-my-dang.blogspot.com" title="SEO Reports for my-dang.blogspot.com"><img alt="SEO Reports for my-dang.blogspot.com" src="http://chkme.com/seo-my-dang.blogspot.com.png" title="SEO Reports for my-dang.blogspot.com" /></a></li></ol><br />Juga memakai model Search JSON Blogger. Sehingga pencarian jauh lebih cepat. Ditambah dengan 3 level menu dropdown.<br /><br /><div style="text-align: center;"><a class="button" href="http://template-blog-guru.blogspot.com/" target="_blank">DEMO W#1</a>                <a class="button" href="http://www.mediafire.com/download/n5z5t3lhvvd30lu/W%231_Blog_Guru.zip" target="_blank">Download W#1</a></div><br />Biar jelek yang penting karya sendiri. : D

Template Blogger W#1 HTML5 Untuk Blog Guru

Template Blogger W1 HTML5 Untuk Blog Guru | Alhamdulillah, kejadian juga. Dari dulu pengen banget yang namanya Design Template Blogger. Ini ...

Baca selengkapnya »

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLiABIZ0a2oZiz5hAwe2gAOhYWFvmZvJ1Ndc5-zIUikNXOPzMaaf-_pWnpOw__p6ZDMhtXcgmFrmmVsF23-4O3bUJGTIV46P1d5qFTLschFvzZrafeAQ-26N9u8aQzhqk1IYJiNTbBtDp/s419/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLiABIZ0a2oZiz5hAwe2gAOhYWFvmZvJ1Ndc5-zIUikNXOPzMaaf-_pWnpOw__p6ZDMhtXcgmFrmmVsF23-4O3bUJGTIV46P1d5qFTLschFvzZrafeAQ-26N9u8aQzhqk1IYJiNTbBtDp/s320/Capture.PNG" title="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" width="320" /></a></div>Membuat Waktu Pemberitahuan Dengan CSS3 & Modernizr | Masih di kategori <a href="http://www.bocahit.com/search/label/Kreasiku" target="_blank">Kreasiku</a>. Dan masih di CSS. Sekarang apa yang anda pikirkan tentang judul diatas? aku sendiri juga tidak paham. Pokoknya Waktu Pemberitahuan Dengan CSS3 dan Javascript. Asal mula javascript dari Modernizr, jadi bukan dari Wammy yang masih bodoh ini. Kalau tidak percaya, lihat <a href="http://modernizr.com/">modernizr.com</a>.<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;">MODERNIZR, Waktu Pemberitahuan Konyol</span></h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCzVbIaGgkZNcHNyN0LocTtOuDmJrAVTTvREPxQurh5KW8CnaBP7rnUPyd0v1pxqjbrVnEo8GrGAOQFBjSW-tuk0Bg4MCUyqM6P5lE5qBeCEygShGdhn6qlgY0mSoB-NEWhEL4FoL-6FO/s1100/js.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCzVbIaGgkZNcHNyN0LocTtOuDmJrAVTTvREPxQurh5KW8CnaBP7rnUPyd0v1pxqjbrVnEo8GrGAOQFBjSW-tuk0Bg4MCUyqM6P5lE5qBeCEygShGdhn6qlgY0mSoB-NEWhEL4FoL-6FO/s400/js.PNG" title="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" width="400" /></a></div><br />Kelihatan tidak? kalau ingin yang simple<br /><pre><script type="text/javascript" src="<a href="http://yourjavascript.com/21189526931/modernizr-custom-39460.js" target="_blank">http://yourjavascript.<wbr></wbr>com/21189526931/modernizr-<wbr></wbr>custom-39460.js</a>"></script></pre><br />Tapi kalau mau download.<br /><div style="text-align: center;"><a href="http://www.mediafire.com/download/ej6sncw74zcnh4s/modernizr.custom.39460.js" target="_blank">DOWNLOAD MODERNIZR</a> </div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/check-this-hai-there-im-herlambang.html" target="_blank">ILUSTRASI 1</a>                   <a class="button" href="http://herlambang.net78.net/?menu=profil" target="_blank">ILUSTRASI 2</a></div><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, Waktu Pemberitahuan Konyol</span></h3><pre class="brush:js;"><style type="text/css"><br />.wammy-box {<br />    width: 360px;<br />    position: relative;<br />    margin: 0 auto 20px auto;<br />    padding: 25px 15px;<br />    text-align: left;<br />    border-radius: 5px;<br />        box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);  <br />    opacity: 0;<br />    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />    filter: alpha(opacity=0);    <br />    cursor: default;<br />    display: none;<br />}<br /><br />.wammy-box p {<br />    font-weight: bold;<br />    font-size: 16px;<br />    margin: 0;<br />    padding: 0 10px 0 60px;<br />    text-shadow: 0 1px 1px rgba(255,255,255,0.6);<br />}<br />.wammy-box p:before{<br />    text-align: center;<br />    border: 3px solid rgba(255, 255, 255, 1);<br />    margin-top: -17px;<br />    top: 50%;<br />    left: 20px;<br />    width: 30px;<br />    content: 'i';<br />    font-size: 30px;<br />    color: rgba(255, 255, 255, 1);<br />    position: absolute;<br />    height: 30px;<br />    line-height: 30px;<br />    border-radius: 50%;<br />    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);<br />    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);<br />}<br /><br />.wammy-progress {<br />    width: 0;<br />    height: 4px;<br />    background: rgba(255,255,255,0.3);<br />    position: absolute;<br />    bottom: 5px;<br />    left: 2%;<br />    border-radius: 3px;<br />    box-shadow: <br />        inset 0 1px 1px rgba(0,0,0,0.05), <br />        0 -1px 0 rgba(255,255,255,0.6);<br />}<br /><br />/* Warna Kotak */<br /><br />.wammy-box-color-1{<br />    background: #ff00b6;<br />    border: 1px solid #ff00b6;<br />}<br />.wammy-box-color-1 p {<br />    color: #7d5912;<br />}<br /><br />.wammy-box-color-2{<br />    background: #99ffb1;<br />    border: 1px solid #7ce294;<br />}<br />.wammy-box-color-2 p {<br />    color: #2d8241;<br />}<br /><br />.wammy-box-color-3{<br />    background: #a6fdbf;<br />    border: 1px solid #a6fdbf;<br />}<br />.wammy-box-color-3 p {<br />    color: #69288b;<br />}<br /><br /><br />input.klo-check:checked ~ section .wammy-box {<br />    display: block;<br />    -webkit-animation: fadeOut 5s linear forwards;<br />    -moz-animation: fadeOut 5s linear forwards;<br />    -o-animation: fadeOut 5s linear forwards;<br />    -ms-animation: fadeOut 5s linear forwards;<br />    animation: fadeOut 5s linear forwards;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box .wammy-progress {<br />    -webkit-animation: runProgress 4s linear forwards 0.5s;<br />    -moz-animation: runProgress 4s linear forwards 0.5s;<br />    -o-animation: runProgress 4s linear forwards 0.5s;<br />    -ms-animation: runProgress 4s linear forwards 0.5s;<br />    animation: runProgress 4s linear forwards 0.5s;<br />}<br /><br />/* <span class="" id="result_box" lang="id"><span class="hps">Jika menggunakan</span> <span class="hps">JavaScript</span> <span class="hps">anda bisa</span> <span class="hps">menambahkan class</span><span class="hps"></span></span>: */<br /><br />.wammy-box.wammy-box-active {<br />    display: block;<br />    -webkit-animation: fadeOut 5s linear forwards;<br />    -moz-animation: fadeOut 5s linear forwards;<br />    -o-animation: fadeOut 5s linear forwards;<br />    -ms-animation: fadeOut 5s linear forwards;<br />    animation: fadeOut 5s linear forwards;<br />}<br /><br />.wammy-box.wammy-box-active .wammy-progress {<br />    -webkit-animation: runProgress 4s linear forwards 0.5s;<br />    -moz-animation: runProgress 4s linear forwards 0.5s;<br />    -o-animation: runProgress 4s linear forwards 0.5s;<br />    -ms-animation: runProgress 4s linear forwards 0.5s;<br />    animation: runProgress 4s linear forwards 0.5s;<br />}<br /><br /><br />@-webkit-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -webkit-transform: translateY(0px);}<br />    99% { opacity: 0; -webkit-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-moz-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -moz-transform: translateY(0px);}<br />    99% { opacity: 0; -moz-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-o-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -o-transform: translateY(0px);}<br />    99% { opacity: 0; -o-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-ms-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -ms-transform: translateY(0px);}<br />    99% { opacity: 0; -ms-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; transform: translateY(0px);}<br />    99% { opacity: 0; transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-webkit-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@-moz-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@-o-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@-ms-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br /><br />/*Membedakan durasi*/<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(2) {<br />    -webkit-animation-duration: 6s;<br />    -moz-animation-duration: 6s;<br />    -o-animation-duration: 6s;<br />    -ms-animation-duration: 6s;<br />    animation-duration: 6s;<br />    <br />    -webkit-animation-delay: 0.2s;<br />    -moz-animation-delay: 0.2s;<br />    -o-animation-delay: 0.2s;<br />    -ms-animation-delay: 0.2s;<br />    animation-delay: 0.2s;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(2) .wammy-progress {<br />    -webkit-animation-duration: 5s;<br />    -moz-animation-duration: 5s;<br />    -o-animation-duration: 5s;<br />    -ms-animation-duration: 5s;<br />    animation-duration: 5s;<br />    <br />    -webkit-animation-delay: 0.7s;<br />    -moz-animation-delay: 0.7s;<br />    -o-animation-delay: 0.7s;<br />    -ms-animation-delay: 0.7s;<br />    animation-delay: 0.7s;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(3) {<br />    -webkit-animation-duration: 9s;<br />    -moz-animation-duration: 9s;<br />    -o-animation-duration: 9s;<br />    -ms-animation-duration: 9s;<br />    animation-duration: 9s;<br />    <br />    -webkit-animation-delay: 0.4s;<br />    -moz-animation-delay: 0.4s;<br />    -o-animation-delay: 0.4s;<br />    -ms-animation-delay: 0.4s;<br />    animation-delay: 0.4s;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(3) .wammy-progress {<br />    -webkit-animation-duration: 7.5s;<br />    -moz-animation-duration: 7.5s;<br />    -o-animation-duration: 7.5s;<br />    -ms-animation-duration: 7.5s;<br />    animation-duration: 7.5s;<br />    <br />    -webkit-animation-delay: 0.9s;<br />    -moz-animation-delay: 0.9s;<br />    -o-animation-delay: 0.9s;<br />    -ms-animation-delay: 0.9s;<br />    animation-delay: 0.9s;<br />}<br /><br />/* hover mengatasi masalah browser */<br /><br />.wammy-box.wammy-box-hoverpause:hover, <br />.wammy-box.wammy-box-hoverpause:hover .wammy-progress{<br />    -webkit-animation-play-state: paused;<br />    -moz-animation-play-state: paused;<br />    -o-animation-play-state: paused;<br />    -ms-animation-play-state: paused;<br />    animation-play-state: paused;<br />}</pre><pre class="brush:js;"></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, Waktu Pemberitahuan Konyol</span></h3><pre class="brush:js;"><section><br />            <br />                <div class="wammy-box wammy-box-color-1"><br />                    <p>Hai, There! I'm Herlambang!</p><br />                    <div class="wammy-progress"></div><br />                </div><br />                <br />                <div class="wammy-box wammy-box-color-2"><br />                    <p>Wammy! Just my nick! I'm Developer!</</p><br />                    <div class="wammy-progress"></div><br />                </div><br />                <br />                <div class="wammy-box wammy-box-color-3"><br />                    <p>Visit, www.bocahit.com<p><br />                    <div class="wammy-progress"></div><br />                </div><br />                <br />            </section></pre><br />Hauf, sering - sering klik back to top ya.<br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/check-this-hai-there-im-herlambang.html" target="_blank">ILUSTRASI</a> </div>

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

Membuat Waktu Pemberitahuan Dengan CSS3 & Modernizr | Masih di kategori Kreasiku . Dan masih di CSS. Sekarang apa yang anda pikirkan ten...

Baca selengkapnya »

Membuat Pure Slider Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeQ5yHyB_XPQ3l_ehKYXA7e8qNtOgrovzPzvTcluhyCJXZasL-niIlM3YCc_5TpbetCwIBCmDM2d4h-dhjjzJngirhFYGXiqZrfUuVVFHlAPslczMPCE-RLScK11kti3YCtAeaEjLjN6U/s612/Pure.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Pure Slider Dengan CSS3 " border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeQ5yHyB_XPQ3l_ehKYXA7e8qNtOgrovzPzvTcluhyCJXZasL-niIlM3YCc_5TpbetCwIBCmDM2d4h-dhjjzJngirhFYGXiqZrfUuVVFHlAPslczMPCE-RLScK11kti3YCtAeaEjLjN6U/s320/Pure.PNG" title="Membuat Pure Slider Dengan CSS3 " width="320" /></a></div><br />Membuat Pure Slider Dengan CSS3 | Seperti janji ku kemarin, kalau akan share tentang slider. Nah seperti kemarin menggunakan CSS3 tanpa JS atau jquery. Jadi mudah ketika mengatur ini dan itu. Slider ini pantas di letakkan pada homepage saja, memang karena ukuran yang relatif membuat sesak blog. Jadi silakan bagi anda yang ingin memakai slider ini.<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/layout.html" target="_blank">ILUSTRASI</a> </div><br />Kalau ada link download kan itu terlalu mainstream, sekarang anda ambil saja code di bawah ini.<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, CSS3 PURE SLIDER</span></h3><pre class="brush:js;"><style type="text/css"><br />/* LAYOUT */<br />.bocahit {<br />margin:0 auto;<br />overflow:hidden;<br />width:960px;<br />}<br /><br />/* CONTENT SLIDER */<br />#content-slider {<br />width:100%;<br />height:360px;<br />margin:10px auto 0;<br />}<br />/* SLIDER */<br />#slider {<br />background:#000;<br />border:5px solid #eaeaea;<br />box-shadow:1px 1px 5px rgba(0,0,0,0.7);<br />height:320px;<br />width:600px;<br />overflow:visible;<br />position:relative;<br />}<br />#wammy {<br />overflow:hidden;<br />height:320px;<br />}<br />#slider ul {<br />margin:0;<br />padding:0;<br />position:relative;<br />}<br />#slider li {<br />width:680px;<br />height:320px;<br />position:absolute;<br />top:-325px;<br />list-style:none;<br />}<br /><br />#slider li.firstanimation {<br />-moz-animation:cycle 25s linear infinite;<br />-webkit-animation:cycle 25s linear infinite;<br />}<br />#slider li.secondanimation {<br />-moz-animation:cycletwo 25s linear infinite;<br />-webkit-animation:cycletwo 25s linear infinite;<br />}<br />#slider li.thirdanimation {<br />-moz-animation:cyclethree 25s linear infinite;<br />-webkit-animation:cyclethree 25s linear infinite;<br />}<br />#slider li.fourthanimation {<br />-moz-animation:cyclefour 25s linear infinite;<br />-webkit-animation:cyclefour 25s linear infinite;<br />}<br />#slider li.fifthanimation {<br />-moz-animation:cyclefive 25s linear infinite;<br />-webkit-animation:cyclefive 25s linear infinite;<br />}<br /><br />#slider .tooltip {<br />background:rgba(0,0,0,0.7);<br />width:300px;<br />height:60px;<br />position:relative;<br />bottom:75px;<br />left:-320px;<br />-moz-transition:all 0.3s ease-in-out;<br />-webkit-transition:all 0.3s ease-in-out;<br />}<br />#slider .tooltip p {<br />color:#fff;<br />font:"Coda";<br />font-size:24px;<br />font-weight:300;<br />line-height:60px;<br />padding:0 0 0 20px;<br />}<br />#slider li#first:hover .tooltip,<br />#slider li#second:hover .tooltip,<br />#slider li#third:hover .tooltip,<br />#slider li#fourth:hover .tooltip,<br />#slider li#fifth:hover .tooltip {<br />left:0px;<br />}<br />#slider:hover li,<br />#slider:hover .progress-bar {<br />-moz-animation-play-state:paused;<br />-webkit-animation-play-state:paused;<br />}<br /><br />/* PROGRESS BAR */<br />.progress-bar {<br />position:relative;<br />top:-5px;<br />width:680px;<br />height:5px;<br />background:#000;<br />-moz-animation:fullexpand 25s ease-out infinite;<br />-webkit-animation:fullexpand 25s ease-out infinite;<br />}<br />/* ANIMATION */<br />@-moz-keyframes cycle {<br />0% { top:0px; }<br />4% { top:0px; }<br />16% { top:0px; opacity:1; z-index:0; }<br />20% { top:325px; opacity:0; z-index:0; }<br />21% { top:-325px; opacity:0; z-index:-1; }<br />92% { top:-325px; opacity:0; z-index:0; }<br />96% { top:-325px; opacity:0; }<br />100%{ top:0px; opacity:1; }<br /><br />}<br />@-moz-keyframes cycletwo {<br />0% { top:-325px; opacity:0; }<br />16% { top:-325px; opacity:0; }<br />20% { top:0px; opacity:1; }<br />24% { top:0px; opacity:1; }<br />36% { top:0px; opacity:1; z-index:0; }<br />40% { top:325px; opacity:0; z-index:0; }<br />41% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclethree {<br />0% { top:-325px; opacity:0; }<br />36% { top:-325px; opacity:0; }<br />40% { top:0px; opacity:1; }<br />44% { top:0px; opacity:1; }<br />56% { top:0px; opacity:1; }<br />60% { top:325px; opacity:0; z-index:0; }<br />61% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclefour {<br />0% { top:-325px; opacity:0; }<br />56% { top:-325px; opacity:0; }<br />60% { top:0px; opacity:1; }<br />64% { top:0px; opacity:1; }<br />76% { top:0px; opacity:1; z-index:0; }<br />80% { top:325px; opacity:0; z-index:0; }<br />81% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclefive {<br />0% { top:-325px; opacity:0; }<br />76% { top:-325px; opacity:0; }<br />80% { top:0px; opacity:1; }<br />84% { top:0px; opacity:1; }<br />96% { top:0px; opacity:1; z-index:0; }<br />100%{ top:325px; opacity:0; z-index:0; }<br />}<br /><br />@-webkit-keyframes cycle {<br />0% { top:0px; }<br />4% { top:0px; }<br />16% { top:0px; opacity:1; z-index:0; }<br />20% { top:325px; opacity:0; z-index:0; }<br />21% { top:-325px; opacity:0; z-index:-1; }<br />50% { top:-325px; opacity:0; z-index:-1; }<br />92% { top:-325px; opacity:0; z-index:0; }<br />96% { top:-325px; opacity:0; }<br />100%{ top:0px; opacity:1; }<br /><br />}<br />@-webkit-keyframes cycletwo {<br />0% { top:-325px; opacity:0; }<br />16% { top:-325px; opacity:0; }<br />20% { top:0px; opacity:1; }<br />24% { top:0px; opacity:1; }<br />36% { top:0px; opacity:1; z-index:0; }<br />40% { top:325px; opacity:0; z-index:0; }<br />41% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclethree {<br />0% { top:-325px; opacity:0; }<br />36% { top:-325px; opacity:0; }<br />40% { top:0px; opacity:1; }<br />44% { top:0px; opacity:1; }<br />56% { top:0px; opacity:1; z-index:0; }<br />60% { top:325px; opacity:0; z-index:0; }<br />61% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclefour {<br />0% { top:-325px; opacity:0; }<br />56% { top:-325px; opacity:0; }<br />60% { top:0px; opacity:1; }<br />64% { top:0px; opacity:1; }<br />76% { top:0px; opacity:1; z-index:0; }<br />80% { top:325px; opacity:0; z-index:0; }<br />81% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclefive {<br />0% { top:-325px; opacity:0; }<br />76% { top:-325px; opacity:0; }<br />80% { top:0px; opacity:1; }<br />84% { top:0px; opacity:1; }<br />96% { top:0px; opacity:1; z-index:0; }<br />100%{ top:325px; opacity:0; z-index:0; }<br />}<br /><br />/* ANIMATION BAR */<br />@-moz-keyframes fullexpand {<br />0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }<br />4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }<br />16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }<br />17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }<br />18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }<br />}<br />@-webkit-keyframes fullexpand {<br />0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }<br />4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }<br />16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }<br />17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }<br />18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }<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, CSS3 PURE SLIDER </span></h3><pre class="brush:js;"><div class="bocahit"><br /><div id="content-slider"><br /><div id="slider"><br /><div id="wammy"><br /><ul><br /><li id="first" class="firstanimation"><br /><a href="http://www.bocahit.com/search/label/Pemrograman"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iFEXFHk6Uz61UFh3PIxy3ANZjosKmt2kTnz-od6fYmGsmWqmnsOJ10I72Mi_PCFoeC-ibk-Albtd8owmJpLKC9AMKPvzxyg7KMNdWzwuVOB8-VWEVsE2gU9LatKf4v-wojJx-WGLXBmv/s680/C.png" alt="Pemrograman Bahasa C"/><br /></a><br /><div class="tooltip"><br /><p>Pemrograman C</p><br /></div><br /></li><br /><br /><li id="second" class="secondanimation"><br /><a href="http://www.bocahit.com/search/label/Cosplay"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJcYHZcAgze_SKmULrmsKRi3mYsxgJcAg0SDUfXNRiWvqsrSjG5vF_oRdKSvQZH902i7HQZGgjyfwwnW6e5yZWWRjHMMV-KJRyOJYoTxSgVeXlpXMpiL5FDMTzXmrMZk4EqzO7qLtdur9f/s680/CZ.png" alt="Tips Jitu Cosplayer"/><br /></a><br /><div class="tooltip"><br /><p>Tips Jitu Cosplayer</p><br /></div><br /></li><br /><br /><li id="third" class="thirdanimation"><br /><a href="#"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56CpbT0egHIjh0BBMcGkNXTvhVNyFz1dLKOTG8Fx5J0SrnM9NMfx3pNepp42Y3awvUe7LjIzWIguoc03SbJ8lQUwfAhtF_lm4oOni9TUNQfPgGIeae_2fvJLk2uIKCP1qrlZ99BE6KC44/s680/City%2520Hunter.png" alt="Info Figure"/><br /></a><br /><div class="tooltip"><br /><p>Info Figure</p><br /></div><br /></li><br /><br /><li id="fourth" class="fourthanimation"><br /><a href="http://www.bocahit.com/search/label/SEO"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWVhoo-H5ht0LlZJ9ix4LmjEE_Yy3V8K3i15RE8jMw7S8rGui0VWbgY6wPAzPo0nVCSl3qFGa4nGbJDOZrJE5woAaOP0tHVL8tVYRbFPlX2TAy-EB0lQPVC3_ISK9BMyJQwToUohyphenhyphenoizP/s680/SEO.png" alt="Tips SEO"/><br /></a><br /><div class="tooltip"><br /><p>Tips SEO</p><br /></div><br /></li><br /><br /><li id="fifth" class="fifthanimation"><br /><a href="http://www.bocahit.com/search/label/Blogger"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJaUC2yrwfvMOu8C9LTFJTIr-CefDuX2ElBFZMwUGXK4Cv6ybZTBsdWiJmUtltkKTUolztWPshvHPD-hPzMlLPIr8zRMKZNVfLvi8eLljFfac6rTP6RvUwOHOBSTLTFTLCtDP7xH-fjDf/s680/blog.png" alt="Tutorial Blog"/><br /></a><br /><div class="tooltip"><br /><p>Tutorial Blogger</p><br /></div><br /></li><br /></ul><br /></div><br /><div class="progress-bar"></div><br /></div><br /></div><br /></div></pre><br />Panjangkah?semakin panjang semakin asik aja,,Selamat Mencoba :D

Membuat Pure Slider Dengan CSS3

Membuat Pure Slider Dengan CSS3 | Seperti janji ku kemarin, kalau akan share tentang slider. Nah seperti kemarin menggunakan CSS3 tanpa JS a...

Baca selengkapnya »

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

Baca selengkapnya »