The css i.e cascading stylesheet is the
styling language of the world wide web.The use of combining the power of css
with html can really help in the creation of really,really very beautiful
static websites.Today we shall learn how to add a mixture of two or more
colours to the background of a website or webpage.This is one of the greatly
added features in css 3.To do this you have to make use of what we call css
gradients.
Before we continue,it is important we know
what agradient is,A gradient can simply be defined as a smoot transition
between two or more colors.In those days these kind effect could only be
achieved using pictures.But now,with the advent of css3 you can do this.Here is
the code
body{
background: -webkit-linear-gradient(red,blue);
background: -0-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:linear-gradient(red,blue);
)
Due to the fact that various browsers support
this gradients differntly,we had to write code for each browser.The first
declaration
-webkit-linear-gradient(red,blue);
this is for webkit browsers like google
chrome and safari.
-0-linear-gradient(red,blue);
this is for our precious operamini browser.
-moz-linear-gradient(red,blue);
this is for our precious mozilla firefox.
linear-gradient(red,blue);
this is a standard synthax for all of them
hopefully when all browsers begin to fully support css 3,this is the only
declarartion you will be needing.
You could also add directions to it to
achieve an even more beautiful effects using this.
body{
background: -webkit-linear-gradient(left,red,blue);
background: -0-linear-gradient(right,red,blue);
background:-moz-linear-gradient(right,red,blue);
background:linear-gradient(to right,red,blue);
)
This will make it to move the gradient design
from left to right.
body{
background: -webkit-linear-gradient(left top,red,blue);
background: -0-linear-gradient(bottom right,red,blue);
background:-moz-linear-gradient(bottom right,red,blue);
background:linear-gradient(to bottom right,red,blue);
)
This will make it to move diagonally,helping
you to achieve a much more nicer effect.
body{
background: -webkit-linear-gradient(180deg,red,blue);
background: -0-linear-gradient(180deg,red,blue);
background:-moz-linear-gradient(180deg,red,blue);
background:linear-gradient(180deg,red,blue);
)
This makes use of angles to achieve a much
more nicer effect,as like the above will use a straight transition between the
two colours.
body{
background: -webkit-linear-gradient(180deg,red,blue,green);
background: -0-linear-gradient(180deg,red,blue,green);
background:-moz-linear-gradient(180deg,red,blue,green);
background:linear-gradient(180deg,red,blue,green);
)
This is the use of more than two colors to
help you understand that is is not only two colors you can use.
Note: Please you can use the code above but
do not forget to replace the red,blue and green with a colour of your choice
and also to use multiple colors just keep adding commas with the name of the
colour for example;
body{
background: -webkit-linear-gradient(180deg,red,blue,yellow,green);
background: -0-linear-gradient(180deg,red,blue,yellow,green);
background:-moz-linear-gradient(180deg,red,blue,yellow,green);
background:linear-gradient(180deg,red,blue,yellow,green);
)
Please also know that in place of these color
names,you can use color codes to give you access to a wider range of colors.
0 comments:
Post a Comment