Category Archives: CSS

Facebook Login Button with Image

Previously I was searching for how to change the Facebook Login Button with an image. Surfing the internet didn’t gimme answer. I also posting in some coding forum, but there is also no good answer. It cost me more than 2 days when facing this problems. However i found the answer by my self. Therefore in this post i want to share it with you. Because i know facing this problems is tiring.

Before we continue with manipulating the facebook login buton with an image, i asume you already knwo about how to make facebook login button. If you dont know about it yet, please check this. After you read this lets start.

First, Found the fb tag. It should be like:

<fb:login-button></fb:login-button>

Change it into some thing like:

<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>

In this case, i make the width become 216, because i’ll use an image that have property width=216 and height=72.

The result should be look like:

Facebook

Facebook

Second, Make your own button. In this case, we will use three div. First for the image, second for the facebook login button, and the last is for the container of both.

First div:

<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
</div>

Second div:

<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>
</div>

The last div will contain both of first div and second div:

<div style="position:relative;width:216px;height:72px;" >
</div>

Third, Combine all of the div. Then the final code will look like:

<div style="position:relative;width:216px;height:72px;" >
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
</div>
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>
</div>
</div>

Make sure the width and the height is correct based on your image width and height. Then, copy the final code into your website.

How it works:

The first div that contain your image will be placed under the second div that contain the facebook button. The second div will be exactly overlayed the first div. Then, we make the second div opacity become 0, so it will be invisible. As a result, when you press your image, you actually press the facebook button.

http://septiadi.com/2011/08/08/facebook-login-button-with-image/

Advertisements

Energy Saver in Web Page

Have you imagine if your web page can do some kind energy saver like screen saver in your computer desktop? Do you want to make it happen? Then lets do it togather.

First download required file jquery.js and jquery.idle-timer.js.

Second, Copy the bellow script into your head tag in html file.
<script type="text/javascript" src="[url]/jquery.js"></script>
<script type="text/javascript" src="[url]/jquery.idle-timer.js"></script>

<script type="text/javascript">
(function($){
    var timeout = 10000;//ten second idle. change this var. 1000 means 1 sec.
    $(document).bind("idle.idleTimer", function(){
		position_popup(150,30);
		document.getElementById('popup_area_bg').style.display = 'block';document.getElementById('popup_area').style.display = 'block';
    });
    $(document).bind("active.idleTimer", function(){
		document.getElementById('popup_area_bg').style.display = 'none';document.getElementById('popup_area').style.display = 'none';
    });
    $.idleTimer(timeout);
    $('#timeout').text(timeout/1000);
})(jQuery);

function position_popup(width,height){
height = parseInt(height);
	if(!window.innerWidth){
		if(!document.documentElement.offsetWidth){
			if(!document.body.offsetWidth){
				win_width = 1000;
			}else{
				win_width = document.body.offsetWidth;
			}
		}else{
			win_width = document.documentElement.offsetWidth;
		}
		document.getElementById('popup_area').style.position ='absolute';//need only once
		document.getElementById('popup_area_bg').style.display ='none';//need only once
	}else{
		win_width = window.innerWidth;
	}
	if(!window.innerHeight){
		if(!document.documentElement.offsetHeight){
			if(!document.body.offsetHeight){
				win_height = 1000;
			}else{
				win_height = document.body.offsetHeight;
			}
		}else{
			win_height = document.documentElement.offsetHeight;
		}
		document.getElementById('popup_area').style.top ='100px';
	}else{
		win_height = window.innerHeight;
		inner_top = (win_height - height-25)/2;if(inner_top < 0)inner_top=0;
		document.getElementById('popup_area').style.top = inner_top+'px';
	}
	inner_left = (win_width - width-25)/2;if(inner_left < 0)inner_left=0;
	document.getElementById('popup_area').style.left = inner_left+'px';
	document.getElementById('popup_area').style.width = width;
	document.getElementById('popup_area').style.height = height;
}
</script>

<style type="text/css">
.inner_popup{
	display: none;
	position:fixed;
	text-align:center;
	z-index:1002;
	padding:10px;
	width: 150px;
	height: 30px;
	border: 2px solid;
	border-color:#CCCCCC;
	background-color: white;
	vertical-align:middle;
}
.outer_popup{
	display: none;
	position:fixed ;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.70;
	filter: alpha(opacity=80);
	text-align:center;
}
</style>

