WebDesigngeek

How to Change image on rollover(MouseOver) in CSS

2012-03-13T09:09:00.000-07:00

Its been a long time since i've posted an article. Today iam posting something that is easy to implement and is used widely these days i.e, changing an image on rollover(mouseover).Let's start with the simple mark-up

HTML:
<a href="#" id="iconchange">Icon</a>

Now lets come to the css

CSS:

#iconchange{

height: 20px;

width: 158px;

text-indent: 10000px;

overflow: hidden;

background: url(icon.gif) top left no-repeat;

display: block;

}

#iconchange:hover{

background-position: bottom left;

}

That's it. its simple as that. Go now and use it in your project designs.:)

How to create cool Navigation Menu Easily in CSS

2012-03-03T10:30:00.001-08:00

As we all know that for providing navigation to the user,we use navigation menu on our websites. Today i am going to show you how you can easily create a navigation menu for your website. Let's start with HTML

HTML Code :

<html>
<head>
<title>Navigation Menu</title>

</head>

<body>

<li><a href="#">Services</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Company</a></li>

</ul>

</body>

</html>

This is our menu list. Now lets apply the magic of CSS.

CSS Code :

#nav{
width: 960px;
margin: 80px auto;
text-align: center;
}

#nav ul{
margin: 0;
padding: 0;
}

After adding this CSS you'll get something like above.the code specifies the alignment of the menu which is center and width and the margin. Now lets add some more code,

#nav li{
margin: 0 10px; /* Add some horizontal spacing */
display: inline-block;
*display: inline; /* IE7 and below */

}

the above code will give you this

Now we got the basic layout of our menu. Let's add styling it with color.

#nav a{

display: inline-block;

position: relative;

padding: 8px 15px;

border: 2px solid #ddd;

text-decoration: none;

color: #999;

font: bold 14px 'Lucida sans', Arial, Helvetica;

background-color: #000;

background-image: linear-gradient(top, #eaeaea, #fff);

border-radius: 3px;

box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,

0 0 1px 0 rgba(0, 0, 0, .2),

0 2px 2px rgba(0, 0, 0, .3),

0 10px 10px -5px rgba(0, 0, 0, .2);

}

The above code will give the coloring to our menu.I have used box-shadow to give some good effect to our menu. Above code will give you the below result

Now that we've got our menu. Let's give some hovering effects to it.

#nav a:hover{

background-color: #eaeaea;

background-image: linear-gradient(top, #000, #000);

}

#nav a:active{

top: 1px; /* Simulate the push button effect */

background: #fff;

box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,

0 0 1px 0px rgba(0, 0, 0, .2),

0 1px 2px rgba(0, 0, 0, .3);

}

That's it. You've got your menu. You might see that i've given some good horizontal space. you may reduce it by decreasing the margin value in #nav li{}. Hope you like it and share it.

How to Create Follow Us sidebar or a fixed sidebar Menu in CSS3

2012-02-28T04:31:00.002-08:00

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 :

#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>

Well it might look like a lot of code for a simple work however it is actually simple in reality.
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

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.Which is the fourth value in our example.
Apart from giving a follow us sidebar , you can also use it to make an always appearing Sidebar menu for easy navigation.

CSS3 Zoomy: Zoom-in and Zoom-out with click in CSS3

2012-02-26T07:22:00.001-08:00

Don't worry iam not using Javascript. This is done purely in CSS3. Yes,you heard it right. Now you can handle click event like JQuery in CSS3. Thanks to Transition effect. This can be done easily and with using only few lines of code. Don't worry if you are not yet familiar with CSS3 tricks. I'll soon be providing you some tricks that can be done in CSS3.Lets start with our CSS3 zoom. Iam also using HTML5 tags in here. You may be hearing it for the first time.But don't worry i'll explain them with the code. As said earlier i'll also be updating the HTML5 tags along with CSS3 tricks.
So lets start with the html code.

HTML :
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>

<h1> CSS3 Zoomy: Zoom-in and Zoom-out with click in CSS3 </h1>

<ul>

<li>

</li>

<li>

</li>

</ul>

</figcaption>

</figure>

</body>

</html>

