FUDforum: Icons & buttons » Switching out graphics for CSS3 goodness

Home » FUDforum Development » Icons & buttons » Switching out graphics for CSS3 goodness

Show: Today's Messages :: Polls :: Message Navigator

Switching out graphics for CSS3 goodness [message #164588]

Fri, 18 February 2011 13:25

Bradley
Messages: 41
Registered: February 2011

Karma:

Member

In a theme I'm working on, I've replaced the background graphics for the forum table headers with css3 gradients. Most (if not all) modern browsers support them - even mobile browsers), and if they don't, a solid block of colour will be shown instead, so it's backwards compatible. the code? simple!

from www,css3please.com where the gradient is red at the top, and white at the bottom:

background-color: #ff0000;
  background-image: -moz-linear-gradient(top, #ff0000, #ffffff); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(1, #ffffff)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(#ff0000, #ffffff); /* Chrome 10+, Saf6 */
  background-image: linear-gradient(top, #ff0000, #ffffff);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff0000', EndColorStr='#ffffff'); /* IE6IE9 */

if you want to be really fancy, you could use rgba to define an alpha of the gradient!

using css3 gradients is a lot faster, and doesn't need to pull the images!

Report message to a moderator

[Message index]

		Switching out graphics for CSS3 goodness By: Bradley on Fri, 18 February 2011 13:25
		Re: Switching out graphics for CSS3 goodness By: The Witcher on Fri, 18 February 2011 14:27
		Re: Switching out graphics for CSS3 goodness By: Bradley on Fri, 18 February 2011 15:23
		Re: Switching out graphics for CSS3 goodness By: The Witcher on Fri, 18 February 2011 16:04
		Re: Switching out graphics for CSS3 goodness By: Bradley on Fri, 18 February 2011 16:15
		Re: Switching out graphics for CSS3 goodness By: The Witcher on Fri, 18 February 2011 16:49
		Re: Switching out graphics for CSS3 goodness By: Bradley on Fri, 18 February 2011 16:56
		Re: Switching out graphics for CSS3 goodness By: The Witcher on Fri, 18 February 2011 18:04
		Re: Switching out graphics for CSS3 goodness By: naudefj on Wed, 02 March 2011 10:17
		Re: Switching out graphics for CSS3 goodness By: peterscott on Fri, 02 September 2011 07:18

Previous Topic:	Lost Icons to Collapse Categories & Messages
Next Topic:	The wee white arrow

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Tue Apr 08 15:04:51 GMT 2025

Total time taken to generate the page: 0.03302 seconds