|
Draft: Getting the most out of CSS Headers (and more) in BugGuide
First of all, CSS stands for Cascading Style Sheets, a language used to style HTML elements.
The only type of CSS allowed in Bugguide messages is inline styling, styling within the HTML style attribute.
To learn more about this please see w3schools.com.
I will only cover a few very neat ways to enhance your messages here at BugGuide.
Creating Stunning Headers
To create headers such as above copy this code:
<span style="display:block;padding:5px;-moz-box-shadow: 2px 2px 10px #000000;-webkit-box-shadow: 2px 2px 10px #000000;-moz-border-radius:10px;-webkit-border-radius:10px;background:#c0c0c0;background:-moz-linear-gradient(top, #efecde, #c9c5ae);background:-webkit-gradient(linear, left top, left bottom, from(#efecde), to(#c9c5ae));font-weight:bold;font-size:20px;border:1px outset #e5dcb2;text-shadow:0px 1px 0px white;font-family:trebuchet ms, verdana, sans-serif">PLACE YOUR TEXT HERE!</span>
To create a code container like above use this code:
<span style="display:block;padding:5px;-moz-box-shadow: 2px 2px 10px #000000;-webkit-box-shadow: 2px 2px 10px #000000;-moz-border-radius:10px;-webkit-border-radius:10px;background:#c0c0c0;background:-moz-linear-gradient(top, #efecde, #c9c5ae);background:-webkit-gradient(linear, left top, left bottom, from(#efecde), to(#c9c5ae));font-weight:bold;border:1px outset #e5dcb2;text-shadow:0px 1px 0px white;font-family:monospace">PLACE YOUR TEXT HERE!</span>
For all of these 3d boxes, they will only look correct if you are using Safari, Firefox (a new version), or Google Chrome. Here is an image of what you will see if you use either of those 3 browsers:
This code was originally from my Insects gallery and my Forum.
Not quite CSS, but still really useful anywhere
I created a tool that creates headers dynamically from many themes, such as chrome and golden. Although I created a form you can go through to get these headers, it can be sometimes easier to just manipulate the URL.
The first parameter to change it the theme. That determines how the text will look. Here are a few themes:
And the second parameter is what the text will say.
So here is an example URL:
http://tools.croar.net/textmaker/x/THEME/QUERY
http://tools.croar.net/textmaker/x/3d/cool text!
And to make this work, put it into [img] tags.
[img]http://tools.croar.net/textmaker/x/3d/cool text![img]
The only reason I posted this tool is because it easily creates nice-looking large text for headings.
If you have any constructive criticisms/comments/questions, please post them.
Contributed by roar on 29 January, 2011 - 6:14pm |
|
|
|