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 
Return to the default flat view Create a new topic Submit Reply
Switching out graphics for CSS3 goodness [message #164588] Fri, 18 February 2011 08:25 Go to previous message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma:
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 index]
 
Read Message
Read Message
Read Message
Read Message
Read Message
Read Message
Read Message
Read Message
Read Message
Read Message
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: Sat Oct 21 22:51:48 EDT 2017

Total time taken to generate the page: 0.00672 seconds