The internet is filled with tutorials
on how to do nice effects with CSS,so I decided to fill it more by
doing a tutorial on 3 effects: Rounded corners,Shadows and gradients.
At the end I will show you an example of what can be done when you
string these 3 together.
WARNING: A lot of this stuff may not
work in Older browsers,if your browser does not support these styles
,the following link may help http://www.mozilla.org/.
If you need to see the pictures below more clearly,click them.
First off ,lets create two files one
html file and one CSS file hello.html and style.css.
Lets start with setting up the CSS so
we can get a nice layout.
body
{
font-family:Arial;
background-attachment:fixed;
width:800px;
margin:5px auto;
background-color:#696969;
font: normal 10pt
Arial,Helvetica,sans-serif;
}
#pageDiv
{
background-color:#ffffff;
padding:3px;
}
Then set up the html file.
<html>
<link rel="stylesheet"
href="style.css" type="text/css">
<head>Hello world</head>
<body>
<div id="pageDiv">
Here is some content<br/>
There isnt much
</div>
</body>
</html>
Opening hello.html with your browser
should result in something like this:
Rounded corners
Now lets round the corners of pageDiv
by adding the following code to the #pageDiv block of the css.
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
The three lines all do the same thing
but for different browsers.
Your website should now look like this:
Shadows
To Add shadows ,simply add this code to
#pageDiv:
-moz-box-shadow: 5px 5px 5px #424242;
-webkit-box-shadow: 5px 5px 5px
#424242;
box-shadow: 5px 5px 5px #424242;
Result below:
Gradients
Now lets add a
gradient to the background,do this by adding the following code to
the #pageDiv block of your CSS
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEDEDE',
endColorstr='#B3B3B3');
background:
-webkit-gradient(linear, left top, left bottom, from(#DEDEDE),
to(#B3B3B3));
background:
-moz-linear-gradient(top, #DEDEDE, #B3B3B3);
The result is
shown below:
Example
Below is a web
page I made using only these styles,the only thing that is on this
page that I haven’t listed is the inner shadows I used on the
navigation links in the header.
To make an Inner
shadow ,you can use the following code:
-moz-box-shadow:inset
0 0 10px #000000;
-webkit-box-shadow:inset
0 0 10px #000000;
box-shadow:inset 0
0 10px #000000;
Comments
Post a Comment