SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Designing With Transparency For Fine Design

    Sitepoint Members,
    I have a 3 vertical column website with a fluid center column and fixed outside columns. Outside all of the columns I have a background. When you scroll the background image is fixed and the text moves as directed. I need an artisitc idea that shows some of the background in one or more of the columns. The way my site is set up now you really don't get the sense that the text is sliding over the background.
    My site is set up like this, but this doesn't have a background outside the columns.
    http://www.dynamicdrive.com/style/la...d-fluid-fixed/


    Thanks,

    Chris

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You could use RGBA backgrounds for your columns. It'll work in modern browsers, so should you use it, make sure the column content is readable without RGBA or provide a full RGB fallback for browsers that don't understand RGBA.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Kohoutek.
    That's interesting. I didn't know you can control opacity of a color.

    Thanks,

    Chris

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Kohoutek.
    That's interesting. I didn't know you can control opacity of a color.

    Thanks,

    Chris
    It's a new CSS3 feature meaning...you can't (in older browsers).

    Check out this page to see where you can use it. Since IE8 and 7 can't use it (although thank God that more people are switching to IE9!), it should only be used to enhance a UX, meaning that the site should be fully functional w/out RGBA.

    ~TehYoyo

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Kohoutek, TehYoyo,

    If in the sample website above there's a purple geometric background - undeneath what we can see on the site, if I wanted to put a narrow vertical window in one of the columns, say 400 pixels high by 10 pixels wide, that revealed the geometric purple design, how would that be programmed ?

    Thanks,

    Chris

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It'd be good if you could show us exactly what you mean or want to accomplish. Do you have a test page?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Kohoutek,
    How about this: How would I make the text transparent and so showing the background? Is that available for only css3? If so how would I adjust for browsers that can't handle css3?
    Right now I have .post{color:#ccccff;padding:1em 0} for the text coloring.

    Thanks,

    Chris

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I think it's not a good idea to make the text transparent, for you'd have to do it quite drastically for a background pattern to show through.

    But if you were to do it, then I'd use opacity or RGBA, the former having partial support in legacy IE browsers.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Kohoutek,
    I don't see how that would work. Transparency works with a visible image. The background where the text is is not visible.
    http://www.w3schools.com/css/css_image_transparency.asp

    Are you saying I can color the text with the backgroud image? If so, I wouldn't need transparency.

    Thanks,

    Chris

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Transparency works for text as well. You can't color the text with an image.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Do you have an example of some code that would do that?

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Why don't you try it out first? If it doesn't work, we can help, but you need to give it a go yourself first.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ul {background:url(my_bg.png);} or on a list item li{background:url(my_bg.png);}

    How is this gong to color text?

    When you write, "Why don't you try it out first?"

    What does "it" refer to?


    Chris

  14. #14
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I don't quite understand what you are trying to do.

    You said you wanted to give text transparency, not an image.

    If you want to give text transparency, then you'd use something like:

    Code:
    ul li {
    color: rgba(255,255,255,.5);
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  15. #15
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have text that is white. I don't want it white. The background is an image. I want the image to show through the text. Is there some simple coding that will do that.

  16. #16
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I gave you the code above... If you make the text semi-transparent, then anything that is under it, be it a solid color or a background image, will show through.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  17. #17
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How do you provide a full RGB fallback for browsers that don't understand RGBA?

  18. #18
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Provide a solid color for legacy browsers via conditionals for IE or declare a color with a solid value first, and below it declare color again with RGBA, that way UA who understand RGBA will ignore the first rule and legacy browsers will ignore the second rule.
    Last edited by kohoutek; Apr 19, 2012 at 08:42.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  19. #19
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    how do you declare a color with a solid value first.

  20. #20
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Code:
    color: #blah;
    color: rgba(blah,blah,blah,.5);
    I think it'd be good if you learned the basics of CSS, otherwise you'll have a hard time getting anywhere. How to declare a property is something you should know before touching CSS.

    I'd start with simple tasks. This site offers a brief introduction: http://www.cssbasics.com/
    Maleika E. A. | Rockatee | Twitter | Dribbble



  21. #21
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried
    .post{color:#ccccff;rgba(255,255,255,.5);padding:1em 0}
    removed rgba then tried
    ul{list-style:none;rgba(255,255,255,.5);margin:0;padding:0}
    removed rgba then tried
    li{rgba(255,255,255,.5);margin:3.5em 0}

    Unfortunately none of these did anything.

    Any ideas?

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    All of those are invalid.

    RGBA is not a valid property. Validation would have told you that. You seem to have misread kohouteks post. You can EITHER have #000000 (hex) or rgba. One or the other.

    Code:
    color:rgba(255,255,255,.5);
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ryan,
    So I'll try .post{color:#ccccff;color:rgba(255,255,255,.5);padding:1em 0}

    It just made the text gray. Does .5 have a tendency to make backgrounds gray?

    Thanks,

    Chris

  24. #24
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Ryan,
    So I'll try .post{color:#ccccff;color:rgba(255,255,255,.5);padding:1em 0}

    It just made the text gray. Does .5 have a tendency to make backgrounds gray?

    Thanks,

    Chris
    It makes the text 50% transparent (0.5). You can have values from 0-1 and 0.5 is 50% off whatever solid color or background color you have declared.

    In your example, you've used white and declared that it should be 50% transparent. What you see as grey is actually the transparency and the background color/image showing through.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  25. #25
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So on .post{color:#ccccff;color:rgba(255,255,255,.5);padding:1em 0}
    I guess that should be
    .post{color:rgba(255,255,255,.5);padding:1em 0}
    so where would the full RGB fallback for browsers that don't understand RGBA go?
    Two lines in css?
    .post{color:#ccccff;padding:1em 0}
    .post{rgba(255,255,255,.5);padding:1em 0}

    Thanks,

    Chris


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
  •