Viewing Transparentcy

Transparentcy



User: Guest 11 years ago
In PhotoShop I created a black box set to 50% transparency. In iWeb it shows up dark but, in EasyWeb it shows up a more light grey. I also created a black box in EasyWeb with the same 50% transparency that show up like it should. But, my fear is in Internet Exploder (Explorer) transparent boxes made in iWeb didn't display properly.

Screen Shot 2013-02-28 at 8.23.27 AM.png
Edit
User: Guest 11 years ago
Here is an example of the transparency issue in internet explorer when using iWeb:

IMG_0171.JPG
Edit Set As Best Answer
User: Roddy 11 years ago
I questioned the method of instigating images in another topic and suggested a feature where image enhancements - such as transparency - could be added using CSS. Basically, one line of code would replace a transparent overlay which only contributes to sucking the stuffing out your page download speed.

Using images for shapes, overlays, drop shadows, navigation menus etc is not only bad practice but completely unnecessary now that they can be replaced by CSS. I hope Rage are looking to the future in this respect and not languishing in the past like the other D ... D developers!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
Set As Best Answer
User: Paul-RAGESW 11 years ago
The original problem is with transparent PNG's not being supported in Internet Explorer. There is a java script solution we can use that makes them work properly and we can use conditional java script to make sure it only loads for older versions of IE.

It's on our list of things to do for the first version.

As for using CSS for things like shadows and opacity, we currently do that for text. Our ultimate goal is to use all the new CSS features while being able to provide alternatives (such as transparent images) for older browsers like IE. Remember though that most modern features are not implemented in IE up to version 8 with some not even supported in IE 9. We still need to support these versions of IE as users will expect that their websites work in them.

Even now EasyWeb contains some very good optimizations and only uses images when necessary. We use background colors when we can (when opacity and rotation is not specified).

We will continue to improve the HTML output which already is MUCH more advanced than many other products. We use semantic HTML 5 markup which no one is currently doing and is the direction HTML is moving too.

-------------------------------
Paul
EverWeb Developer
Set As Best Answer
User: Guest 11 years ago
PNG's work what ever iWeb kicked out didn't
Edit Set As Best Answer
User: Paul-RAGESW 11 years ago
Transparent PNG's don't work in early versions of IE. I believe IE 6 and 7, possibly 8.

If a PNG does not use transparency it will work fine in IE.

-------------------------------
Paul
EverWeb Developer
Set As Best Answer
User: Guest 11 years ago
I typically create PNG's in photoshop w/transparency
Edit Set As Best Answer
User: Roddy 11 years ago
I take it that you are referring to creating an overlay image rather than using opacity on the actual image?

Overlay images are not a good idea at all for obvious reasons. The same effect can easily be created using CSS.

In web design, transparency is actually expressed as opacity. Here's a rough example of an image overlay...

http://ezmacwebdesign.com/Demo/image-opacity/

The size of the overlay and its position can be changed if full coverage is not required and captioning added if needed.

The developers appear to have a way to insert an image as a div background so it should be possible to drop a div like this over an actual image using some kind of widget.

I have used this in the code for the opacity setting...

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: 0.4;

... so you may find that its OK in IE.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
Set As Best Answer


Post Reply
You must login or signup to post.