Third, copy bellow script into body tag in your html file.

<div class="outer_popup" id="popup_area_bg">
</div>
<div class="inner_popup" id="popup_area">
<div style="float:left; width:100%;" align="center">
	Idle Time
</div>
</div>

By implementing energy saver in your web page, I hope, your page can save energy even only in a small amount. The more your page visited by other people, the more you help them to save energy.

Thanks to Paul Irish for jQuery idleTimer plugin so that we can make our Energy Saver in Web Page.

Refference: http://paulirish.com/2009/jquery-idletimer-plugin/

http://septiadi.com/2011/07/11/energy-saver-in-web-page/

 

 


CSS Round Border With No Image

CSS Round Border With No Image

CSS Round Border With No Image is one of many technique to improve the appearance of your website. Different with other css round border, css round border in this article will use no image. Therefore it will reduce the bandwidth needed to load the page.

If we search in the internet, many css round border tutorials will use image in their corner. Therefore, in this article I will try to explain about how to make CSS Round Border With No Image. And I will try to make it as simple as i can.

First, we need the css code:

.septiadi{width:350px;}
.septiadi .r1{height:1px;margin:0 9px;background-color:black;}
.septiadi .r2{height:1px;margin:0 6px;border-width:0 3px;border-style:solid;}
.septiadi .r3{height:1px;margin:0 4px;border-width:0 2px;border-style:solid;}
.septiadi .r4{height:1px;margin:0 3px;border-width:0 1px;border-style:solid;}
.septiadi .r5{height:2px;margin:0 2px;border-width:0 1px;border-style:solid;}
.septiadi .r6{height:3px;margin:0 1px;border-width:0 1px;border-style:solid;}
.septiadi .content{margin:0;border-width:0 1px;border-style:solid;padding:10px;max-width:100%;overflow:hidden;}
.septiadi .header, .septiadi .footer {margin:0;border-width:0 1px;border-style:solid;padding:0 10px;max-width:100%;overflow:hidden;}

