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

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

Sliding Panel Photo Wall Gallery with jQuery

In this tutorial we can create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

Demo | Download | View Tutorial

Resource : Codrops

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

Demo | Download | View Tutorials

Resource : Codrops