The above is a HTML5 code.Now you don't have to write the whole document type declaration.Just <!doctype html> would do the work in HTML5. The <figure> element is intended to be used along with <figcaption> to mark the diagrams.photos and code examples etc. <figcaption> purpose is to add caption to the image.
Now lets get along with the CSS code. Its simple.

CSS code :

<style type="text/css">
figure { background: #e3e3e3; display: block; float: left;}
ul{list-style: none;}
#zoomy {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}

/* Compliance to IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoomy:target {
width: 400px;
}
</style>

Its really simple isn't it? You can play along with it by using the transition effect. Like zooming the image just by hovering it. Please share if you like it.

How to Make Accordion Menu in CSS with Hover Effect Like JQuery

2012-02-18T08:57:00.000-08:00

Today with only CSS we are going to make an Accordion Menu,Which will have hover effect like JQuery. We are going to make it with pure CSS. Lets start the magic now, First add this HTML markup

HTML Markup :

<ul>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Our Locations</a></li>

</li>

</ul>

<li><a href="#">Sty Connected</a> <ul>

<li><a href="#">Social Network</a></li>

</ul></li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Web development</a></li>

<li><a href="#">Wordpress</a></li>

<li><a href="#">Drupal</a></li>

</ul>

</li>

</ul>

After adding the above markup,You'll get a picture like this

Now we need to add some style to it,

CSS:

.accordion {
margin: 0px auto;
padding: 0px;
list-style: none;
width: 240px;
font-family: Arial;
font-size: 90%;
background-color: #111;
}

.accordion li {
overflow: hidden;
}

.accordion li a {
display: block;
border-bottom: 1px solid #444;
background-color: #222;
text-decoration: none;
color: white;
text-align:center;
padding: 5px;
outline: none 0px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}

Now you'll get some thing like this

Looks Quite Good isn't it? We are ready with our menu layout and coloring. But now we need to add some more CSS to make the amazing hover effect and to make it work like a Accordion Menu.

CSS:

.accordion li a:hover {
background-color: #180000;
-webkit-scrollbar-button:vertical;
}
.accordion > li:first-child >a:first-child {
border-top: 1px solid #444;
}
.accordion ul {
margin: 0px;
padding: 0px;
list-style: none;
height: 0px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
}
.accordion li:hover ul,
.accordion:not(:hover) li:first-child ul {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.accordion ul li a {
color: #AAA;
border: 1px solid #777;
border-top: 0px none;
background-color:#680000;
white-space: nowrap;
overflow: hidden;
}
.accordion ul li a:hover {
background-color: #500000;
}

Now after this you'll get your accordion menu like this

Looks Great isn't it?...Just add your menu list and customize yourself the color of the accordion menu according to your requirement.Please share with others if you like it.And keep visiting my blog for other exciting stuff on web designing.

How to create an amazing blur menu with CSS

2012-02-13T04:06:00.000-08:00

Ever wanted to create a good creative and amazing menu? well you are in treat for today.Today iam going to show you how to create an amazing blur menu with CSS.Alright so lets start with the markup i.e, HTML.
A simple HTML will do the work now but you can customize your own menu.

The HTML :

<html>
<head>
<link rel="stylesheet" href="blurmenu.css"

type="text/css"/>
</head>
<body>
<ul class="bmenu">
<li><a href="#">About</a></li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Personal Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

The CSS:

Now lets go the CSS and add this

.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}

.bmenu li{
font-size: 50px;
display: block;
}

You'll get something like this

doesn't look like a good menu eh? but it is basic form of our menu.Now we'll add some color to our menu

.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 2px #111;
color: #ddd;
padding: 5px 20px;
margin: 2px;
background: rgba(0,0,0,0.7);
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

You'll get the picture like this

Now it looks quite good isn't it? You can customize your own colors in it according to your design.Now lets add the magic of the blur effect.Whenever you hover or put your cursor on each menuitem other menuitems will become blur.To get this effect just add this code

.bmenu:hover li a{

text-shadow: 0px 0px 10px #eeb213;

color: transparent;

background: rgba(0,0,0,0.2);

}

.bmenu li a:hover{

background: rgba(0,0,0,1.0);

text-shadow: 0px 0px 1px #eeb213;

}

After you add the above code you'll get the effect as shown in the picture below

Great isn't it?...you can customize your menu vertically and according to your design and coloring.Thanks for reading and keep visiting my blog for more articles.

Three (3) Important SEO Plugins for your Wordpress Blog

2012-02-08T10:14:00.000-08:00

SEO is on the tip of the tongue of every webmaster. Even experienced some webmasters find SEO a complete fuddle (including me). Another plus point is that to gain traffic you have to rely on a search engine for sure so SEO is much required if this is the scenario.

WordPress is a decent platform to start blogging and notifying search engines. And to add icing to cake, you can literally avoid thinking much about your onpage SEO score using these plugins.

In my opinion these 3 plugins are a must have for every wordpress blogger. Here lets have a look

All in One SEO Pack

This is the best SEO plugin for your blog. It basically allows you to set the most commong SEO things for your blog like the titles, meta tags, keywords, and descriptions. Allows you to configure them forÂ your entire blog or on a post by post basis.

Redirection

Often you keep changing permalinks on your blog like for instance when you add some categories or something else. And this leads to break of your previous links on your blog. This plugin does te redirecting the visitor to the new permalink thing. means even if you forget to update an old link in your post the plugin will redirect the user reducing the amount of traffic you get to pages that doesn't exist.

SEO Smart Links

SEO Smart links is a cool plugin allows you to specify a word and then link it to a post on your site. Then each time the word appears on your site, its automatically turned into a link you specified

How to create a CSS Gradient Background without using an Image

2012-02-07T04:10:00.000-08:00

The One thing that is nice is that we now have the ability to create gradients in CSS itself without having to use an image.
Use of gradient colors is not only common in images but also lots of Website use this technique to improve their layout design. Although it is a normal practice to use images as background of a Webpage but we can also combine two colors in CSS to make gradient color look without using an image.
With the help of gradient coloring we can make our website look more beautiful. There is not a particular CSS property that allows to make gradient color that display in all commonly used browsers. But there are some specific moz and webkit CSS property that allow us to make a gradient color and also we can cover internet explorer browser by using using its filter property. Below we provided a code example of creating a background gradient color without any image. You can put the color values according to your design.

body{

background: #008800;background: -moz-linear-gradient(top, #358F41 #EF3B64);background: -webkit-gradient(linear, left top, left bottom, from(#358F41), to(#EF3B64);filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#358F41', EndColorStr='#EF3B64', GradientType=0);

}

How to create rounded corners Using CSS

2012-02-06T05:20:00.000-08:00

Ever wanted to rounded corners to your DIV without using those boring images on the sides ? Well if you are using a CSS3 supported browser like Mozilla Firefox 3 or Safari 3 or Google Chrome then there is a simple CSS style to generate rounded corners. Just write the followingÂ CSS rule to the element

div {
-moz-border-radius: 5px;                                 
-webkit-border-radius: 5px;
}

And when you need to target the other browsers like the Internet
Explorer which doesn’t support those tags its time to use javascript for
action.Curvycorners is a free javascript that can create transform DIV tags into rounded cornered one on the fly. This script is hassle free and you dont require any images.The next good thing is that it supports full anti-aliasing. The script is licensed as LGPL which means you can use it for free but you are not liable to edit it.
Download, Documentation and Examples

You can download the script from here
Usage is quite simple, to sum-up add the js file, configure and add the setings code (in javascript) and the HTML tags.

Importance of Anchor Text in Internal Linking

2012-02-04T06:01:00.001-08:00

Search Engine Optimization. Sounds confusing but really it is a system built on small and simple methods. Anchor text in Internal Linking is just another one of those small tricks. We all know internal linking is something that we should do. It increase your page views and help ranking of your pages. Well just internal linking doesn’t do the job. You need to choose your anchor texts carefully.
A lot of people when they write about their previous posts they use anchor texts such as click here or so. It is of habits. I know I do it a lot as well. But I do it for posts that I don’t really care about. If I want to rank high for some keyword I try to be descriptive in my anchor text.
I could’ve easily said to check how I promoted my self, click here. The click here is not the way to go for important posts.
This change might not sound like a big deal, but remember that drop of water makes an ocean. Start with a drop and you will have your own ocean.

How to perform SEO for a New Website

2012-02-04T05:57:00.000-08:00

Having your own website is essential for many companies and people. Individuals can discover about your products and services, go through what you have to say or buy the items you are providing. Starting your internet site is only the initial phase. You have a lot much work to be done after your website debuts on the web in order to make it searchable.

Most of the time, the internet marketers and SEO Specialists are frustrated because no one seems to be going to their site or there is very little or no web traffic on their website. And the visitors those who arrive are either friends, relatives or locally promoted ones who were told about that website. Using Search Engine Optimization (SEO) techniques like proper link building will help learn how to perform SEO for a New Website.
How to perform SEO for a New Website

If you have a fairly new website, you can increase website visitors to your website through link building. You want other web pages and blogs to backlink to your internet website ( called as inbound links). There are various thing you will choose, like the web pages that weblink to you should be web pages with the same or similar topic as your websites. For example, if your website provides toys for children, you want to get links from websites that deal with children or child products. You don’t want hyperlinks from web pages that sell agricultural products or digital goods. The web pages that backlink to your internet website must always be relevant to your website. This is a very important factor.
Link Building Tactics for a New Website

New web pages should start link building at a slowly pace, but should be consistent. It is unpleasant to get more than 5,000 visitors just after the start of a new website. When finding appropriate links, you can start with family, fellow workers and friends. You can ask for a backlink from anyone among them who have similar websites. If their web pages are appropriate to yours, request them that they link to your website via their content. You can also use social networks like Facebook, Twitter and MySpace to get some initial links to your website.

A different method of the same sort to build a backlink to your website is through blogs. When you add a comment on the blog, place a link that goes back to your site’s website. If you wish, you can write some guest posts on relevant blogs article content for sites that take sites and other types of content. You may be able to place a link to your own website in the article or have a link in your bio.

Once you have a well established and fully indexed website, you can get a little more aggressive about link building. Take your time and figure out where you can get links from. Check where your competitors get links from. SEO cannot be done overnight. It is a continuous and consistent process. Patience is the key, over enthusiasm and haste can land you in the Google Sandbox.

How to set youtube video as your page background

2012-02-01T11:37:00.000-08:00

If you want to play your fav youtube video on your blog or your company's products video on your website's page background then what? Well there is a very nice way to do that. There's a plugin from JQUERY just to do that work for you. It is called "TUBULAR".

It lets you play a youtube's video on your page's background just by writing a single line of javascript code. All you have to do is call 'tubular' on your <body> tag by using the Youtube ID and your content container DIV as parameters.
code: $(‘body’).tubular(‘someYTid’,'wrapper’);
Where someYTid =youtube ID
wrapper=your container div
To see a live demo click on the image below or just go this link http://www.seanmccambridge.com/tubular/

What is ASP.NET?

2012-01-05T06:37:00.000-08:00

you may be wandering what exactly is this ASP.NET. well its simple, It is a Server Side web Technology from Microsoft that uses object oriented Approach for the execution of a web page or a whole web site. ASP.NET gives a programmer great flexibility in writing the code for every event that occurs on the page. An event is an action that occurs when a user clicks a button or something...Visual Studio is the Integrated Development Environment (IDE) provided by Microsoft for development of ASP.NET applications and Web sites and other applications also such as windows and Mobile.Visual Studio Simplifies the process from Designing to development.i.e it comes with built in tools suck as Buttons,Textboxes,Labels etc..So,If you are not good with Designing Don't Worry because Visual Studio may ease your problem.you can use C# or VB for writing the Code for writing the code part...

just another boring day

2011-03-16T05:19:00.000-07:00

Its boring me....hmmm...:((...
Want to bring and play cricket game for my Lappy.....see what happens....will go and brng it soon hope so heheh

Monday Night

2011-02-28T08:47:00.000-08:00

Got some good sleep after three days hard work....feels so good. But Upset a little bit cuz didn't get to give seminar that i've prepared for the project...hmnmmm....need to give it on 7th now as they've been postponed....but watever feels good to be free from any issues....and is ready for a month long battle and for some hard work.....yippeeee

My Post

2011-02-26T11:56:00.000-08:00

Just Created my blog.having soo much work to do on the project tomorrow.

This is me,when i was outside my brother's frnds office.