Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Feather Edge Effect

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #37227
    Blackhawkso
    Member

    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

    #99409
    Paulie_D
    Member

    Have you tried a gradient?

    #99413
    Blackhawkso
    Member

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

    #99416
    shamai
    Member

    use a box shadow

    #99418
    Blackhawkso
    Member

    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.

    #99419
    Blackhawkso
    Member

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

    #99420
    Paulie_D
    Member

    I meant a radial gradient.

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

    #99421
    Blackhawkso
    Member

    @Paulie_D Nothing is showing up in either firefox or chrome

    #99422
    Paulie_D
    Member

    Re-worked it…try the new link.

    #99425
    Paulie_D
    Member

    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!

    #99428
    Paulie_D
    Member

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

    #99430
    xpy
    Participant

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

    #99431
    Blackhawkso
    Member

    @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

    #99433
    Paulie_D
    Member

    @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.

    #99434
    Blackhawkso
    Member

    That box shadow works really nice cheers guys

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.