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:
font-family: Arial, Helvetica, sans-serif;
background: rgb(204, 204, 204);
background: rgba(204, 204, 204, 0.5);
Have you tried a gradient?
@Paulie_D how could I apply a gradient just to the edge?
Not sure about the “edge” ⇒ ⇒ ⇒ ⇒ http://jsfiddle.net/tovic/j4sG7/
use a box shadow
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.
@shamai would a box shadow work with the border radius? or would it ignore the corners?
I meant a radial gradient.
I have’t had time to play with it properly but=> http://jsfiddle.net/Paulie_D/Vpkcb/
@Paulie_D Nothing is showing up in either firefox or chrome
Re-worked it…try the new link.
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!
Use a box shadow and make it the same color as background.
I’m with @Schmotty…box shadow works much better than the gradient.
I vote for @Schmotty too… box-shadow or maybe a border-image, but both wont work on ie…
@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
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".