Forums

Blackhawkso

Hey Everyone

Does anyone have an idea on how I could feather the edge of the colour I have added to the background of a h1 tag so the colour will fade away and blend with the main page background?

At current the styling on the h1 tag is this:

h1#header {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  background: rgb(204, 204, 204);
  background: rgba(204, 204, 204, 0.5);
  width: 256px;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  top: 52px;
}

Thanks everyone.
Phil

Paulie_D

Have you tried a gradient?

Blackhawkso

@Paulie_D how could I apply a gradient just to the edge?

Hompimpa

Not sure about the "edge" ⇒ ⇒ ⇒ ⇒ http://jsfiddle.net/tovic/j4sG7/

shamai

use a box shadow

Blackhawkso

If you have a look at the site as it is you can see what the effect is that im trying to get. richardbonfield.com at the moment im using png files but now im wanting to update the site so its using css instead of images so it should load quicker.

Blackhawkso

@shamai would a box shadow work with the border radius? or would it ignore the corners?

Paulie_D

I meant a radial gradient.

I have't had time to play with it properly but=> http://jsfiddle.net/Paulie_D/Vpkcb/

Blackhawkso

@Paulie_D Nothing is showing up in either firefox or chrome

Paulie_D

Re-worked it...try the new link.

Paulie_D

My friend...I think you need to re-think the whole site before you get into more exotic effects...no-one...no-one uses tables any more to build websites.

I'm just saying!

Schmotty

Use a box shadow and make it the same color as background.

http://jsfiddle.net/Vpkcb/3/embedded/result/

Paulie_D

I'm with @Schmotty...box shadow works much better than the gradient.

xpy

I vote for @Schmotty too... box-shadow or maybe a border-image, but both wont work on ie...

Blackhawkso

@Paulie_D I'm getting rid of the tables the site will look the same but i'm fully updating the code and making it more symantic etc etc

Paulie_D

@xpy Yes, IE is always a problem...I'd just go with a simple opacity filter on a white background in an IE only css file. Sure you lose the 'cool' feather but that's the breaks.

Websites do NOT have to look the same in all browsers.

Blackhawkso

That box shadow works really nice cheers guys

Schmotty

For ie, you could use the png, or make an entirely different look all together.

treehouse : what would you like to learn today?

Forums

[Solved] Feather Edge Effect