.septiadi .header{ background-color:#bbb;border-color:#aaa;padding-bottom:5px;font-size:20px;color:white;}
.septiadi .top .r2,.septiadi .top .r3,.septiadi .top .r4,.septiadi .top .r5,.septiadi .top .r6{ background-color:#bbb;border-color:#aaa;}
.septiadi .footer{ background-color:#bbb;border-color:#aaa;padding-top:5px;font-size:10px;}
.septiadi .bottom .r2,.septiadi .bottom .r3,.septiadi .bottom .r4,.septiadi .bottom .r5,.septiadi .bottom .r6{ background-color:#bbb;border-color:#aaa;}
.septiadi .content{ background-color:#eee;border-color:#aaa;}
.septiadi .r1{ background-color:#aaa;}

Then the next code, is the HTML. In this case, I divide the HTML code into three session that are Header, Content, and Footer.

<div class="septiadi">
<div class="top"><div class="R1"></div><div class="R2"></div><div class="R3"></div><div class="R4"></div><div class="R5"></div><div class="R6"></div></div>
<div class="header">Header Here</div>
<div class="content">
Content Here
</div>
<div class="footer">Footer Here</div>
<div class="bottom"><div class="R6"></div><div class="R5"></div><div class="R4"></div><div class="R3"></div><div class="R2"></div><div class="R1"></div></div>
</div>

You can change the class name “septiadi” into other name. The reason I give this name is to avoid crash with other style that you might have already in your website. You can also delete the Header or Footer div if you feel better without it. However, make sure you change the background-color in css for “top” and “bottom” class into “#eee”, so it will match with background-color of the content.

The result will look like:

CSS Round Border With No Image

CSS Round Border With No Image

The explaination about the css:

round corner zoom

round corner zoom

The round corner zoom picture is the zoom preview of right top corner. It made by using seven div with different class, start from class R1 to R6 and class either header, content or footer.

In this CSS Round Border With No Image, I use 6 level of div to build the corner. With little bit experiment, you can make CSS Round Border With No Image with more than 6 level of div to build the corner.

 

http://septiadi.com/2011/03/24/css-round-border-with-no-image/


1 KB CSS3 Button

1 KB CSS3 Button

Sometime developers make a mistake by building a website that heavily loaded. The more heavy the website is, the more boring people will wait. In this case, building a light website is important. However, building light website with beautiful layout is more important.

In this article, I try to share how to make a 1 KB CSS3 Button. In this case, we dont need any image and the html file size is only 1 KB.

First, we have to declare the css3 style that will be used. Just to keep in mind, not all browser is compatible with CSS3. At least, it is not yet compatible.

The css3 code:

.button li{
	display: inline;
	margin: 10px;
}

.button li a{
	color: white;
	text-decoration: none;
	padding: 1px 3px;
	margin-right: 5px;
	border: 1px solid #999;

	background: -moz-linear-gradient(center top, #9ffbbb, #90dffb 50%,  #0000ff);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-moz-border-radius: 7px;

	background: -webkit-gradient(linear, center top, center bottom, from(#9ffbbb), color-stop(50%, #90dffb), to(#0000ff));
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-webkit-border-radius: 7px;
}

.button li a:hover{
	color: red;
	background: -moz-linear-gradient(center top, #0000ff, #90dffb 50%,  #9ffbbb);
	background: -webkit-gradient(linear, center top, center bottom, from(#0000ff), color-stop(50%, #90dffb), to(#9ffbbb));
}

Second, the html code it self:

<div class="button">
<ul>
	<li><a href="http:\\mhseptiadi.wordpress.com">Button</a></li>
	<li><a href="http:\\mhseptiadi.wordpress.com">Button</a></li>
</ul>
</div>

The the button should be like:

The second button is the button where your mouse hover on it. The image I attach is bigger the html size :).

Well done,  we just made 1 KB CSS3 Button.

Good luck.

http://septiadi.com/2011/03/01/1-kb-css3-button/


Zebra Strip with CSS3

Zebra Strip with CSS3

In this tutorial, I would like to share about how to make Zebra Strip with CSS3. Just to keep in mind, not all browser are compatible with CSS3.

Fist, type the CSS3 code:

.septiadi tr:nth-of-type(even){
	background: lightblue;
}

Second, make the table with html code:

<table class="septiadi">
<tbody>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
</tbody>
</table>

We make a class in this css code to avoid the css style is implemented by other table.

The page should be like:

zebra strip

zebra strip

You can combine this css style with Highlight Table Row While Mouse Hover

We just made a simple Zebra Strip with CSS3 with less than 5 minutes 🙂

Good luck.

http://septiadi.com/2011/02/18/zebra-strip-with-css3/


Highlight Table Row While Mouse Hover

Highlight Table Row While Mouse Hover

In this post I want to share about how to Highlight Table Row While Mouse Hover. No javascript but only CSS.

Here are the CSS code:

tr:hover{
	background-color:red;
}

Next the HTML code:

<table border="1">
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>

Done, we just make a simple Highlight Table Row While Mouse Hover.

Good luck.

http://septiadi.com/2011/02/17/highlight-table-row-while-mouse-hover/


Show Image with Fade Background

Show Image with Fade Background

Image is one of most common element in a website that very important. Just imagine, how do you feel if u visit a website that has no image, or the image is not managed well. You will immidiately feel bored. There is many things you can do to manage image in website, and one of them i will explain bellow.

In this case, I will try to explain how to make a Show Image with Fade Background. What u need is some basic knowledge of HTML and CSS.

The CSS code:

#new_window	.background{
	display: none;
	position:fixed ;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.70;
	filter: alpha(opacity=80);
	text-align:center;
}
#new_window	.content{
	display: none;
	position:absolute;
	text-align:center;
	z-index:1002;
	left: 458px;
	top: 50px;
	width: 350px;
	height: 200px;
	border: 2px solid;
	border-color:#CCCCCC;
	background-color: white;
}

The HTML code:

<input onclick="document.getElementById('content').style.display='block'; document.getElementById('background').style.display='block'" type="button" value="press me" /></pre>
<div id="new_window">
<div id="content" class="content" style="display: none;">your image here</div>
</div>
<pre>

In this case, the code will show a button. Then if you press the button, the code will show your image. And you can close the image by clicking the grey area outside the image.

Copy the code above and paste it into your HTML page. Little bit modification and you just made your own Show Image with Fade Background.

Good Luck.

http://septiadi.com/2011/02/16/show-image-with-fade-background/