How To Use CSS3 Pseudo-Classes

The newer version of CSS is to be launched as CSS 3.0 is having new boost Technics make you way of coding very simpler. CSS 3.0 provides new Pseudo-classes which are mentioned in this post.

These are like:

• :link
• :visited
• :hover
• :active
• :first-child
• :last-child
• :root
• :nth-child() __used as ul li:nth-child(odd), :nth-child(even), :nth-child(3), :nth-child(2n) :nth-child(5n), :nth-child(4n + 1)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)
• :first-of-type and :last-of-type
• ;only-of-type
• :last-child
• ;only-child
• :empty
• :target
• :checked, :enabled and :disabled
• :not __used like input:not([type=radio])

View Full Tutorial with Examples Here

Resource : smashingmagazine.com

Google Web Fonts

If you got bored using the limited web fonts in your website, I have a good news for you. Now you can use very attractive and beautiful web fonts from the large range of Google web font directory. Yes, this is very true that google gives you a very huge range of very beautiful and nice font directory. You can check it out from the link below.

This is quite easy to use. Follow the simmple steps given below:

• Goto the google font directory
• Choose your font form the list given
• Set Size and other font options
• Attach the css file link given by google
• And it’s all set…

Now you just have to attach the CSS in you webpage given by google font directory. This will look something like this:

<link href="http://fonts.googleapis.com/css?family=Allan:bold" rel="stylesheet" type="text/css" >

And then you can use the new web font you have choosen from the google web font directory in you CSS classes, ID and selectors like :


.myClass, myID, P, H1{
          font-family: 'Allan', serif;
          font-size: 36px;
}


I hope this will change your taste of fonts using in the website. Good luck designers…

Explore the Google Web Fonts | Font Previewer

CSS3 Webkit gradient support updated

In most of our design, we must use gradient to make the design good-looking. The multi-color gradient makes the design impressive and eye catching. And when the time comes to convert the design in HTML, We had no other choice to take the gradient in image, either the gradient is in linear or radial or any other form.

But now, time turned. Now you can make your gradient with CSS only using the CSS 3.0. You just no need to take that gradient in image background anymore, which was fixed in dimensions and was not flexible.

You can use gradient in few line like:


background-image: -moz-linear-gradient(#81a8cb, #cde6f9); /* Firefox */
background-image: -webkit-linear-gradient(#81a8cb, #cde6f9); /* Webkit */


Note : This still doesn’t work in IE.

View this tutorial in Detail

Resource : Red Team Design