Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Achieve semi transparent design

    Hello,

    I am an amateur web designer and wish to create a part transparent design.
    This is what it should look like:


    As you can see the background is black, with a white border. Outside that white border is a semi-transparent border.

    Now, I know for images you can use the alpha opacity style code, but I am not sure how to apply that to a border.

    So, I thought so just applying it to an image and using the image as a border, but am unsure as how to achieve this.

    Would anyone be able to provide me with the code to do this as well as explaining how you achieved it? Like a step by step guide.

    Thank you,
    Regards,
    Grant

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    There's no CSS/HTML trick for making things transparent. You would therefore have to use semi transparent PNGs for this. Which you need a special code to get working for IE browsers. There's plenty of posts in this forum to show you how to do that.
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Grantmitch1,
    I've never messed with opacity but this page might have something you can use - http://www.mandarindesign.com/opacity.html
    http://www.w3schools.com/Css/css_image_transparency.asp

    If you end up going with the .png image instead, here are some of the fixes to get that working in IE6 - http://www.google.com/search?hl=en&q=ie6+png
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by Grantmitch1 View Post
    Hello,

    I am an amateur web designer and wish to create a part transparent design.
    This is what it should look like:


    As you can see the background is black, with a white border. Outside that white border is a semi-transparent border.

    Now, I know for images you can use the alpha opacity style code, but I am not sure how to apply that to a border.

    So, I thought so just applying it to an image and using the image as a border, but am unsure as how to achieve this.

    Would anyone be able to provide me with the code to do this as well as explaining how you achieved it? Like a step by step guide.

    Thank you,
    Regards,
    Grant
    You can use firefox.
    Here's a lazy version using linecap round and setting a wide line with the opacity set at .1 then drawing a slightly thinner line. Rounded rectangle script is better though.

    The images are live so save it and open with IE to see the image and then open with firefox and see both the canvas output and the image which was saved.

    Here's a screen cap

    Code:
    <html>
      <head>
        <title>A canvas lineCap example</title>
        <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
        <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
    <script type="application/x-javascript">
         
     function draw() {
     var ctx = document.getElementById('canvas').getContext('2d');
           ctx.strokeStyle = "rgba( 0, 0,0,.08)";
              ctx.lineWidth = 400;/*Line widthSeth to witdh you want*/
              ctx.lineCap = 'round';/*set to round first array pos is lineCap[0]*/
              ctx.beginPath();
              ctx.moveTo(200,200);
              ctx.lineTo(200,350);
              ctx.stroke();
    ctx.strokeStyle = "rgba( 0, 0,0,1)";
              ctx.lineWidth = 350;/*Line widthSeth to witdh you want*/
              ctx.lineCap = 'round';/*set to round first array pos is lineCap[0]*/
              ctx.beginPath();
              ctx.moveTo(200,200);
              ctx.lineTo(200,350);
    
              ctx.stroke();
    }
         </script>
       
      </head>
    
      <body onload="draw();" style="background-image:url(http://www.harvardbsa.com/web/files/imagepicker/s/Sarah%20Anoke/obama.jpg)">
     <canvas id="canvas" width="400" height="550"></canvas>
    <img src="http://i43.tinypic.com/2dc98xu.png"><br>
    The image on the right is saved from from the firefox browser output.<br>
    Save the output in firefox by using right click<br>... save as.. give it a name and a<br> file location and you're done.<br>play with the colors or use gradients. 
    It's not possible to draw the outer border using this method.<br>
     A rounded rectangle script to set the path<br> and then stroke the black color is needed. <br> An example to do this exists at the Mozilla dev center
    
    Works is IE. I don't know about IE6 or <br>whatever the browser everyone worries about. <br>Firefox is my first choice of browser.
    src http://i43.tinypic.com/2dc98xu.png
    </body>
    </html>

    Here's a rounded rectangle script I've set up with gradient colors.
    http://h1.ripway.com/stirfry/javascr...RectTest1.html
    It's derived from the MDC tutorial script named complex canvas drawing.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You mentioned using images.
    What I could do is rather than using semi-transparency in my original post, I could make the semi transparent border a PNG, but could place the page background underneath it.

    In other words, it would work in IE6 as there would be no issue with the transparency, but then this would require me to make a site out of images, which I have not done before.

    Any ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •