I have a website with some text on the body and a fixed menu bar on top.
I want the text to 'fade-out' as you scroll, instead of disappearing behind other element.
My website's background is grey, so II made a gradient that goes from grey to transparent.
It works great, except that you can sort of tell that there's a grey band across the website.
Notice the band (starting right above the red arrow) on this screen I printed
Why does irt show an off color?
I know about PNG gamma correction, but this is not it, I have removed the gAMA part, I have also tried "fine-tuning" it, nothing will work. (I know I am doing this right because I tried it on a solid PNG, stripped the gamma data, and it perfectly matches the CSS background).
Any ideas on how I can achieve this?! (I can use any other method, doesn't need to be a PNG gradient, but I do need it to be a fade-out).
Make a gradient from opaque gray to transparent white.
Related
I have Gray SVG icons next to each Menu item (inherited from another project) and displaied as background.
I need to show them black or white but I don't how to achieve this.
As backgrounds I can't use fill css property. I tried with filter:brightness(100) to make them white but I loose anti-aliasing (and analogue with filter:brightness(0) to make them black).
Mask has still serious compatibility issues (e.g. Firefox does not allow external svg).
I tried also to import them as data-uri with LESS feature, but it was unuseful, so.... any suggestion?
I got a RGB332 LCD and a poor MCU to drive it . The MCU do not have a hardware accelerator nor do RGB332 display support an alpha path.
So I used the color "black" as a "alpha color" to deal with icon paste work.Which means I fill the icon color data to background buffer while the data is not black.
The problem I meet is that the icon showed it's own antialiased edge while the background is not black. And the "antialiased edge" just makes an edge effect from the background.
Is there any way to deal with the situation ?
The main problem is that I don't have "Layer" and "Alpha" to do the PS-like merge work.
But the Icons are Pasted to a Frame buffer one by one.
So my solution is :
When each icon is being pasted,I could decide the front/background,
which means I could detect the "antialiased edge" of the icons just
like I have "layers".
After I find the antialiased edges ,I filled the pixels with the
middle color of the front/background.
The LCD is RGB332,and the middle color calculation is just filling
the edge with 75% background color + 25% front color. If the icon
color is carefully designed, you don't even need a float calculation
.
The work maybe not that effective ,but really solved my problem.
My Website iascoachingindia.in have some coloured boxes with white text on, however background colour is dark and clearly visible to human eye, but I felt Google proffered text which is black in text with white background.
Please anybody have some experienced in the same??
Google can crawl and index all the fonts and color, but the most important thing is to avoid make it spammy by adding the same font color with the same background color.
Also if its with the same color, still Google can access them and index them but you will get a penalty.
I was trying to use a coloured texture (PNG 24/RGB) for a POI (bicycle_parking) and it was not being rendered. It was added properly as a texture, it just won't be rendered on the POI.
After some testing I came to believe that POIs only accept grayscale textures that can later be filled up with a color. Is this right?
I also found out that the icon needs to be of a specific size (I got it working only at 32x32 pixels and 512x512, but the scaling did not make it look good). Is there any information regarding this?
Now I have a grayscale icon (mostly white) but the fill color does not change the white as expected. This is as far as I got..
Here's a set of icons similar to the ones I need to render into POIs
How could I achieve adding this type of icons as the texture of a POI? Workarounds/hacks are welcome as well :)
Thanks!
The texture of the Poi must have a size that is a power of 2 and goes from 32x32 up until 512x512. Also make sure that the colour code of that image is RGB anything else wont work. For the best visual result you have to create 3 sets of pngs for different screen densities, for example see heatmap_legend.png then look at heatmap_legend#2x.png and heatmap_legend#3x.png, you can find them in the "common" folder.
So turns out that the color wasn't a problem after all. It was quite tricky to get one image working, but once I had the image working, adding color to it and saving the PNG worked just fine.
The problem with the image size I experienced is still happening. You need to export it in 32x32, 64x64 or 96x96 in order to StyleEditor not to crash when opening the file.
I'm pretty new to Fireworks. I drew an orange rectangle and made it semi-transparent. My web page has a patterned background which I'd like to be able to see through my div, but I can't change the opacity of the div in CSS as the div contains other divs that also become transparent using this CSS when I don't want them to!
I've tried loads of things I found on Google but to no avail. Can anyone help?
If you want to know how to export the semi-transparent rectangle from Fireworks so it stays that way, just make sure your canvas color is set to none (the box with a red diagonal line through it) and then export it as a PNG-32.
I'm not sure I understood what you mean by DIVs becoming transparent when using CSS. Can you elaborate on that a bit?