SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Alpha filter

  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alpha filter

    I'm working on an intranet site at the moment where I know my users will be using IE5+. I was wondering with the alpha filter, could I achieve an effect on a header tag where the text was black, the background white but semi transparent as it sits on a page with a blue background? Easily achievable with a graphic in Photoshop but can I do this with css alone?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I think you can do something like this although I think it will only work with a background image in the body, otherwise the header will just be a different colour.

    Ie needs the header to be posiotn absolute for it to work.
    Code:
    <style type="text/css">
    <!--
    .header {
     position:absolute;
     background-color: #FFFFFF;
     filter:alpha(opacity=50);
     -moz-opacity: .5;
    }
    body {
     background-color: #0099FF;
     background-image:  url(images/normal.gif);
    }
    -->
    </style>
    </head>
    <body>
    <div class="header">Hello this is a header</div>
    I've never used it myself I just found that snippet in my collection, so maybe someone else will have a better idea .

    Paul

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul. I kinda realised afterwards I couldn't achieve what I want without the text fading also so I've plumped for a background colour which is a tint of the page background.

    Next question, the headers are all different so obviously have different widths. What I really wanted to do was have the background colour span about 10px either side of the text but I can't really do that dynamically can I?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm not quite sure what you mean.

    Do you mean something like this:
    Code:
    <style type="text/css">
    <!--
    body {
     background-color: #99CCFF;
    }
    .header {
     background:#B9DCFF;
     padding-left:10px;
     padding-right:10px;
    }
    -->
    </style>
    </head>
    <body>
    <h1><span class="header">Header</span></h1>
    </body>
    Paul

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes actually. How could I not have worked that out for myself?!

  6. #6
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *edit* it doesn't seem to work me though unless I don't specify a font size??? It's when I specify the font size that it just spreads full width of the page.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    It's when I specify the font size that it just spreads full width of the page.
    Hmmm doesn't seem to make any difference to me. Can you post what you are doing so we can see?

    Paul

  8. #8
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to apply this style to all <h4> tags, so I don't want to apply a class nor use span tags, I think that forms part of the problem. Remove span from your example, apply the class to the <h1> tag and it doesn't work.

    Code:
    h4 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    padding: 0.2em;
    margin: 0.2em;
    font-size: 1em;
    font-weight: bold;
    padding-left:10px;
    padding-right:10px;
    background-color: #F0F0F5;
    text-align: center;
    }

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The heading tags are block level and span the whole line. You will either have to give it a specific width (% or px) to limit its width or you could turn it into an inline element as follows.

    Code:
    <style type="text/css">
    h4 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    padding: 0.2em;
    margin: 0.2em;
    font-size: 1em;
    font-weight: bold;
    padding-left:10px;
    padding-right:10px;
    background-color: #F0F0F5;
    display:inline;
    }
    div.centre {text-align: center;}
    </style>
    </head>
    <body>
    <div class="centre">
    <h4>Hello this is a header</h4>
    </div>
    However you will then have to take care of following content becuse it is now an inline element like a span. You will also have to apply centreing to a parent element as above.

    I don't think this solution is as good as my original code, however you may find it of use.

    Paul

  10. #10
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, as always your responses are helpful


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •