How To, Get great looking Transparencies with RGBa

Friday, 22. January 2010

CSS 3.0 has a great new features called RGBa.

You can now make a transparent background, transparent text, or just about anything else transparent with RGBa.

.myClass {
background-color:rgba(255,255,255,0.5)
}

The above tag will color your area witha white background that is 50% transparent. The only issue with RGBa at this time is that IE doesnt support it. The only CSS 3.0 compliant browsers seem to be Firefox and Safri. However, I have tested this in Opera and it does work.

You can also change the color of text element with:

.myClass {
color:rgba(255,255,255,0.5)
}

The old style of transparency is still supported by all browsers

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

The major difference between these two styles is that the new method RGBa will only effect the targeted ellement. Where as with opacity all subclasses are also affected.

Posted in Uncategorized by frenchsquared - No Comments

CSS, How to deal with background color and images.

Sunday, 23. August 2009

The background-color property sets the background color of an element.

The backgound-image property applies a background image to an element, which will appear on top of any background-color.

body {
background-color:#000
}

h1 {
background-image:url(header.png);
}

Posted in CSS Adding Background Images by frenchsquared - No Comments

CSS, How To – Shorthand Properties

Sunday, 2. August 2009

The background property combines background-color, background-image, background-repeat, background-attachment, and background-position.

h1 {

border: 1px solid gray;
background: yellow url(tint.jpg) repeat-y 100% 0;

}

The list -style property combines list-style-types, list-style-postition, and list-style-image.

ul {

list-style: square inside;

}

Padding and Margins: Top, Right, Bottom and Left

p {

padding: 1em 2em 3em 4em;
margin: 5px 4px 3px 1px;

}

Posted in Understanding CSS by frenchsquared - No Comments