SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    giving an image a transparent border, on the inside

    A designer of mine designed a cool effect on images for a CMS theme. I thought the effect was impossible to do but I wonder (hope) if anyone here disagrees with me.

    There are a few rules here:
    1. Images that are styled are in user-generated content, we do not know the markup of this content. Assume you have only an image tag.
    2. Javascript is allowed.
    3. Your method must work on images of different dimensions, but it's ok if it's limited to a certain maximum size, like 1200x1200 pixels.

    The effect:
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I remember this is possible.

    Paul did one layout with 3px gradient borders. I don't know exactly waht hte file name was but I remember because it was near the time of our CSS opacity quiz..perhaps Paul remembers what I'm talking about and can find the file.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ryan, I think you may be referring to this example from the quiz.

    @Peach - the effect is achievable but you would need to use JS if you want it done dynamically as it needs more elements constructed and styles applied.

    This example uses one image but duplicates it in the css background.

    http://www.pmob.co.uk/temp/transpare...ge-borders.htm

    You said it needs to be automatically done so you would need javascript to find the width and height of the image and then apply those dimensions to the css styles along with the image source and also to dynamically add the extra wrappers needed. (seems a lot of work)

    Opacity works as a whole on ethe element and its children and therefore you have to have separate elements otherwise the image would also be transparent which is discussed in quiz 20.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Of course for css3 capable browsers like Firefox 3,Safari 3 and opera10 you could do this instead.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        border:5px solid rgba(255, 255, 255, 0.42);
        width:290px;
        height:290px;
        position:relative;
        background: url(images/zimg5.jpg) no-repeat 50&#37; 50%;
        overflow:hidden;
    }
    img {
        position:absolute;
        top:-5px;
        left:-5px;
    }
    </style>
    </head>
    <body>
    <p><img src="images/zimg5.jpg" alt="Example transparent borders" width="300" height="300" /></p>
    </body>
    </html>

  5. #5
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks cool, but I think it would be too resource intensive (read:slow) to iteratively process many images, fetch dimensions and add the markup, but I might have a try and see how well it performs.
    I'm sure it will have no performance problems in the latest firefox, opera, safari and chrome browsers so I might just exclude ie6 & ie7 from the effect. not so sure about ie8 though.

    Thanks P!

  6. #6
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by the way, in your second example, why does the P tag have a background image. You're already using the image tag to present the image and the border is not an image either, so the background image was a mistake?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by peach View Post
    by the way, in your second example, why does the P tag have a background image. You're already using the image tag to present the image and the border is not an image either, so the background image was a mistake?
    Well actually the reverse is true.

    The background image is all that is really needed because the background will stretch underneath the borders and be made transparent. The foreground image on the other hand won't stretch under the borders and even if it did wouldn't be transparent.

    If we remove the foreground image it still works.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        border:5px solid rgba(255, 255, 255, 0.42);
        width:290px;
        height:290px;
        position:relative;
        background: url(images/zimg5.jpg) no-repeat 50&#37; 50%;
        overflow:hidden;
    }
    img {
        display:none;
    }
    </style>
    </head>
    <body>
    <p><img src="images/zimg5.jpg" alt="Example transparent borders" width="300" height="300" /></p>
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As a final example we can use box sizing and apply the transparent borders to the image itself.

    The only thing that would need to be scripted is to supply the source of the image as a background style to the image itself.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    img {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border:5px solid rgba(255, 255, 255, 0.42);
        position:relative;
        background:url(images/zimg5.jpg) no-repeat 50&#37; -6px;
    }
    
    </style>
    </head>
    <body>
    <p><img src="images/zimg5.jpg" alt="Example transparent borders" width="300" height="300" /></p>
    </body>
    </html>
    That needs no extra mark up at all but you need to find the image path and then supply it as a background to the image itself.

    Only works in FF3+ and Opera10 though

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Using the example above we could almost achieve what you want by grabbing the img src with js and applying it to the background like this.

    http://www.pmob.co.uk/temp/transpare...-sizing-js.htm

    However the background will be a couple of pixels out although it will hardly notice. Shame it only works in FF3 and opera10 though

  10. #10
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As a final example we can use box sizing and apply the transparent borders to the image itself.

    The only thing that would need to be scripted is to supply the source of the image as a background style to the image itself.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    img {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border:5px solid rgba(255, 255, 255, 0.42);
        position:relative;
        background:url(images/zimg5.jpg) no-repeat 50% -6px;
    }
    
    </style>
    </head>
    <body>
    <p><img src="images/zimg5.jpg" alt="Example transparent borders" width="300" height="300" /></p>
    </div>
    </body>
    </html>
    That needs no extra mark up at all but you need to find the image path and then supply it as a background to the image itself.

    Only works in FF3+ and Opera10 though
    Paul, I had a question? Why is there an empty ending div tag within your markup?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Paul, I had a question? Why is there an empty ending div tag within your markup?
    So that smart alecs like you can point them out to me lol

    I'll edit the posts and remove the orphan now.

  12. #12
    &lt;!-- Insert thoughts here --&gt; pitcher17's Avatar
    Join Date
    Apr 2004
    Location
    The great white north
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also get Safari 3+ to render this too with -webkit-box-sizing added to the box-sizing properties.


    I think Chrome might understand this one too.
    The more time I save by not planning and documenting,
    the more time I have left to debug.


  13. #13
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't like proprietary browser code though, I'm already out of my comfort zone implementing an rgba border with a normal border as fall-back! Even though I'm pretty sure rgba will make it into the final CSS3 spec.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pitcher17 View Post
    You can also get Safari 3+ to render this too with -webkit-box-sizing added to the box-sizing properties.


    I think Chrome might understand this one too.
    Yes it works in chrome also using the webkit prefix

    Quote Originally Posted by Peach
    I don't like proprietary browser code though
    As long as the styles are qualified with the correct css3 then I think it's fine especially as this is only for embellishment and will not cause problems if misunderstood.

  15. #15
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    So that smart alecs like you can point them out to me lol

    I'll edit the posts and remove the orphan now.
    LOL, I'm sorry Paul for pointing out that little snippet of code out to you. I should've just let it go so I would'nt have bumped the thread.


    At first I was looking at the CSS and I was saying to myself is paul pushing the background off the empty div tag, because you had the negetive margin on the background. I had to think the code over twice.


    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/



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
  •