CSS3 Gradient Background Issue

Hi All,

We’ve started to use the CSS3 Gradient Background action and it’s great. In IE7 there seems to be an issue with the transparency no longer functioning properly after zooming in or out once. I have included an example below. Does anyone have any solutions to this?

Example: (Live Lights | 30 Years of Creativity)

Thank you for your help,

Christian


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can anyone help me with a solution?

Christian


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think you’re going to have to accept that IE < 9 is not a browser, and stop coddling it. Use these effects as “progressive enhancement” – allow them to be seen by browsers that provide native support for viewing them – and fall back to solid backgrounds or no effects for everything else.

I’ve been following this approach for about a year now, using CSS3 rounded corners, shadows, and other effects as eye candy for the progressive browsers, and square corners, no shadows, no other effects in the regular browsers.

In many ways, it’s like what I always preach about logos: start in black-and-white. If it doesn’t work there, it’s not going to work any harder in color. If you rely on the effects in place of the design, then you haven’t solved the problem.

I generally never show my clients a pixel-based rendering of the site, by the way, so if they use IE 6 or whatever, they just see the low-fi version of the layout and never know any better. Not until they get home, fire up the iPad, and see the “mobile enhanced” version of the site.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Thank you for your explanation. We were reading an article last week in regards to the same thing, progressive enhancement. For what your saying, since IE7 is a browser from the past, using PE we allow background transparence to fall back to the solid color. Still allowing the viewer to have a functioning site, just without all the design.

Christian


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Could someone please direct me to a page that explains clearly in plain English, how to make my background color a gradient (top lighter, bottom darker)? In FreewayPro please

like this guy’s site

http://www.visionsecurity.jp/

thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Exactly. The language I use in my proposals is this: “These layouts
will be coded to current W3C XHTML standards, and will include
additional code (visible only to Internet Explorer) to bring older
versions of that browser into line with the standards. No guarantee is
given that the site will appear identical in all browsers and
platforms, but it will be accessible to and usable by all visitors.”

“Accessible” and “usable” are the watchwords, “identical” is not even
attempted.

Walter

On Apr 6, 2011, at 2:52 PM, TeamSDA wrote:

Hi Walter,

Thank you for your explanation. We were reading an article last week
in regards to the same thing, progressive enhancement. For what your
saying, since IE7 is a browser from the past, using PE we allow
background transparence to fall back to the solid color. Still
allowing the viewer to have a functioning site, just without all the
design.

Christian


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Could someone please direct me to a page that explains clearly in plain English, how to make my background color a gradient (top lighter, bottom darker)? In FreewayPro please

It is done with a .jpg graphic image that is 25px wide x 800px tall in size. It tiles from left to right giving the appearance that it is one solid background. It was more than likely created in Photoshop. For the area that might be visible at the bottom beyond the 800px a dark grey color (the same as darkest grey color in graphic) is applied to the background for a seamless look.

So here are the steps:

  1. Create your gradient image in Photoshop or the equivalent and save as .jpg, and for simplicity use the same dimension mentioned above.
  2. In Freeway, with nothing selected on the page, go to Inspector pallet and under the second tab select you graphic from the “image” button and set the “Color” to the darkest grey at the bottom of your graphic. Set the Horizontal setting to tile, and the Vertical setting to Top.

That’s it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you so much for your Gradient explanation. I’m having another issue now. Not with the Gradient but with an overlaid jpg. I created it in Photoshop by multiplying an Illustrator file into a pattern of various layers & colors, to create something that looks almost like a paisley pattern. So far so good. Save it as a jpg, drop it into Freeway, everything looks lovely. But when I go to view it in the Browser, the jpg is all blurry, yet the jpg photo next to it, is still sharp & clear. What gives?
thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You should probably start a new thread Tanya and post a link to your example page.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Good idea, but I can’t post the image without it being corrupted. Not sure why…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just post a link to your web page.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options