Apache OpenOffice (AOO) Bugzilla – Issue 69438
Button shadows should use alpha transparency
Last modified: 2017-05-20 09:04:58 UTC
The web buttons should use PNG alpha transparency so that they look good on sites with background colors other than white. I'd do it myself, but when I tried to create the drop shadow in the GIMP, the Gaussian Blur was grayed out…
Thanks for your proposal - it's a good idea to have the background shining through the shadows. And if you would be able to modify the buttons, this would be even better. I don't know the application Nicu used to create the buttons, so I added him to the CC area to help you with informations about how to modifiy them. Perhaps he could provide some source files. If you would be able to help us more, please join us at the Art Project's mailing list: art@marketing.openoffice.org
I used Inkscape to create my buttons and source is available in SVG format (ask for it). However, I do NOT think is a good idea to use alpha transparency, unfortunately the most browser on the web is still Internet Explorer 6 and it does not support alpha transparency. In fact, this is why I made the buttons with ugly contours: converted them to indexed PNG, removing antialiasing on the edges, but have a result looking the same on every browser (a secondary reason was the file size in indexed PNG is smaller and this is important for buttons placed on high traffic sites - indexed means no alpha transparency).
@nicu: Thanks for your explanations. Is there a chance to use alpha transparency in GIF images? IIRC transparent GIFs are supported by IE. Wulf, do you want to work with the Inkscape SVGs? Best regards Bernhard
Aplha transparency is possible only for true color images, so only for PNG using truecolor. Indexed images, like GIF or PNG with 256 colors, have only solid transparency. solid transparency = one color from the palette is assigned to transparency, a pixel can be either transparent or opaque alpha transparency = the image have one additional channel, is represented as RGBA (RGB + Alpha), so it has the possibility of 256 degrees of transparecny (at least for PNG)
Created attachment 40207 [details] Testcase for serving IE a downgraded image. Created by myself, licensed under GFDL.
Sorry it's taken so long for me to reply, I was away from home for awhile and my laptop is currently "out of commission". In response to Nicu's comment that IE6 is the most common browser, at seems that within a month IE7 (which supports alpha transparency) will be the most common browser (as it is being pushed as a critical update via Automatic Update), followed by Firefox (which also supports alpha transparency). Also, it would at least be helpful to have separate versions with alpha transparency so web devs can use user-agent sniffing (such as the easy example I just attached) to serve IE the old version, but still give better browsers the version with alpha transparency.
Note: For the testcase to work, you'll have to place two images in the same directory as the file, one named ooo-button.png, the other named ooo-button-ie.png.
Created attachment 40209 [details] Here are the sources in vector format (SVG) for all my buttons. To whatever you want with alpha transparency on them.
I tested my method out on 180x60_3.svg (which is the equivalent of 180x60_3_get.png) and it seems to work well. IMHO, it looks better on white backgrounds too, because the edge is smoother. :) I'll upload it as well as a new version of my testcase as soon as I'm done posting this. If somebody will post them, I'll work on the rest as well. I know the shadow is a bit lighter in my version, but I can change that if necessary. The "GET" is also a bit lower, but I'm not sure how that happened (IMHO, I don't think it makes much of a difference though).
Created attachment 40279 [details] Transparent version of 180x60_3_get.png.
Created attachment 40280 [details] New version of IE downgraded image testcase.
SBA: Set Prio to P3. Pls. see http://www.openoffice.org/scdocs/ddIssues_EnterModify.html#priority
Put floeff on c/c. SBA->Floeff: Please comment, thx.
Adding jpmcc
floeff->jpmcc: We could add the SVGs and transparent images as addition to our gallery, without replacing the original images. Agreed?
I think it might be best to have separate pages for each format. The gallery is a bit long as it is. But yeah, having all the versions available seems like the best idea for now. I'm currently working on converting the SVGs to use transparency and exporting them as PNGs, but I'm having some problems getting the text to look right on the ones that say anything other than "GET". Any chance you have sources for those, nicu? BTW: Should we be using SVG, SVGZ, or both?
If someone wants to work on the gallery, I'm happy to accept proposals for a new page design. ;-) On the formats I can't say much, I'm no graphics expert. :-(
sources of the OOo buttons by Nicu attached here as well as the transparent background buttons by Wulf - Issue is started, but still not included in the galleries. To be done while creating the new galleries at the wiki (http://wiki.services.openoffice.org/wiki/Art/Gallery)
obsolete