CSS Box styling - how to

Now with CSS3 we can style boxes easier and quicker using CSS rather than background gradient images. There are quite a few possible combinations of styles to use, depending on what you are looking to achieve, though you need to be aware that some don't work in certain browsers, or certain browser versions.Let's get started with box-shadow. This one works across newer versions of Firefox, Chrome, Safari and IE9. Simply add to your CSS stylesheet the following: -webkit-box-shadow: 3px 4px 5px 5px #333;

box-shadow: 3px 4px 5px 5px #333;

The first part is for horizontal offset, followed by vertical offset, followed by blur distance, then spread and lastly the colour.Using negative numbers for horizontal and vertical offset will produce shadows to the left and above, whereas positive numbers will make your shadow appear to the right and below.Another variation you can use is box-shadow: inset. This makes an inner shadow. The example CSS below will show an inner shadow with no offset, blur distance of 5px and a spread distance of 5px: -webkit-box-shadow: inset 0 0 5px 5px #888;

box-shadow: inset 0 0 5px 5px #888;

Taking the idea of box-shadow even further, you can create multiple layered shadows. The CSS code below produces a white blurred outline with slight red shadow to the right and a faint blue shadow to the left: -webkit-box-shadow: 0 0 15px 5px #FFFFFF, 15px 10px 25px 0px red, -15px -10px 25px 0px blue;

box-shadow: 0 0 15px 5px #FFFFFF, 15px 10px 25px 0px red, -15px -10px 25px 0px blue;

Depending on your web page design, you may even want to try using some transparency in your shadow, which can be achieved using RGBa colour: -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);

box-shadow: 5px 5px rgba(0,0,0,0.5);

Next up is the border of your box, which is styled using border-style, border-width, border-color and border-radius. You can also style top, bottom, left and right borders individually, by replacing "border" with "border-left" for example.

• Border-style can be dotted, dashed, solid, double, groove, ridge, inset or outset
• Border-width can be styled using thin, medium, thick or by px size, such as 1px, 2px, etc
• Border-color can be specified as a color name, like "red"; RGB - specify a RGB value, like "rgb(255,0,0)"; or Hex - specify a hex value, like "#ff0000". You can also set the border color to "transparent", or use RGBa such as "rgba(255,0,0,0.5)"
• Border-radius controls whether the border has rounded corners or straight edges. The css example below creates rounded corners. The higher the px number you choose, the more rounded the corners will become. -webkit-border-radius: 5px;
  
  border-radius: 5px;
  
  You can do so much more with CSS3 box styling, though just be aware that different browser versions will handle the rules differently. For more great ideas and to see examples of CSS3 box styling, check out this website: css3please.com[dtwd-related-posts-sc title="For more ideas:" count=3]