CODEWITHSUNDEEP
htmlcsscursor
user3048910
user3048910

Reputation: 11

Weird opacity/shadow on cursors?

I have a blog and I made custom cursors for it, but they're not quite looking how I'd like. Making the cursors with some free cursor editing program, they look like there's only one colour and there's no border or black colour or shadows. Even after uploading them in picture form, the online .png files look like they have no shadows. However, after putting them into my CSS, they get the weird shadow.

You can see it here (this is my actual blog): http://w-lfsbane.tumblr.com

On file, they have no blackness to them. Here are some image files of them: http://cdn.imghack.se/images/4463ff5672730107236e382dabde56bf.png (can't post the other link cuz I don't have the reputation points :P) though I have them actually uploaded in cur files on a server (both the .cur and the .png files posted above get the effect).

I just have this in the style portion of my html:

a:link {color:#00ffa3; cursor: url('http://manofsnow.site11.com/rAD.cur')}
a:visited {color:#00ffa3; cursor: url(http://manofsnow.site11.com/rAD.cur)}
a:hover {color:#00ffa3; cursor: url("http://manofsnow.site11.com/rAD.cur")}
a:active {color:#ff99ff; cursor: url(http://manofsnow.site11.com/rAD.cur)}
body {cursor: url('http://cdn.imghack.se/images/4463ff5672730107236e382dabde56bf.png')}

Neither the cur files nor the png files keep their colour well.

How can I fix this?

Upvotes: 1

Views: 633

Answers (1)

Omer Tuchfeld
Omer Tuchfeld

Reputation: 3022

Next time please warn that your link contains nudity, some people view links on this website with people around them.

You can use PNG files as cursors, no need to convert to cur.

Your file doesn't contain only one color, as you can see in this image: Enlarged cursor

The edges of the circle, the mouth and the "SAD" all contain semi-transparent greens. These edges appear kinda gray when this image is used as a cursor, I'm not exactly sure why.

You can try to create a version of this image without the transparent edges using GIMP or Photoshop, but the semi transparent edges make it look much smoother, so a version without them will look aliased.

I tried to create one, if you want you can use it, but it's not perfect so your should try to mess around with it: Aliased cursor

Upvotes: 1

Related Questions