/    Sign up×
Community /Pin to ProfileBookmark

Try to analyze layout….

Copy linkTweet thisAlerts:
Jul 09.2009

Hi!

I try to analyze the layot of the site [url]www.one.com[/url] I use firebug to check all elements and understand the most of it. I’m not an expert, but want to learn more.

What I like with this site is the shadow on both sides of the site. The fading background is a background image in the Body tag, that’s ok. It’s the background image with the shadoes on both sides that i’m interested of.

It looks like they have used a background image in some kind of container that wraps around the elements, [B]#page-container[/B] But there some strange thing, the width of the container don’t have the same width in pixels as the background image?! The same image is then also placed in [B]body.wide #page-container[/B]. Why?

And finally when I open the .png file [B]site_background.png[/B] with the fading effect in photoshop, I can’t see any fading effect dispite full zoom?!

I appreciate som help if any knows how they have done! Thanks! ?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@svidgenJul 09.2009 — I couldn't tell you what tool to use in Photoshop, but if you open the image in the GIMP ....

Click [I]Windows[/I] and then [I]Pointer[/I]. Now, if you hover the "eye-dropper" over the edge pixels, you'll see that the color is black (#000000) for all 7 edge pixels. However, the alpha channel goes from 17% opacity (7th pixel in) to 2% opacity (outermost pixel(s)). That'd be what produces the effect you're looking for.
Copy linkTweet thisAlerts:
@aj_nscJul 09.2009 — I don't know why they do it the way they do it because they have a fixed width container, so you only need one background image for the shadow effect, but instead they use two....that complicates the HTML because it makes them need to add an extra wrapping div (one for the left background shadow and one for the right background shadow).

Basically, the three backgrounds images are like this:

  • 1. The gradient image on the body (can be as little as 1px wide but it looks like they have it 4px wide....the bandwidth you save is miniscule so it doesn't matter)


  • 2. The left shadow is a png of a shadow that fades into nothing and it is 1px and repeats all the way down the left side of the page.


  • 3. The interesting part here is they use the same image as the left shadow as the right shadow, but the trick is, it is positioned different using background-position.


    • Basically, site_background.png is a PNG file with a fading of the opacity to the left and right of the center of the image where the center of the image is the darkest part (but probably still somewhat transparent).

    That saves on the number of HTTP calls by only loading one image instead of two images (one for each side).

    If you need clarification on any of this, just post back and be specific.
    ×

    Success!

    Help @pkng spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...