- This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
Viewing 15 posts - 1 through 15 (of 15 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
Have you tried a gradient?
@Paulie_D how could I apply a gradient just to the edge?
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!
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
@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.
That box shadow works really nice cheers guys