Frank MacDonald» CSS Properties

Cross-Browser CSS Opacity

Frank — Thu, 29 Apr 2010 18:57:07 +0000

The ability to make a div element opaque using CSS is useful for creating aseptically pleasing websites and effects. The following code can be used on any CSS element.

Cross-Browser Code

filter: alpha(opacity=50);

-khtml-opacity: 0.5;

-moz-opacity: 0.5;

opacity: 0.5;

Working Example

In this example a div element (.box) is centered on the screen using the margin auto code. It is then told its size, width and background color. Finally the element is told to be transparent in IE, Firefox Safari and Konqueror using the code depicted above.

HTML code

CSS code

.box {

margin: 0 auto 0 auto;

width: 100px;

height: 100px;

background-color:#000;

filter: alpha(opacity=50);

-khtml-opacity: 0.5;

-moz-opacity: 0.5;

opacity: 0.5;

}

Round Edges with CSS

Frank — Mon, 05 Oct 2009 16:33:45 +0000

Drawing curves with CSS makes designing alot quicker. For instance, say you want to place a box with curved edges, you would traditionaly have to use images or javascript to render such an effect. With the Development of CSS 3.0, it has become possible to draw curves using only CSS in some of the mainstream browsers. The following code can be used on any css element.

Firefox CSS code

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

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

-moz-border-radius-topleft:4px;

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

Safari CSS code:

-webkit-border-top-left-radius:4px;

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

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

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

Konqueror CSS code:

-khtml-border-top-left-radius:4px;

-khtml-border-top-right-radius:4px;

-khtml-border-bottom-left-radius:4px;

-khtml-border-bottom-right-radius:4px;

Working Example

In this example a div element (.box) is centered on the screen using the margin auto code. It is then told its size, width and background color. Finally the element is told to have rounded edges with a radius of 4 pixels in IE, Firefox and Konqueror using the code depicted above.

HTML code

CSS code

.box {

margin: 0 auto 0 auto;

width: 100px;

height: 100px;

background-color:#000;

-moz-border-radius-topleft:4px;

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

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

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

-webkit-border-top-left-radius:4px;

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

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

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

-khtml-border-top-left-radius:4px;

-khtml-border-top-right-radius:4px;

-khtml-border-bottom-left-radius:4px;

-khtml-border-bottom-right-radius:4px;

}

CSS Reset

Frank — Mon, 05 Oct 2009 15:58:19 +0000

It is a good idea to reset or normalize your css stylesheet before starting a web-site design. This will remove most of the problems which arise when trying to make a site look the same in all web browsers. This is achieved by telling the web brower to set every available property to 0. Using this technique fixes padding differences between IE and Firefox.

Insert the following code at the top of your css file:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6 {

	margin:0;

	padding:0;

}

pre,form,fieldset,input,textarea,p,blockquote,th,td {

	margin:0;

	padding:0;

}

table {

	border-collapse:collapse;

	border-spacing:0;

}

fieldset,img {

	border:0;

}

address,caption,cite,code,dfn,em,strong,th,var {

	font-style:normal;

	font-weight:normal;

}

ol,ul {

	list-style:none;

}

caption,th {

	text-align:left;

}

h1,h2,h3,h4,h5,h6 {

	font-size:100%;

	font-weight:normal;

}

q:before,q:after {

	content:'';

}

abbr,acronym { border:0;

}

(YAHOO, 2009)