Identification, Images, & Information
For Insects, Spiders & Their Kin
For the United States & Canada
Clickable Guide
Moths Butterflies Flies Caterpillars Flies Dragonflies Flies Mantids Cockroaches Bees and Wasps Walkingsticks Earwigs Ants Termites Hoppers and Kin Hoppers and Kin Beetles True Bugs Fleas Grasshoppers and Kin Ticks Spiders Scorpions Centipedes Millipedes

Calendar

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.

I love it
I appreciate any help in this area that you can provide!

Comment viewing options
Select your preferred way to display the comments and click 'Save settings' to activate your changes.