Let's say you have a triagle with a shadow around one of its angled sides. In this case, the shadow can't be generated via CSS so it has to be a part of the image. Now let's say that with javascript you can move the image around anywhere on the page and that the background contains different colors. How would you set the up the shadow so that it always remains transparent so that it blends in with different background colors?
![[H]ard|Forum](/styles/hardforum/xenforo/logo_dark.png){kind=logo}
-
Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.
image transparency
- Thread starter fender
- Start date
Scotty_SFF
Gawd
- Joined
- Jun 2, 2006
- Messages
- 590
i thought PNG held transparency, perhaps some settings need to be changed. maybe try a GIF?
HaMMerHeD
[H]F Junkie
- Joined
- Jul 13, 2004
- Messages
- 10,397
CSS can do it just fine with a filter. The only problem is that Mozilla doesn't support it.
I made a .GIF with a triangle in the middle, and the rest transparent. The following HTML produced a shadow around the triangle, not around the square borders of the image:
Color affects the color of the cast shadow. Strength affects how "deep" the shadow appears. Direction is the angle the shadow is cast, 0 degrees being up.
(PNG transparency doesnt work properly in IE, but does in Mozilla)
I made a .GIF with a triangle in the middle, and the rest transparent. The following HTML produced a shadow around the triangle, not around the square borders of the image:
Code:
<img style="filter:shadow(color: gray, strength: 10, direction: 135);" src="tri.gif" />Color affects the color of the cast shadow. Strength affects how "deep" the shadow appears. Direction is the angle the shadow is cast, 0 degrees being up.
(PNG transparency doesnt work properly in IE, but does in Mozilla)
I tried the above and I couldn't get it to work, plus I'd need it to work in mozilla as welll. I don't just need to have a transparent background, I need to have the shadow transparent as well. Basically, I want to have one image that will look like this:
on a white background, and look like this:
on a black background.
on a white background, and look like this:
on a black background.
So you need a png image with an alpha channel which "fades out" into the background. How to accomplish this in something like GIMP or Photoshop isn't anything I can help you with, and is probably something for another forum. Generally how it works is that you create an alpha channel and paint in 'grayscale' in it, where black ("0") or white ("255") is either fully transparent or fully opaque. By creating a gradient you will achieve the intended effect of the image 'fading out into' the background.
However, it's well known that Microsoft doesn't support png alpha, so you're fucked unless you want to special case either "IE" or "Everything but IE". The Standard Way is a png image with alpha. All else are ugly hacks.
Just an edit: Contrary to a post above, you can't do this with GIF because GIF doesn't have 8-bit (or even 2-bit) alpha.
However, it's well known that Microsoft doesn't support png alpha, so you're fucked unless you want to special case either "IE" or "Everything but IE". The Standard Way is a png image with alpha. All else are ugly hacks.
Just an edit: Contrary to a post above, you can't do this with GIF because GIF doesn't have 8-bit (or even 2-bit) alpha.