1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to dynamically change color based on background?

Discussion in 'CSS' started by Ramboobmar, Sep 13, 2016.

  1. #1
    Hi guys, I reckon the title reveals a lot about my question already.

    I'm having trouble with this problem and I don't know how to solve it. Basically I have a 300x300px blue circle that follows the cursor where ever it goes. Now the colors are not a problem if the circle is on, let's say a white background but when I move my cursor onto a background with the same colour as the circle the circle blends in obviously. Is there a way to change the color of the circle when it's on a background with a specific color?
    SEMrush
    Here's my pen: http://codepen.io/bayron2304/pen/VKvOoZ

    Thanks for any help! :)
     
    Ramboobmar, Sep 13, 2016 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,341
    Likes Received:
    1,834
    Best Answers:
    244
    Trophy Points:
    515
    #2
    Generally speaking, no... You're not using system cursors so inverse colour is unavailable -- but really welcome to why mouse controlled cursors are rarely if ever monochromatic. Take the normal windows pointers? Are they solid white? Are they solid black? No, they're a black outline around white that you can add an optional drop-shadow to.

    Solution then? don't us a single colour cursor. Give it a border or drop-shadow that is it's luminance opposite.
     
    deathshadow, Sep 13, 2016 IP
  3. karjen

    karjen Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #3
    This is quite challenging, as this is my first time someone wants to this this, but I like challenges so I will give this a try.
     
    karjen, Sep 17, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,410
    Likes Received:
    1,369
    Best Answers:
    24
    Trophy Points:
    400
    #4
    The easiest solution would be adding a white border around the blue circle and making it go over the blue background using z-index:

    https://jsfiddle.net/gcpq7x2w/1/
     
    qwikad.com, Sep 17, 2016 IP