Grow your CSS skills. Land your dream job.

Feather Edge Effect

  • # March 19, 2012 at 10:13 am

    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

    # March 19, 2012 at 10:49 am

    Have you tried a gradient?

    # March 19, 2012 at 11:27 am

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

    # March 19, 2012 at 11:38 am

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

    # March 19, 2012 at 11:42 am

    use a box shadow

    # March 19, 2012 at 11:44 am

    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.

    # March 19, 2012 at 11:50 am

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

    # March 19, 2012 at 11:59 am

    I meant a radial gradient.

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

    # March 19, 2012 at 12:02 pm

    @Paulie_D Nothing is showing up in either firefox or chrome

    # March 19, 2012 at 12:03 pm

    Re-worked it…try the new link.

    # March 19, 2012 at 12:20 pm

    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!

    # March 19, 2012 at 12:33 pm

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

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

    # March 19, 2012 at 12:39 pm

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

    xpy
    # March 19, 2012 at 1:21 pm

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

    # March 19, 2012 at 1:21 pm

    @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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".