effects to a radial gradient

Posted on 2012-08-22
Medium Priority
Last Modified: 2012-08-26
I have created this radial gradient in my CSS:
      min-height: 100%;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#6600ff00', GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
      background: -moz-radial-gradient(180px 180px, circle closest-corner, rgba(0,0,0,0) 2%, rgba(0,255,0,.2) 50%, rgba(0,255,0,.3) 70%, rgba(0,255,0,.4) 100%); /* FF3.6+ */
      background: -webkit-radial-gradient(180px 180px, circle closest-corner, rgba(0,0,0,0) 2%,rgba(0,255,0,.2) 50%,rgba(0,255,0,.3) 70%,rgba(0,255,0,.4) 100%); /* Chrome10+,Safari5.1+ */

It works in Chrome & Firefox, Not in IE (which is ok. i am fine with the above)

If you actually see this, it appears as a sun in the top left corner of the screen, and the rest of the screen is a light green.

Now I want to add a new effect (using javascript or whatever else is possible):

I want this sun to appear at bottom left, and rise slowly to the top. A linear rise is ok, but if you can do a parabolic rise, i would be overjoyed.

Question by:RTKHOT
  • 2
LVL 25

Accepted Solution

Kyle Hamilton earned 2000 total points
ID: 38325051
Put the sun in a separate div, and place it at the bottom of the page. Then animate the y position exponentially.


view source for the script
(you should of course adjust your gradient to your liking)

Author Comment

ID: 38325161
thanks. i will check it out tomorrow and award the points.

appreciate the early reply
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38326244

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question