Switching out graphics for CSS3 goodness [message #164588] |
Fri, 18 February 2011 13:25 |
Bradley
Messages: 41 Registered: February 2011
Karma: 0
|
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!
|
|
|
Re: Switching out graphics for CSS3 goodness [message #164596 is a reply to message #164588] |
Fri, 18 February 2011 14:27 |
The Witcher
Messages: 675 Registered: May 2009 Location: USA
Karma: 3
|
Senior Member |
|
|
It would help if you dumbed down your posts so people like me could understand them better?
If I understand correctly you are referring to replacing the current background in the forums CSS with the code above...Is that correct?
"I'm a Witcher, I solve human problems; not always using a sword!"
|
|
|
Re: Switching out graphics for CSS3 goodness [message #164599 is a reply to message #164596] |
Fri, 18 February 2011 15:23 |
Bradley
Messages: 41 Registered: February 2011
Karma: 0
|
Member |
|
|
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.
|
|
|
Re: Switching out graphics for CSS3 goodness [message #164603 is a reply to message #164599] |
Fri, 18 February 2011 16:04 |
The Witcher
Messages: 675 Registered: May 2009 Location: USA
Karma: 3
|
Senior Member |
|
|
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).
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.
"I'm a Witcher, I solve human problems; not always using a sword!"
|
|
|
Re: Switching out graphics for CSS3 goodness [message #164604 is a reply to message #164603] |
Fri, 18 February 2011 16:15 |
Bradley
Messages: 41 Registered: February 2011
Karma: 0
|
Member |
|
|
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 16:20] Report message to a moderator
|
|
|
Re: Switching out graphics for CSS3 goodness [message #164606 is a reply to message #164604] |
Fri, 18 February 2011 16:49 |
The Witcher
Messages: 675 Registered: May 2009 Location: USA
Karma: 3
|
Senior Member |
|
|
I understand, unfortunately what you, naudefj, Ernesto or I consider plain English is way over the head of many potential FUDforum users/Admins. (much of what you all post is over my head).
I agree that FUDforum is not for your average everyday folks.... Which is part of the problem, if we can make it more understandable to everyday computer users we will have accomplished a lot. I'm sure its impossible to make it idiot proof but the more we try the more we will succeed.
Quote:use the website i posted in the op to see css3 goodiness in action.
I see no link in the "OP' (original Post):
Bradley wrote on Fri, 18 February 2011 07:25In 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!
"I'm a Witcher, I solve human problems; not always using a sword!"
|
|
|
|
Re: Switching out graphics for CSS3 goodness [message #164609 is a reply to message #164608] |
Fri, 18 February 2011 18:04 |
The Witcher
Messages: 675 Registered: May 2009 Location: USA
Karma: 3
|
Senior Member |
|
|
Ooops guess I was thinking literally and expecting a "link" not a partial url.... Me bad.
But then I never heard of a link being referred to as a 'fullstop either.
"I'm a Witcher, I solve human problems; not always using a sword!"
|
|
|
|
|