website cross browser html css effects

Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser.

You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?

Min / Max width (IE included)

Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? But you don’t need to do it anymore. IE is not a strict standards browser and sometimes we can take advantage of this to code things that would be awful to see in standard CSS code.

You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows:

[css]
#content {
width: expression(document.body.clientWidth < 762? “760px” : document.body.clientWidth > 1242? “1240px” : “auto”);
min-width: 760px;
max-width: 1240px;
}
[/css]

RGBA (IE included)

This time we will need some IE filters to get the job done. You’ll have the standard markup, IE6 correction and IE8 correction.

IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! We have a pretty RGBA background.

The first two digits should be the opacity and the last one should be the color itself. Don’t know why, it just don’t get the opacity right… Maybe its just a bug inside a bug

[css]
.element {
background-color: transparent;
background-color: rgba(255, 255, 255,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)”;
}
[/css]

Opacity (IE included)

Wow, filters again! But this time we have a different syntax for IE8 and earlier versions. And again be sure to put khtml, moz and standard declarations.

[css]
.selector {
ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* internet explorer 8 */
filter: alpha(opacity=50); /* internet explorer 5~7 */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
[/css]

Image rotation / scaling (IE included)

Another pretty cool and virtually unused feature is image rotation / scaling. There is another filter that allows you to rotate images, but unfortunately it just allows you 90º increments.

Although you can also mirror images, that makes cool image editing possible to almost every real browser and IE. For real browsers we will use the transform property with each vendor prefix.

[css]
img {
transform:
rotate(180deg)
scale(-1, 1);

/* for firefox, safari, chrome, etc. */
-webkit-transform:
rotate(180deg)
scale(-1, 1);
-moz-transform:
rotate(180deg)
scale(-1, 1);

/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

/* opera */
-o-transform:
rotate(180deg)
scale(-1, 1);
}
[/css]

Fullscreen Background (IE included)

Sometimes we just need a quick way to get full screen backgrounds. Well, hope you don’t use JavaScript just to do this, because you can do it with a few lines of CSS.

The magic here is to set a div that goes fullscreen and inside it you can put a landscape, portrait or full sized image.

[css]
.content {
position: relative;
width: 760px;
z-index: 10;
}
.background {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index:2;
}
.portrait {
height: 100%;
}
.landscape {
width: 100%;
}
.full {
width: 100%;
height: 100%;
}
[/css]

[html]
<div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div>
<img src=”imgURL” alt=”" />
</div>
[/html]

Background pattern or bullet without image file

Pretty sad that IE doesn’t allows you to use base64 encoding instead of real files. The best part is to use it for mobiles, since it saves you some http requests and precious time.
I’ve used it for a custom list style image without images. I just generated the base64 from Patternfy and pasted it in my CSS, like this:

[css]
ul {
list-style-image: url(data:image/png;base64,7swAAAABJRU5ErkJggg==);
}
[/css]

Popularity: 11% [?]