Acak-acak bin Acak Kadut

Koben mau langsung mosting banyak trick nih! Harap diperhatikan dengan seksama, karena akan memerlukan sedikit pemahaman setingkat master :d Mungkin ada yang sedikit rada lawas triknya, tapi kebanyakan masih sering di pakai oleh para blogger! Langsung saja bro, pertama-tama membuat inline overlay for image.

Siapa yang mau jadi pacar saya, acungkan kaki!!!

Senyumannya...

<div style="position: relative;background:url(http://4.bp.blogspot.com/-TzlGnrAVPc4/Tq7hp9JG3wI/AAAAAAAACZI/i-94UtEJgx0/s388/cewek.jpg);width: 388px;height: 388px;margin: 5px auto">
<div style="position: absolute;bottom: 0;width: 400px;font-weight: bold;color: #111;text-align: center">
<p>Siapa yang mau jadi pacar saya, acungkan kaki!!!</p>
</div>
<p style="position: absolute;top: 1em;right: 2em;width: 120px;padding: 5px;background-color: rgba(0,0,0,.5);font-size: 13px; color:#fff">Senyumannya broo...</p>
</div>Berikut embed clock (jam) suka-suka via negara/kota manapun!

<style>
#clock {
font-family: "Courier New";
background-color: #ccc;
border: solid #999999 1px;
width: 300px;
padding: 10px 0;
margin:0 auto;
text-align: center;
display: block
}
#date {
font-size: 17pt;
}
#time {
font-size: 40pt;
}
</style>

<div id="clock">
<select id="city">
<option value="-6">Arab Saudi (USA)
<option value="-8">Los Angeles (USA)
<option value="-5">New York (USA)
<option value="0">London (UK)
<option value="2">Cairo (EGYPT)
<option value="5.5">New Delhi (INDIA)
<option value="7">Bangkok (THAILAND)
<option value="9" selected>Bandung (INDONESIA)
<option value="10">Sydney (AUSTRALIA)
</select>
<img src="http://jsrun.it/assets/d/w/7/C/dw7CG.jpg">
<div id="date">----/--/-- ---</div>
<div id="time">--:--:--</div>
</div>

<script>//<![CDATA[
function clock(){var now=new Date();var timeTokyo=now.getTime();var timeUTC=timeTokyo-9*60*60*1000;var cityElement=document.getElementById("city");var index=cityElement.selectedIndex;var timeZone=cityElement.options[index].value;var timeCity=timeUTC+timeZone*60*60*1000;now=new Date(timeCity);var hour=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();if(hour<10)hour="0"+hour;if(min<10)min="0"+min;if(sec<10)sec="0"+sec;var timeElement=document.getElementById("time");timeElement.innerHTML=hour+":"+min+":"+sec;var year=now.getFullYear();var month=now.getMonth()+1;var day=now.getDate();if(month<10)month="0"+month;if(day<10)day="0"+day;var weekArray=["Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu"];var week=weekArray[now.getDay()]
var dateElement=document.getElementById("date");dateElement.innerHTML=year+"/"+month+"/"+day+" "+week;setTimeout('clock()',1000);}
onLoad:clock();
//]]></script>

Comot semua kode, coba pastekan ke Live HTML Editor untuk melihat demo! Tetap buka HTML editor kalian! Sikat kode berikut dan lihat penampakannya!

