GirlwithBigHead

Tutorial : Update Status (iv)

08/11/2012 | 7 comments

My own coding, don't re-post.
Preview :

click here to see live preview

Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>

.statio {
font-family:tinytots;
font-size:8px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;color:#000;
width:150px;
color:#fff;
margin:0px 0px 0px 0px;
text-align:center;
padding:5px;background: #85E0FF;}

.statio:hover {
margin:0px 0px 60px 0px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

#noti {
border:1px dashed #85E0FF;
margin-top:-10px;
width:150px;
margin-left:-4px;
padding:4px;
font-size:0px;
height:0px;
position: fixed;
text-align:left;
background:#D6F5FF;
color:#444;
opacity: 0;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;}

.statio:hover #noti {
font-size:8px;
margin-top:10px;
height:30px;
opacity: 1;
overflow:hidden;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;}

</style>
<br />
<center>
<div class="statio">
Status
<div id="noti">
Manarie li que vaqeriao |At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae.</div>
</div>
</center>

OLDER NEWER