css background

[angel777]

hi.. i have seen the css background of this link

http://multiply.com/user/edit-email

and i wonder how it made of... the top part of the color is darker.. where bottom is lighter..

 

 

thanks

[angel777]

i have read some tutorial.. 

there are ways to do the round cornering without an image.. do u think this is a good way?

please provide some good example on the round corner border example.

 

thanks

[mikemessiah]

the bottom has the background color that is set to the body

 

the top header section has a class

 

div.splashheaderlogowrap {
background-color: #e9eef1;
border-bottom: 1px solid #d7d9dd;
}

 

the div does not have a width so it expands to the end of the page.

 

With regards to the css rounding corners I have yet to find one that does it well enough to use. I still use images on all sites.

[angel777]

where can i download the round picture?  when i right click on corner picture to save those round corner in the web.. i cant..

also .. how do i do the glow effect on the border ?

[mikemessiah]

That is the corner pic...

 

http://images.multiply.com/common/circle/gray.gif

 

This is the background repeat for the middle background... Sorry I didnt understand your question at first...

They set this as the background with a repeat-x on the end

 

div.splashbox {
background: url(http://images.multiply.com/common/misc/bluegray-gray-fade.png) repeat-x top left;
position: relative;
padding: 10px;

 

http://images.multiply.com/common/misc/bluegray-gray-fade.png

 

then to put the image in to the corners they use this code here

 

b.cn { position: absolute; height: 10px; width: 10px; margin: 0; padding: 0; background: url(http://images.multiply.com/common/circle/gray.gif) no-repeat; line-height: 1px; font-size: 1px; } 
b.tl {top: -1px; left: -1px; background-position: top left;}
b.tr {top: -1px; right: -1px; background-position: top right;}
b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
b.br {bottom: -1px; right: -1px; background-position: bottom right;}

 

Problem with what they have done is that is does not display properly in IE6...

 

Does this answer your question?

[angel777]

yes.. perfect answer.. thanks for the effort..

 

how about the gradient background ..if i do not want to use picture to do the gradient..

i tried look at google.. but sound complicated..

http://www.solucija.com/templates/demo/Artificial_Intelligence/

 

look at the yellowish box at the bottom left.. 

can i use css to do that without putting a pic.. ? how ? thanks

[mikemessiah]

http://www.solucija.com/templates/demo/Artificial_Intelligence/images/package.gif

 

That is the Pic... it is done rather badly because you could have used a tiny 1px sliver of the gradient image as a background and had the box and shadow as a normal image above that.

 

I am not sure as to why you would want to use css only for this? the repeat that you will use will be tiny and not slow the page load time down at all.

[angel777]

thanks for the reply..

 

since u highly recommend on using the pic..

wouldn't it be troublesome to use photoshop to do the pic ? e.g. below

http://images.multiply.com/common/misc/bluegray-gray-fade.png

 

are we using photoshop to do that each time we want to have differet color ?

[mikemessiah]

well yes i do... Are you comfortable with photoshop? how do you create your gradients?

[dbrimlow]

I use the same technique for a site I have and it works in ALL IEs (including 5.2x for Mac).

 

The key is how it is used with the other css elements. Here is the same site with simply 2 different graduated background gifs (I am revising the site to be "elastic").

 

original style rounded corner version

beta revised style rounded corner version

 

The rounded corner css is:

 

/* styles for red and blue top and bottom rounded corners */
b.rtop, b.rbottom{display:block;background: #fff}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #800000}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height: 2px}
b.ntop, b.nbottom{display:block;background: #fff}
b.ntop b, b.nbottom b{display:block; height: 1px; overflow: hidden; background: #336699; border:none}
b.n1{margin: 0 5px}
b.n2{margin: 0 3px}
b.n3{margin: 0 2px}
b.ntop b.n4, b.nbottom b.n4 {margin:0 1px; height: 2px;}

 

It is a very cool effect and uses only tiny 2px wide x 30 to 60px high gifs made with photoshop. They take practically no bandwidth to download and once the css is loaded the first time the graphic is cached.