SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    How is this done?

    How is this done with the semi transparent thing on the upper thing and the "wrapper" going up in it on http://www.netdreams.co.uk/

    And btw, as you can see ive created like 100 threads already, but I wanna learn webdesign sooo much! :/

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div#top {
        background: url("css/images/top-bg.png") repeat-x;
        height: 137px;
    
    
    }
    That's the code for that grayish transparent part. It is a PNG image which allows for alpha transparency. That's how the transparency look is given .

    Off Topic:

    66 posts and you've made 100 threads?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    HAHHAHAH
    Quote Originally Posted by RyanReese View Post
    Code:
    div#top {
        background: url("css/images/top-bg.png") repeat-x;
        height: 137px;
    
    
    }
    That's the code for that grayish transparent part. It is a PNG image which allows for alpha transparency. That's how the transparency look is given .

    Off Topic:

    66 posts and you've made 100 threads?

  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 kvnwpts View Post
    Thanks.

    HAHHAHAH
    Keep in mind that, in CSS3, there is a new added alpha (transparency) channel. As such, you can define transparency in the color, like:

    Code:
    background-color:RGBA(0,0,0,0.5);
    width:x;
    height:y;
    That would be a semi-transparent black.

    Another way is opacity.
    Code:
    background-color:RGB(0,0,0);
    opacity:0.5;
    height:y;
    width:x;
    Although it is CSS3 and both are semi-supported - RGBA --- Opacity

    ~TehYoyo
    [/code]

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ty, overclass for me now. Ill try stick with the basics first :P

    Quote Originally Posted by TehYoyo View Post
    Keep in mind that, in CSS3, there is a new added alpha (transparency) channel. As such, you can define transparency in the color, like:

    Code:
    background-color:RGBA(0,0,0,0.5);
    width:x;
    height:y;
    That would be a semi-transparent black.

    Another way is opacity.
    Code:
    background-color:RGB(0,0,0);
    opacity:0.5;
    height:y;
    width:x;
    Although it is CSS3 and both are semi-supported - RGBA --- Opacity

    ~TehYoyo
    [/code]

  6. #6
    <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)
    Just making sure you keep it in mind

    Always useful, I find.

    ~TehYoyo

  7. #7
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yep.

    I do as much as i can.
    Quote Originally Posted by TehYoyo View Post
    Just making sure you keep it in mind

    Always useful, I find.

    ~TehYoyo

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd suggest the opacity property as TehYoyo suggested, since RGBA support is... sketchy at best. If you use the opacity property and a IE filter you have to worry that anything inside your DIV will ALSO have transparency applied to it -- and you probably don't want that. The solution is a empty sandbag DIV before all your content.

    <div class="opacitySandbag"></div>

    Code:
    .opacitySandbag {
    	height:100px;
    	margin-bottom:-100px;
    	background:#000;
    	opacity:0.5;
    	-moz-opacity:0.5;
    	filter:alpha(opacity=50);
    }
    While it takes an extra markup element, it also happens to work all the way back to IE 5.5. Basically the margin-bottom just makes everything after the div ride up over it. It also means you don't have to play with positioning, or worry about opacity inheriting to any child elements. If the div was wrapping your header area content, delcaring opacity on it would also make everything in the header transparent -- and you probably don't want that.

    Of course, if legacy versions of IE supported :after and :before properly, you could also add the extra sandbag that way; unfortunately they don't. You could use an expression to fake it, but that ends up being a needlessly complex mess -- at which point, just use the sandbag.

    ... and in this case I'd do this long before I'd go for an alpha transparent .png -- but as a rule of thumb I don't consider alpha transparent images to be viable for web deployment due to the larger filesizes, unusual cross browser behaviors, need for filters to make them work in legacy IE... etc, etc...


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
  •