Today,I am going to show you how you can create a Fixed Sidebar or should i say a Pinbar that remains even when you are scrolling down. Like the one that appears on my blog.So,lets start with the HTML
HTML Code:
<html>
<head>
</head>
<body>
<p>Follow Us</p>
<ul id="social_side_links">
<li><img src="digg.png" href="#" /> </li>
<li><img src="fb.png" href="#" /></li>
<li><img src="twitter.png" href="#" /></li>
</ul>
</body>
</html>
Now if you don't own a website and use Blogger like me. Then you should go to AddThis and signup there if you are not registered. Get the code from from follow Tools tab. and just paste it under <ul> tag and in place of <li> tags.
Now lets go to the CSS.
CSS Code :
<style type="text/css">
#social_side_links {
position: fixed;
top: 90px;
left: 0;
padding: 5px;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #111 ), color-stop( 50%, #444 ), color-
stop( 50%, #333 ));
background: -webkit-linear-gradient(#555, #444 50%, #333 50%, #111);
background: -moz-linear-gradient(#555, #444 50%, #333 50%, #111);
background: -ms-linear-gradient(#555, #444 50%, #333 50%, #111);
background: -o-linear-gradient(#555, #444 50%, #333 50%, #111);
background: linear-gradient(#555, #444 50%, #333 50%, #111);
border-width: 2px 2px 2px 0;
border-style: solid;
border-color: #777 #888 #999;
-webkit-border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-box-shadow: #888 7px 0 10px -5px;
-moz-box-shadow: #888 7px 0 10px -5px;
-o-box-shadow: #888 7px 0 10px -5px;
box-shadow: #888 7px 0 10px -5px;
}
p{font-size:25px;font-family:arial,helvetica,sans-serif;}
</style>
Iam using gradients for the background. you may use some online tools to generate the gradient if you don't know how to make the CSS gradient.
Border-radius is used to give curvy corners as i have shown in my previous post How to create rounded corners Using CSS .
Box-shadow is one of the best features of CSS3 and is used to give a shadow effect to the box. I'll show you the syntax to make the usage clear
Syntax :Box-shadow:color x-offset y-offset blureffect
Apart from giving a follow us sidebar , you can also use it to make an always appearing Sidebar menu for easy navigation.
No comments:
Post a Comment