Solucior for our Solution

Biar semangat lagi para sobat Beben mendalami What's The CSS3. Postingan sebelum²nya juga Beben Koben si bloglang anu ganteng kalem tea sudah memberikan beberapa dari feature of css 3.
Kali ini datang dari web Solucior website yang menyuguhkan solusi dari beberapa trick ;) Biar menambah greget ada apa saja disana, sobat dapat melihat beberapa trik hasil karya Mr "S" b-) Solucior meliputi kategori: php » javascript » css » htaccess » MySQL. Jadi kalau ada masalah dengan category diatas bisa kontak kali ;)) Masalahnya konten web-nya masih sedikit :D Biar sedikit berguna cekali buat kita para newbie :"> Okelah kalau begitu, let's get de done we cek some demo's here my bro :)>-

Rotate and scale with CSS 3

Click here to rotate and scale


Hover your Mouse!!!

That's good right :D

Code-Code 1

.putar {
height:200px;
}

.putar1 {
height:200px;
-webkit-transition:1.5s all ease-in-out;
-moz-transition:1.5s all ease-in-out;
-o-transition:1.5s all ease-in-out;
transition:1.5s all ease-in-out;
}

.putar2 {
height:200px;
-webkit-transition:1.5s all ease-in-out;
-moz-transition:1.5s all ease-in-out;
-o-transition:1.5s all ease-in-out;
transition:1.5s all ease-in-out;
-webkit-transform:rotate(360deg) scale(-1, -1);
-moz-transform:rotate(360deg) scale(-1, -1);
-o-transform:rotate(360deg) scale(-1, -1);
transform:rotate(360deg) scale(-1, -1);
}

Pemakaian
<img src="http://your-link-image-here.png" id="imgeffect" class="putar" /><br />

<a href="javascript:void(0)" onclick="document.getElementById('imgeffect').className = (document.getElementById('imgeffect').className == 'putar2') ? 'putar1' : 'putar2';">

Click here to rotate and scale

</a>
Tulisan imgeffect merupakan unique ID. Bisa sobat ganti dengan apa saja, tapi harus sama ya :)

Code-Code 2

.trans-form {
display:block;
width:150px;
background:#F0F;
color:#000;
-webkit-transition:.7s all ease-in-out;
-moz-transition:.7s all ease-in-out;
-o-transition:.7s all ease-in-out;
transition:.7s all ease-in-out;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:1px solid #000;
margin:0 auto;
padding:10px;
}

.trans-form:hover {
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
box-shadow:2px 2px 5px #000;
-webkit-box-shadow:2px 2px 5px #000;
}

Pemakaian
<a href="javascript:void(0)" class="trans-form"><img src="http://your-link-image-here.png" alt="" /></a>

It's simple but funny, try this my bro A link with confirm!
<a href="http://beben-koben.blogspot.com/" onclick="return confirm('TEXT YANG AKAN DITAMPILKAN')" target="top">A link with confirm</a>

Javascript Image Magnification/Zoom Simple

Struktur kode image magnification so simple.

<!-- JavaScript -->

<script type="text/javascript">
<!--
function zoom(e, sens) {
 var elm = document.getElementById(e);
 var w = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
 var wc = (elm.parentNode.offsetWidth) ? elm.parentNode.offsetWidth : elm.parentNode.style.pixelWidth;
 w = (sens > 0) ? w * 1.35 : w / 1.35;
 if (w < wc) w = wc;
 elm.style.width = w + "px";
}
-->
</script>

<!-- Kode CSS -->

<style>
#zoom {
width: 400px;
height: 500px;
overflow: scroll;
border: 1px solid #500;
text-align: center;
margin: 0 auto;
}
</style>

<!-- Kode HTML (pemakaian) -->

<div id="zoom">
<img id="beben" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJWhwe7rPKFpwjhCBq-ox9qJ8s_245T4GGT9u3xDfF9-A6Nr1D9tB72GQffv1gq2ahfsr8EPFS8rovccc2kKQrkY43bAx3z4BW8faQQvOvKYip6V6iHchEI2wlBFu3FGwjOJ8x_OhXn6F/s512/cg-robots-18.jpg" alt="cg-robots" style="width:100%" />
</div>
<center>
<input type="button" value="-" onclick="zoom('beben', -1)" /> ZOOM
<input type="button" value="+" onclick="zoom('beben', 1)" />
</center>

Keterangan:

• JavaScript
Dahulukan letakan diatas tag </body>. Kalau tidak berfungsi baru dicoba sebelum tag </head>
• Kode CSS
Sisipkan sebelum tag </b:skin>
• Kode HTML (pemakaian)
Disesi postingan or gadget ;) Ada tulisan beben itu merupakan Unique ID bisa apa saja, tapi harus sama ya :)

Demo Image Magnification

Scroll div with JavaScript (Hover process)

Keterangan & cara sama dengan diatas. This structure for Scroll div with JavaScript.

<!-- JavaScript -->

<script type='text/javascript'>  
//<![CDATA[
var timer1;
function scrollDiv(divId, depl) {
   var scroll_container = document.getElementById(divId);
   scroll_container.scrollTop -= depl;
   timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}
//]]>
</script>

<!-- Kode CSS -->

<style>
.hoverScroll {
width: 200px;
height: 100px;
border: 1px solid #333;
background: #FFFF99;
padding: 15px 10px;
overflow: hidden;
}
</style>

<!-- Kode HTML (pemakaian) -->

<div id="Scroll" class="hoverScroll">
Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here   
</div>
<a href="javascript:void(0)" onmouseover="scrollDiv('Scroll', 5)" onmouseout="clearTimeout(timer1)">To Top</a>
<a href="javascript:void(0)" onmouseover="scrollDiv('Scroll', -5)" onmouseout="clearTimeout(timer1)">To Bottom</a>

Tulisan Scroll merupakan Unique ID, bisa apa saja bebas tapi harus sama :)

demo Scroll div with JavaScript

Begitulah beberapa contoh trik yang Beben ambil sebagai solution :D silahkan berkreasi and don't forget to come the web solucior acak-acak sana :))
Happy blogging \m/