Make borders on .gif go away PLEASE.

[Kandi]

This nav bar has a .gif as its background to create the fading light bulb effect.

http://kandianne.com/kreations.html

Is there a way I can eliminate the light border of the .gif to make it look smoother and not have those light lines that look like a grid.
Or maybe any suggestions how to make this same effect a different way?

Gracias

[Paulie_D]

To start with, please don’t use tables for layout…there are much better and flexible ways to layout pages.

As for the ‘grid’….I’m not seeing it in Chrome….unless I’m, missing something.

Also, using <br> tags for positioning is not a good idea…use margins/padding instead.

[Paulie_D]

Alternatively, don’t use a .gif at all: http://codepen.io/Paulie-D/pen/KGmJh/

[Kandi]

Thanks Paulie. I will remove <br> and tables, and replace with better alternatives.

I am using Chrome as well, and as the reddish colors fade in and out there is a light border on each that appears on each little gif that makes it look like grid as it fades in and out.

Do you see what I mean?

[Kandi]

you are awesome! Thank you so much :)

[Paulie_D]

I am using Chrome as well, and as the reddish colors fade in and out there is a light border on each that appears on each little gif that makes it look like grid as it fades in and out.

Do you see what I mean?

I had to zoom in a lot to see it but, eventually, yes. On my normal desktop at usual zoom level, I couldn’t see it.

I suspect that ‘effect’ is a function of the gif not being perfectly aligned to the pixel grid in the imaging program.

[Kandi]

For the alternative you provided, it only works in Chrome right?

[Paulie_D]

No…I just haven’t used the other vendor prefixes for it to work in other browsers

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

[Author]

Posts