In CSS you don't just have to use hex colors (i.e. #333333) but you can also use RGB colors (i.e. 255, 255, 255) and RGBA colors (i.e. 255, 255, 255, .9).

RGB stands for Red Green Blue and RGBA stands for Red Green Blue Alpha (basically, opacity, the maximum value of 1.0, or 100%). The maximum value for each color is 255 and the minimum is 0.

RGB and RGBA can replace hex colors in any part of the style sheet.

Example:
background: rgba(255, 78, 40, .89) url('backgroundimage.jpg') fixed no-repeat;

In the example above I just chose random values for RGBA but it will work to output a translucent color.

Rounded corners require CSS3.

An example of the syntax would be:


-webkit-border-top-right-radius:10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-topright:10px;

The example above gives the object it's assigned to rounded corners (with a 10 pixel radius) on all corners but the top left.



The code -webkit-border-top-right-radius:10px; makes the top right corner have a 10 pixel radius, but ONLY in browsers that use the webkit engine (Safari, Google Chrome, and others).

The code -moz-border-radius-topright:10px; makes the top right corner have a 10 pixel radius, but ONLY in Mozilla browsers (i.e. Firefox).



To receive the best results, use both syntaxes, in order to help compatibility issues. Unfortunately, Mircrosoft's Internet Explorer, a widely used browser, does not support this feature.

In CSS3 the syntax for drop shadows is

-moz-box-shadow: 0px 0px 10px black;

-webkit-box-shadow: 0px 0px 10px black;

box-shadow: 0px 0px 10px black;


The first two values (in the code above they would be 0px and 0px) determine the X-offset and Y-offset. The third value (in this case 10px) determines the blur radius for the shadow. Last, but not least, the last value determines the color of the shadow.



Keep in mind that the syntax for drop shadows and the syntax for text-shadows are exactly the same. Here's an example of a text-shadow.text-shadow: 2px 1px 5px #333;
Again, the first two values determine the X and Y offsets, the third value determines the blur radius and the last value determines the color of the shadow.