SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 52
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    4 sided container shadow, with 1 image, can you do better?

    4 sided container shadow, with 1 image, can you do better? Here is test page. Mainly, I'd like to be able to get rid of the negative margin on the #content div (i.e. #content{margin:-11px;} ). I rather not have to suck the main content back up in order to bring the border flush with the shadow. See a way? Or, can you clean it up at all?

    Back story: When I work on a site for a client, I try and code it so that I can easily make changes along the way (as colors change) without having to go back and recreate the image. Some times this is possible, sometimes not, frustrating regardless! So, working off of what Erik-J posted a while back, I'm trying do do this one size fits all container shadow. Thanks!

    PS: The image is 1000px X 5000px, and the container is % based so you can see it in action. On the clients site the container will be a fixed width.
    Last edited by Paul O'B; Dec 12, 2009 at 04:54.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Eric, I'm afraid I don't have a brain for this sort of thing, unlike you.

    But just to annoy you, (and to get my revenge), let me post the following code. (View in Firefox or Safari, if you dare... )

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Shadow</title>
    	
    <style type="text/css" media="all">
    #outer1 {
      -webkit-box-shadow: -3px -3px 8px #aaa;  
      -moz-box-shadow: -3px -3px 8px #aaa;  
      box-shadow: -3px -3px 8px #aaa; 
      margin:40px auto;
      width:70&#37;; 
    }
    
    #outer2 {
      -webkit-box-shadow: -3px 3px 8px #aaa;  
      -moz-box-shadow: -3px 3px 8px #aaa;  
      box-shadow: -3px 3px 8px #aaa;
    }
    
    #outer3 {
      -webkit-box-shadow: 3px -3px 8px #aaa;  
      -moz-box-shadow: 3px -3px 8px #aaa;  
      box-shadow: 3px -3px 8px #aaa;
    }
    
    #content {
      -webkit-box-shadow: 3px 3px 8px #aaa;  
      -moz-box-shadow: 3px 3px 8px #aaa;  
      box-shadow: 3px 3px 8px #aaa;  
      border:1px solid #333333;
      min-height:0;
      padding:20px;
      text-align:justify;
    }
    </style>	
    </head>
    
    <body>
    <div id="outer1">
    <div id="outer2">
    <div id="outer3">
    <div id="content">Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci ipsum tellus convallis tincidunt sapien est. Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci ipsum tellus convallis tincidunt sapien est.</div>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph, revenge, why? I don't have the brain for this sort of thing either. I have educated guesses, and just keep throwing numbers at it until I find something that works.

    Nice! That's identical to mine (without an image). Although, needless to say, I need it to work in IE7/8. Thanks for that though!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    revenge, why?
    Just being silly.

    It's a shame CSS3 implementation is coming along so slowly, as it would make life a whole lot easier. But I'm sort of resolved to use it where available from now on, and just let IE users go without.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    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)
    I know when I do 4 sided images (dropdhadows in this case), I like to keep the iamges in empty divs and just AP them into place.
    Yea you gotta slice the image but it's soo easy.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I know when I do 4 sided images (dropdhadows in this case), I like to keep the iamges in empty divs and just AP them into place.
    Yea you gotta slice the image but it's soo easy.
    True, but, that's the thing see. If your building it for yourself, then you know the colors, size, style, you want to use. I need to get better with Photoshop - then I just make a quick pic. But in the meantime, it's time consuming to code a layout, present to the client, and then they want to change this and that. Now you have to go back and remake the images to their specs. Not to mention IE6! When using shadows, it's best to not use pngs for her obviously. So you would use a solid color background behind the shadow when making the shadow. But what color do you pick when you for see the client changing their mind. See! There in lies my frustration. So, doing it this way, I at least dont have to change the shadow graphics.

  7. #7
    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)
    Well in that case use nested elements with each one getting a small 5px wide image or w/e and just repeat it.
    Give the outer most container some padding to get away from the image and bingo.

    Sounds like you have a frustrating client lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,
    Just a shot in the dark here. If I set a dark BG color on the body it shows me where the shadow image begins (as long as the #fff bg color is left on the #a-#d divs)

    It looks like there is about 11px-12px worth of non-shadowed space on all four sides of the image. If you were to trim that away would that not allow you to change all your 30px values to say 19px (or whatever the difference is).

    This kinda works but it slightly distorts how the round corners meet. I think that is due to that non-shadowed margin on the image, it might work if the image was trimmed by 11px on all four sides.
    Code:
    * {
    margin:0;
    padding:0;
    }
    body{background:red}
    
    #wrap {
    margin:40px auto;
    width:70%;
    }
    #a, #b, #c, #d {
    float:left;
    display:inline;
    position:relative;
    background:#fff url(shadow.png) no-repeat;
    }
    #b {
    background-position:right top;
    margin:0 0 0 19px; 
    }
    #c {
    background-position:left bottom;
    margin:19px 0 0 -19px; 
    }
    #d {
    background-position:right bottom;
    margin:0 0 0 19px;      
    padding:0 19px 19px 0; 
    }
    #content {
    /*margin:-11px;*/
    padding:20px;
    min-height:0;
    border:1px solid #333;
    text-align:justify;
    }

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hey Ray - good job! Yup, 19px/-19px was the magic number I came to also. But, like you found, that distorts the shadow slightly. That's a good idea, I'll trim the image by 11px and see where that gets me...

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I played with Big John's code a few days back, seen here http://www.positioniseverything.net/...pshadows2.html and thought it seemed a little more complicated. But John just pointed out to me (because of my instigation) why his method is superior.

    I didn't notice before, but my link needs a solid color background on all the nested divs in order to work. That means that, while my posted code may be simpler, it only works on solid color backgrounds. Still a solid technique, but not good enough. So I'm moving back to John's code, so I have the flexability to put the shadow on any color backgrounds (gradients, patterns, etc). Now off to try and wrap my brain around it...

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    s. Not to mention IE6! When using shadows, it's best to not use pngs for her obviously. So you would use a solid color background behind the shadow when making the shadow. But what color do you pick when you for see the client changing their mind. See! There in lies my frustration. So, doing it this way, I at least dont have to change the shadow graphics.
    This is a demo from a few months ago that has transparent corners that work on any background and works in ie6 without hacks as it uses 8bit pngs.

    http://www.pmob.co.uk/temp/roundcorner-oneimage.htm

    It also uses one image like yours and the same number of elements but only works in IE6 because there is no real shadow

    We could use a similar method for your shadow so that it can be used on transparent backgrounds all using the same image but we can't support IE6.

    http://www.pmob.co.uk/temp/roundshadow-oneimage.htm

    The element can be any colour and so can the background unlike your method which needs a solid background of the same colour. There are no extra elements from yours either.

    With a few extra lines of css we can give IE6 a pseudo shadow just for old times sake.

    Last edited by Paul O'B; Sep 22, 2009 at 13:25.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ray, I trimmed the image, but all it ended up doing was changing the number values. Unfortunately it didn't enable me to remove the negative margin - good idea though. No biggy - I'm fine with it!

    Nice solution Paul! The IE6 one is visually the same thing I did here a while back. http://www.visibilityinherit.com/cod...ie6example.php


    One snag though... your code Paul, has the same little bug in Opera that Eriks Inspired roundbox code did. When you increase or decrease the windows width, the top left corner peaks out at different widths. My solution for Eriks code was to add another div (and maybe some other stuff - don't remember). Can you see an easy fix for yours Paul? Thanks a million!
    Last edited by Paul O'B; Dec 12, 2009 at 04:56.

  13. #13
    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)
    Eric, I went to Pauls sollution and changed the width of the window and I didn't see anything sticking out.

    I know when Eric J made his rounded corners box a few months ago Opera would be flaky with the width and that was because the inner box was (or wasn't, I forget) floated.

    I didn't test to see if it would work becausse I didn't see it in the first place.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Eric, I went to Pauls sollution and changed the width of the window and I didn't see anything sticking out.
    You never see it LOL. It's a percent width. Just drag the window (in Opera) left to right/right to left. It appears at different widths. I looked, Pauls demo does it also.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    One snag though... your code Paul, has the same little bug in Opera that Eriks Inspired roundbox code did. When you increase or decrease the windows width, the top left corner peaks out at different widths. My solution for Eriks code was to add another div (and maybe some other stuff - don't remember) - seen here http://www.visibilityinherit.com/pro...ndbox-demo.php Can you see an easy fix for yours Paul? Thanks a million!
    Yes opera is a pain and has always been bad with percentages ever since I can remember. The only way around it that I can see is by changing it a little and adding one extra element.

    http://www.pmob.co.uk/temp/roundshad...mage-opera.htm

    That seems to work in opera but with the only caveat is that the percentage width is controlled by another parent wrapper. If you add a percentage width to the first element it doesn't seem to like it but If you wrap it another float with a width then all is fine.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Regarding my last comment this is exactly what happens to your demo also in opera.

    Add a width to the first element and the corner goes astray.

    Code:
    <div id="wrap">
        <div id="a" style="width:50&#37;">
    So the only extra code in my demo is one extra span.

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks Paul for taking the time to look into that, I'll have a look. Have a good one!

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    One snag though... your code Paul, has the same little bug in Opera that Eriks Inspired roundbox code did. When you increase or decrease the windows width, the top left corner peaks out at different widths.
    Hmm. Like Ryan I can't for the life of me see this effect happening in Opera. Both examples work flawlessly. I'm using Opera 10.00 on Mac. Just thought I'd mention it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hmm. Like Ryan I can't for the life of me see this effect happening in Opera. Both examples work flawlessly. I'm using Opera 10.00 on Mac. Just thought I'd mention it.

    Paul fixed his, it can still be seen on mine. Maybe it's only a windows thing...

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah, ok, I see it now. My screen wasn't quite wide enough for it to happen, but when I moved the browser window off to the left of screen and widened further, yours started to break up along the top right and bottom left.

    Bummer. Hope Paul's solution works for you.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Done! I wanted to make a total plug-in-shadow. So say I had a site already built. I wanted the ability to simply add the shadow code to it without disturbing anything or having to make any adjustments to the code I already had in place. So, you simply add this around the wrap. Total transparency - total adjusts to size - totally simple. Thanks for your help guys!

    <div class="shadow"><div class="a"></div><div class="b"></div><div class="c"><div class="d"><div class="e">
    <div id="wrap">
    text
    </div>
    </div></div></div></div>

    And then some css...
    Last edited by Paul O'B; Dec 12, 2009 at 04:56.

  22. #22
    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)
    Quote Originally Posted by EricWatson View Post
    Paul fixed his, it can still be seen on mine. Maybe it's only a windows thing...
    Nah I have windows.
    Quote Originally Posted by ralph.m View Post
    Ah, ok, I see it now. My screen wasn't quite wide enough for it to happen, but when I moved the browser window off to the left of screen and widened further, yours started to break up along the top right and bottom left.

    Bummer. Hope Paul's solution works for you.
    I guess that sorta explains it. I have a very small screen.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Well, the container was set at 70&#37;, so it should of been the same distance in percent, as mine. I only have a stupid 1024 res. I hate it! It affects the look of the sites I build. When ever I see a site I built on a larger screen, It looks puney.

  24. #24
    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)
    Quote Originally Posted by EricWatson View Post
    Well, the container was set at 70%, so it should of been the same distance in percent, as mine. I only have a stupid 1024 res. I hate it! It affects the look of the sites I build. When ever I see a site I built on a larger screen, It looks puney.
    I have smaller then that lol.

    And yea I have the smae problem . Is Paul's soluion (the one with the rounding error or w/e) still showing hte bug? I'm on a very big monitor right now so I wanna take a stab and see if I can see the thing)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  25. #25
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Paul fixed his already.
    Last edited by Paul O'B; Dec 12, 2009 at 04:57.


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
  •