Transparency CSS3 Solved for older browsers!!! (2 posts)

  1. michaelclements
    Posted 6 years ago #

    Just a quickie to pass on a little workaround for using RGBA values in CSS3, having it render fine in Safari and Firefox and rendering a solid in non compliant browsers.
    Basically just input two 'background' values into the stylesheet.

    float: left;
    width: 100%;
    padding: 0 0 10px;
    text-align: left;
    vertical-align: top;
    background: #000;
    background: rgba(0, 0, 0, .75);
    color: #FFF;
    clear: both;

    The first is picked up by non CSS3 compliant browsers and the second by those that are compliant with CSS3.

    Can't tell you how relieved and easy this was, I had been thinking about it for quite some time.
    Hopefully it's of use to someone.


    Example here. http://michaelclements.co.uk/

  2. esmi
    Forum Moderator
    Posted 6 years ago #

    Except that the CSS3 compliant browsers actually pick up both (although the second value over-writes the first) and your CSS becomes invalid. Far better to have the second value in a separate sheet.

Topic Closed

This topic has been closed to new replies.

About this Topic