FUDforum
Fast Uncompromising Discussions. FUDforum will get your users talking.

Home » FUDforum Development » Icons & buttons » Switching out graphics for CSS3 goodness
Show: Today's Messages :: Unread Messages :: Show Polls :: Message Navigator
| Subscribe to topic | Bookmark topic 
Switch to threaded view of this topic Create a new topic Submit Reply
Switching out graphics for CSS3 goodness [message #164588] Fri, 18 February 2011 08:25 Go to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
add to buddy list
ignore all messages by this user
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!
Message by The Witcher is ignored  [reveal message]  [reveal all messages by The Witcher]  [stop ignoring this user] Go to previous messageGo to next message
Re: Switching out graphics for CSS3 goodness [message #164599 is a reply to message #164596] Fri, 18 February 2011 10:23 Go to previous messageGo to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
add to buddy list
ignore all messages by this user
yeah, like the .CatDesc class for example. instead of background ... url ('some image') ... declaration.

instead, dropping that, and replacing with the code above, obviously not red - white though!

it'd make the forum a lot easier to theme - you wouldn't need to touch a graphics program to edit the colours of the forum for example.
Message by The Witcher is ignored  [reveal message]  [reveal all messages by The Witcher]  [stop ignoring this user] Go to previous messageGo to next message
Re: Switching out graphics for CSS3 goodness [message #164604 is a reply to message #164603] Fri, 18 February 2011 11:15 Go to previous messageGo to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
add to buddy list
ignore all messages by this user
i'll answer:
Quote:
Ok so basically all some one would need is the color codes of the color to start with and the code of the color you want it to fade towards so there would be no need to use gimp to create the gradient image (or learn another skill).

correct.

Quote:
This is another area where some plain English descriptions would help FUDforums popularity, such as defining "rgba", explaining what the various sections of the CSS modify or apply to etc.

actually, this is plain english, just perhaps not grammatically correct. setting up fudforum is not for your everyday folk, so i think using basic terminology is not needed.
css3 rgba is awesome! and allows you to define an alpha / opacity / transparency level for your colour. googling css3 will help you loads here. it's a very powerful thing to know. use the website i posted in the op to see css3 goodiness in action.

[Updated on: Fri, 18 February 2011 11:20]

Report message to a moderator

Message by The Witcher is ignored  [reveal message]  [reveal all messages by The Witcher]  [stop ignoring this user] Go to previous messageGo to next message
Re: Switching out graphics for CSS3 goodness [message #164608 is a reply to message #164606] Fri, 18 February 2011 11:56 Go to previous messageGo to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
add to buddy list
ignore all messages by this user
don't forget:

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

ok, so i can't type a fullstop properly, but hey!
Message by The Witcher is ignored  [reveal message]  [reveal all messages by The Witcher]  [stop ignoring this user] Go to previous messageGo to next message
Re: Switching out graphics for CSS3 goodness [message #164703 is a reply to message #164609] Wed, 02 March 2011 05:17 Go to previous messageGo to next message
naudefj is currently offline  naudefj   South Africa
Messages: 3723
Registered: December 2004
Karma: 26
Senior Member
Administrator
Core Developer
remove from buddy list
ignore all messages by this user
Great idea! It would be really helpful if you guys can work out the CSS gradients required to replace the images in FUDforum's themes.
Re: Switching out graphics for CSS3 goodness [message #165954 is a reply to message #164588] Fri, 02 September 2011 03:18 Go to previous message
peterscott is currently offline  peterscott   India
Messages: 2
Registered: September 2011
Location: chicago
Karma: 0
Junior Member
add to buddy list
ignore all messages by this user
Thanks for all the information. It is indeed very useful.
Quick Reply
Formatting Tools:   
  Switch to threaded view of this topic Create a new topic
Previous Topic: Lost Icons to Collapse Categories & Messages
Next Topic: The wee white arrow
Goto Forum:
  

-=] Back to Top [=-
[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Tue May 26 13:32:34 EDT 2020

Total time taken to generate the page: 0.00813 seconds