CSS3 Tips: Add innovation to Webpages

All of us already know the web design competition is getting harder and harder. New ideas are coming under the web devlopment category and a lot of creative designs are being implemented all over the web. So, I thought that a key to creativeness must be shared among all the blog readers which come here to gain something. Every start needs some point, Like last days I posted about wordpress but today by discussion will be based upon CSS3 usage.

How: am I going to use CSS3 in creativeness:-

CSS3 has a lot of potential to be used for some eye cachy designs but it mostly depends upon the way you think. I shall try to describe CSS3 under series of articles. HTML and PHP only adds to the page structure and some functionality while CSS gives it the shape and colours and makes it different from the other sites. Its always good to look for other sites which are good at designing base and show some creativity and then to make your own illusions that how your own design may look like. Its the very starting step of what you are going to design. After having an illusion of the structure and required colors move a step ahead and then you can deploy your ideas in a better way using the CSS3. Like:

• You can create some rounded borders of a bordered element.
• You can add some cool transition effects for borders, backgrounds and even text.
• You can drop some shadows after a box, text or anything else.
• You can make some gradients and apply them in your design just using CSS3

And a lot more…

What: things I shall explain today under the creativeness hood:-

Only using some rounded borders and some cool background transition effects we can easily change the look and feel of any box, list or any thing else. So, what I meant is this : We are going to learn some rounded border CSS3 tips and also bit of transition effects and also what will happen if we combine both the things to have something creative and cool.

Combining “CSS3 Rounded Borders” and “Background Color Transition Effect” to make something cool and useful :-

Suppose, we have created a navigation bar and every thing is according to what we need. Suppose its like a bar bellow :-

Its very basic nagivation with simple html markup using some ‘li’ and ‘ul’ tags. We can do a lot of thins with it using CSS3 here I shall try to make you think like another way so that you may implement your creativity in a better way. What If you create rounded borders of Home and Freakify buttons, and also of the whole ‘ul’ tag or container of navigation, Like below :-

Don’t go with font size :p its because of my photoshop LOL, Well we have rounded the borders using CSS3 easily and which is now supprted by every modern browser. I have rounded the container at 10px radius and the ‘li’ element containing home and freakify at 5px border radius. Its looking good now. Code for this purpose is below :-

-webkit-border-radius: 10px; (Supported For Chrome)

-moz-border-radius: 10px; (Mozilla Supported)

border-radius: 10px; (Supported for Rest Browsers and for IE 9+)

(You can change the radius as desired and can put that into the css of the ‘ul’ element or ‘a’ element of ‘li’ to have rounded borders for links.)

Now, move ahead:- See below:-

Its changed now, Look what we got coming from first step to the last step. : Code to achieve above look is below :-

-webkit-border-radius: 0px 10px 0px 10px;

border-radius: 0px 10px 0px 10px;

-moz-border-radius: 0px 10px 0px 10px;

You can even have more rounded borders by changing the 10px value to some higher value. Now, you have got that how we can change the look and feel by using CSS3. Let me explain you one thing, Hope you may already know :-

In above code :-

First 0px = Top Left Side of Box

Second 10px =  Top Right Side of box

Third 0px = Bottom Right Side of box

Fourth 10px = Bottom Left Side of Box

Getting a cool hover effect using CSS3 Rounded Border :