...

View Full Version : Achieve semi transparent design



Grantmitch1
04-13-2009, 12:35 AM
Hello,

I am an amateur web designer and wish to create a part transparent design.
This is what it should look like:
http://img6.imageshack.us/img6/2010/26395665.png

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

timgolding
04-13-2009, 02:50 AM
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.

Excavator
04-13-2009, 06:49 AM
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

TinyScript
04-13-2009, 08:23 AM
Hello,

I am an amateur web designer and wish to create a part transparent design.
This is what it should look like:
http://img6.imageshack.us/img6/2010/26395665.png

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
http://i42.tinypic.com/2i205uh.jpg


<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/javascript/tests/canvas/templates/newCanvasRoundedRectTest1.html
It's derived from the MDC tutorial script named complex canvas drawing.

Grantmitch1
04-13-2009, 05:27 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum