How to Make Sparkle Effects With CSS

Save

With an animated Graphics Interchange Format file and Cascading Style Sheets, you have the opportunity to make sparkle effects on your Web page. The GIF contains digital, moving glitter and the CSS assigns the decoration to page elements. For instance, you can apply the sparkles to hyperlinks or display a lively background on your website. Use an animated GIF file and your computer's text-editor program to make sparkle effects where you prefer.

  • Log in to your Web host account and upload your animated GIF file to the same folder or directory where your other website files reside. Make a note of the URL file address after the upload -- for example, http://www.yoursite.com/images/sparkle.gif. If you do not have a host account, point your browser to a free online file host, such as File Dropper or Data File Host, follow the prompts to upload the sparkle GIF and record the URL after the process is complete.

  • Launch your text-editor program and open the website document where you want to make sparkle effects. Position your cursor before the ending </head> element at the top and type the following CSS code:
    <style type="text/css">

    </style>

  • Enter an HTML element between the style tags to determine where you apply the glitter animation on your page. For instance, type "a" for links, "p" for paragraphs or "body" for the whole page. Enter a pair of curly brackets after your entry like so:
    <style type="text/css">
    body { }
    </style>

  • Type "background-image: url('URL File Address');" between the curly brackets and replace the "URL File Address" entry with the address of your animated GIF file. To illustrate:
    body { background-image: url('http://www.yoursite.com/images/sparkle.gif'); }

  • Save your file and preview it in a browser. When ready, upload your document to the Web host to publish the sparkle effects.

Tips & Warnings

  • You can create free sparkle images on animated GIF maker websites such as Glitterizer, Webestools and Glitterboo. Follow the prompts on the site to create a picture and download the animated GIF to your computer.

Related Searches

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!