Cascading Style Sheets (CSS) allow you to apply a wide variety of visual effects to the elements in your Web page. You can assign them background colours, fix a height and width for them, alter their position relative to other elements in the page and much more. The newest iteration of the CSS language, CSS3, supports a property by which you can add a colour gradient to the background or foreground of an element, creating a glossy effect that gives it more depth than that of a simple solid colour.
- Skill level:
- Moderately Easy
Other People Are Reading
Open the Web page containing the element to which you wish to add a glossy effect in your preferred text editor.
Add the following code to the tag of the element to which you wish to add a glossy effect:
style="background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9))); background-image:-moz-linear-gradient(top,bottom,from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));"
Change the red, green, blue and alpha (RGBA) transparency values in RGBA operators in both the "to" and "from" elements of the gradient in both style declarations to your liking.
Save and publish your Web page. Your specified element will now have a glossy shine in all Web browsers with CSS3 support.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for