<style>
body {background: #debe94}
div.scrollBox {
position: relative;
margin: 0 auto;
width: 400px;
height: 300px;
background: #fff;
}
div.scrollBox::before,
div.scrollBox::after {
content: "";
z-index: 1;
left: 0;
height: 45px;
width: 400px;
display: block;
position: absolute;
}
div.scrollBox:before {
top: 0px;
background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
div.scrollBox:after {
bottom: 0px;
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1), rgba(255,255,255,0));
background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
div.scrollBox > div {
height: 300px;
font-size: 13px;
line-height: 1.5;
position: relative;
overflow-y: scroll;
}
div.scrollBox > div > div {
width: 360px;
}
</style>
<div class="scrollBox">
<div>
<div>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/>teks panjang di sini<br/>blah bleh bloh<br/></div>
</div>
</div>

Masih seputar efek scrolling pakai atribut CSS, try this....

<style>
.scrollbox {
position: relative;
z-index: 1;
overflow: auto;
width: 100%;
max-height: 200px;
margin: 10px auto;
background: #FFF no-repeat;
background-image: -webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), -webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -moz-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), -moz-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-position: 0 0, 0 100%;
background-size: 100% 14px;
}
.scrollbox:before, .scrollbox:after {
content: "";
position: relative;
z-index: -1;
display: block;
height: 30px;
margin: 0 0 -30px;
background: -webkit-linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
background: -moz-linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
background: linear-gradient(to bottom,#FFF,#FFF 30%,rgba(255,255,255,0));
}
.scrollbox:after {
margin: -30px 0 0;
background: -webkit-linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
background: -moz-linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
background: linear-gradient(to bottom,rgba(255,255,255,0),#FFF 70%,#FFF);
}
</style>

<div class="scrollbox">
<b>Scroll below!!!</b><br/><br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/>blah bleh bloh<br/><br/><b>The end!<br/>No shadow here.</b>
</div>

Lanjut ke Javascript ringan bagaimana cara untuk melihat Password!
DEMO

View the Page

Setali tiga uang sodara²

View the Page

What do you think about it

1

4

+

1

4

=

1

2

Master Zhinto telah banyak bercerita tentang elemen tutup buka baik memakai Javascript ataupun CSS3. Tapi satu yg kurang belum ada versi jQuery plugin :p

• zhinto.blogspot.com/2013/06/membuat-elemen-pembuka.html
• zhinto.blogspot.com/2013/06/Javascript-and-CSS3.html
• zhinto.blogspot.com/2013/06/unlock-effect-with-css3-and-javascript.html

Version plugin-jQuery let's open the door

.control-buttons {
position: fixed;
top: 2px;
right: 2px;
z-index: 10;
}
.control-buttons button {
background-color: #000;
cursor: pointer;
color: rgba(230, 230, 230, 0.82);
border: 0 solid transparent;
padding: 4px 10px;
border-radius: 8px;
font-size: 10px;
}
.control-buttons button:hover {
background-color: rgba(58, 162, 83, 0.82);
}
.door, .door.closed {
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-ms-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out;
transition: 0.8s all ease-in-out;
}
.door {
z-index: 9;
display: inline-block;
width: 49.8%;
height: 100%;
background-color: #333;
background-image: url('LINK-IMAGE-250x250');
background-repeat: repeat;
}
.door1 {
position: fixed;
left: 0;
top: 0;
border-right: 3px solid #222;
}
.door2 {
position: fixed;
right: 0;
top: 0;
border-left: 3px solid #222;
}
.door1.closed {
left: -50%;
}
.door2.closed {
right: -50%;
}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var doorFC = $('.door');
  $('#openDoorGT').on('click',function(){
  if (doorFC.hasClass('closed') != true) { 
  $('.door').addClass('closed');
 }
});
  $('#closeDoorGT').on('click',function(){
  if (doorFC.hasClass('closed') == true ) {
  doorFC.removeClass('closed');
 }
});
});
//]]></script>

Planning HTML<div class='control-buttons'>
<button id='closeDoorGT'>Close Door</button>
<button id='openDoorGT'>Open Door</button>
</div>
<div class='door1 door'></div>
<div class='door2 door'></div>DEMO goo.gl/wYi5C
Bonusnya gue kasih koleksi links tentang slider image pakek CSS3
rilwis.googlecode.com/svn/trunk/demo/image-slider.html
developer.mozilla.org/en-US/demos/detail/css3-slider-gallery
developer.mozilla.org/en-US/demos/detail/css-sliding-image-gallery
cssdeck.com/labs/css3-image-slider
wowslider.com/css-image-gallery-push-stack.html
css3.bradshawenterprises.com/sliding/
www.tobypitman.com/pure-css-sliding-image-gallery/
thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails
codepen.io/joshnh/full/KwilB
codepen.io/AMKohn/full/EKJHf
tympanus.net/Tutorials/CSS3SlidingImagePanels/
2.s3.envato.com/files/52622723/index2.html
webconsultant.co.nz/goodstuff/slider/
inserthtml.com/demo/css3-image-slider/
cssanimation.net/a-slideshow-of-images-using-css-animation/
chris-spittles.co.uk/?p=397
ozsalon.si/RotatingImageSlider.html
Happy blogging \m/