Jump to content

Curser changes CSS3 text-shadow values

Recommended Posts

Hello, I want to realize a website attracting with a visual gimmick: Selected elements have reactive shadows based on CSS3. My idea: If you move the cursor, the elements' shadows change related to the cursor. That means the cursor works like a light or torch and live influences the text-shadow value(s). Is it possible to realize this kind of dynamic and reactive shadow with CSS3 or do I need to use both CSS3 and JavaScript? For instance, moving the cursor would change a div's text-shadow values from

div {
    text-shadow: 5px 5px 10px #000000;


div {
    text-shadow: 2px 10px 10px #000000;

. Any idea how to realize this?

Edited by Till
Link to post
Share on other sites

Goodness, no. In this case jQuery does not have some magical pre-built solution to the problem.

You need to have a mousemove event. Each time the event fires, subtract the element's position from the mouse's position. That will give you a direction vector which you can use to generate text-shadow coordinates.

There are details you need to take into account:

  • The pivot point of the element starts off at the top left corner. You probably want the pivot point to be in the middle of the element, the middle is at [x + width/2, y + width/2]
  • The vertical coordinates for text-shadow might be inverted.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...