CODEWITHSUNDEEP
javascriptjquerycss
RozzA
RozzA

Reputation: 609

prevent radial-gradient from changing shape & size

I am trying to make a css3/js eyeball. It looks at your mouse pointer.

As can be seen here, it sort-of works http://jsfiddle.net/fsg3he2u/ (mouse into the preview box)

My main problem lies in the drawing of the radial-gradient.

radial-gradient(at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888) draws the gradient and allows movement, but the shape and size changes upon movement. Upon some searching I discovered circle attribute: radial-gradient(circle at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888) draws the gradient and allows movement, restricts the shape, but the size changes upon movement.

How can I prevent the size from changing? (I assume it's another attribute)

Edit: this looks pretty complete http://jsfiddle.net/fsg3he2u/23/ makes single or multiple eyes of any size (all same size)

Edit 2: I decided to continue extending this for multiple sizes and custom colours - http://jsfiddle.net/fsg3he2u/25/

Upvotes: 2

Views: 78

Answers (2)

Jon Edwards
Jon Edwards

Reputation: 175

I tried this in the fiddle and it worked well; just add a fixed size after your shape (150px looks pretty nice IMO).

 $("#eyeballer").css('background','radial-gradient(circle 150px at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888)');
    //var perXY = "( " + perX + ", " + perY + " )";
    //$("span:first").text("( perX, perY ) - " + perXY);
});

Upvotes: 1

Rajkumar Madhuram
Rajkumar Madhuram

Reputation: 684

Instead of using percentages, use absolute values for gradient distances: http://jsfiddle.net/tsr2b9jh/

$("#eyeballer").css('background','radial-gradient(circle at '+perX+'% '+perY+'%, #000 50px, #469B98 55px, #3083B7 80px, #306BB7 90px, #FFF 100px, #DE8888 120px)');

Upvotes: 0

Related Questions