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 :
Just make the above code opposite and change it like below for hover part of ‘li’ or ‘a’ in your css file.
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
-moz-border-radius: 10px 0px 10px 0px;
Now, upon hovering you will get a complete opposite effect then the above described one, Just like below :-
I have changed the background color for ‘a:hover’ and have also applied the opposte values of border radius then before.
Adding transition Effects for background Color :-
This is what we need video to explain but I shall try to explain using textual description. When we hover on something like in my case I have kept the orignal background color to be dark green for ‘a’ (Link) element and have kept a light freen background color for ‘a:hover’, whenever someone takes his mouse over link of navigation bar it will change its color at the same time without any delay but here using CSS3 we can create some time delay and can make the process occur at slow rate then before and using this a nice transition effect will be rendered. Try it yourself you will find it to be cool when hovering it will change the background color slowly…
-webkit-transition: background 400ms ;
-moz-transition: background 400ms ;
-ms-transition: background 400ms ;
-o-transition: background 400ms ;
transition: background 400ms ;
All these CSS3 inputs are necessary so that it may work at cross browser compatibility level. You can change the time for background color to be changed in a longer time also by alternating the 400ms value to some higher one. Enough for now, Should come up again with some cool resources and one thing more..
I will like to share some resources where you can generate live CSS3 code for any purpose using just some clicks.. But subscribe to us and stay tuned.
12 replies on “CSS3 Tips: Add innovation to Webpages”
Wao wao Wamiq Amazing :P
isent it better to make a theme from scratch rather then putting small chunks of code :) ?
is the above freakify categories also made in CSS3
Very nice and a handy tutorial for a lot of beginners out there.
I would say, how about provide a demo and Downloadable source files?
Yes of-course.
Yes its better!
Who can code a theme from scratch? hardly 10% bloggers? eh? What about the other 90%. They use things like this :)
I think you should change the pictures into code, using tag, so that user can experience the demo on your site.
i always love to articles on your blog…..and today i have learn also..and i am also going to add this on my blog….
Good to know that
Wamiq take care of the suggestion!
Why are you so amazed? :)
can’t tell you here :x