17 CSS/HTML Effects with Cross-Browsing Alternatives

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?

Thus, our point here is to collect some cool CSS effects that you should be using:

• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles

So, Let’s rock!

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:

#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

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 :)

.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)";
}

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.

.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 */
}

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.

	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);
	}

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.

	.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%;
		}
<div class="content">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="background">
	<img class="full | portrait | landscape" src="imgURL" alt="" />
</div>

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:

	 ul {
		list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
	 }

Text Shadow (IE included)

Again we will need some IE filters. But this time IE filters can destroy your font’s readability, so try not to use it too much and preferably, only when working with larger fonts.

	p {
		text-shadow: #000000 0 0 1px;
		zoom:1;
		filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

		-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
	}

Multiple borders (IE included)

When you want more than one border, for real browsers you’ll need to use an outline or :before and :after elements. For IE you could use filters to gain some an extra border.

	div {
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
	}
	div:before {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;
		border-top: 1px solid #212121; /* top border! */
		content: '';
	}
	div:after {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 1px;
		border-bottom: 1px solid #212121; /* bottom border! */
		content: '';
	}

Box Shadows (IE included)

The same filter we’ve used to create a second border can be used to generate box shadows. Be aware that this filter can mess up an element’s width, so if you want to use it with any grid system, prepare for the headache.

	.shadow {
	    -moz-box-shadow: 0 0 4px #000;
		-webkit-box-shadow: 0 0 4px #000;
		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
		filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
		box-shadow: 0 0 4px #000;
	}

Rounded corners

The bad part about almost-standard properties is that each browser implements its syntax differently. So for round corners we have a pretty strange behavior, where standards browsers have different ways to say same thing:

.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */

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

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
 }

Screen reader only accessible content

Sometimes you want to improve the accessibility of your site, so you put some fancy links like “Jump to content” or “Jump to navigation”. So you just put “display: none” or “visibility: hidden” and hope it works, right? Well, it doesn’t. Some tests show that many screen readers just ignore the display:none or visibility: hidden part, so you don’t have any accessibility improvement.

What you can do instead is to use position absolute and hide this content above browsers visible area. But you have some risks on this technique, since it hides content, Google can consider it gray or black hat.

.hidden  {
	position: absolute;
	top: -10000px;
	left: -10000px;
 }

Don’t use negative text-indent

Since we’re talking about hidden content, take one more note, never use negative text-indent again. This is a known technique so you have a lot of SEO downsides by using it, since many bots can recognize it nowadays.
Just use alt attribute, that is much safer than hide content.

<h1><img src="myLogo" alt="My company" /></h1>

Clearfix (IE included)

Many of you know about .clearfix method for correcting heights when you use floats. Well, in many of these cases, that amount of code could be replaced by just two lines:

	.clearfix {
		zoom:1;
		overflow:hidden;
	}

@font-face (IE included)

If you’re still using cufon just because you don’t trust @font-face, think again.
Font Squirrel provides an amazing @font-face generator service, that allows you to put really good looking fonts in your site without worrying about all that JavaScript stuff.
The final code provided is something like this:

@font-face {
    font-family: 'MandatoryRegular';
    src: url('font/mandator-webfont.eot');
    src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/mandator-webfont.woff') format('woff'),
         url('font/mandator-webfont.ttf') format('truetype'),
         url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Pull quotes without image

We talked about this before, but it is possible to create curly quotes without any image. And it is not that hard. You just need a :before and blockquote:

	blockquote:before {
		display: block;
		float: left;
		margin: 10px 15px 0 0;
		font-size: 100px; /* let's make it a big quote! */
		content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
		color: #bababa;
		text-shadow: 0 1px 1px #909090;
	}

CSS for iPhone4 (higher resolution)

As time goes by we get more and more powerful mobile devices. It is a good practice to give create a mobile version, with reduced images and overall files size, but we have also to give a better experience for the ones with newer devices.
Since iPhone4 has a higher resolution, if you don’t provide a better (and larger) version of you logo, for example, your users will get a blurry version of it. This is a problem that can be solved with a very few lines:

@media handheld, only screen and (max-width: 767px) {
	.logo {
		/* common low-res and low-size, of course */
		background: url(logo.jpg) no-repeat;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}
}

CSS landscape / portrait orientation for mobiles

This is a nice starting point for correcting layout bugs in each version of each layout mode for many mobiles, provided by stuffAndNoise

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		/* Styles */
	}

	/* Smartphones (landscape) ----------- */
	@media only screen
	and (min-width : 321px) {
		/* Styles */
	}

	/* Smartphones (portrait) ----------- */
	@media only screen
	and (max-width : 320px) {
		/* Styles */
	}

	/* iPads (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px) {
		/* Styles */
	}

	/* iPads (landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : portrait) {
		/* Styles */
	}

	/* Desktops and laptops ----------- */
	@media only screen
	and (min-width : 1224px) {
		/* Styles */
	}

	/* Large screens ----------- */
	@media only screen
	and (min-width : 1824px) {
		/* Styles */
	}

	/* iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
		/* Styles */
	}

Rochester Oliveira

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Dave says

    Awfully hard to take this site seriously when it’s serious broken in safari 5.1.5

  2. Robert says

    Hi Rochester,
    What I really like about this article is the IE fixes. IE is known to be notoriously buggy and very rigid when it comes to supporting latest technologies such as HTML5 & CSS3. Only the latest versions such as IE8 & 9 may support these. But there are other versions such as IE7 ( I am not sure if someone is still using IE6 ), which is still being used and its a real pain trying to provide support to such obsolete browsers. A fix/hack such as the ones mentioned in this article, certainly helps other designers & developers in keeping things similar in IE as well.

    So I really wanted to take this moment to thank you especially for the IE fixes that you have provided. So if you can include IE hacks and tips in your future articles as well, that would be really helpful to others and will be much appreciated. Thank you.

    • says

      Hi Robert,

      IE6 is not a concern actually. But IE still have a good share, so you’ll need to keep an eye on it yet.

      But now my best bet is just go doing cool stuff (like round corners and so on) and when there is alternatives for IE I use them, where there isn’t, well, I just let it be :)

      []’s

  3. Francis says

    I did not know you could use JavaScript inside of CSS, I actually use CSS to avoid JavaScript.

      • sekar says

        Hi Rochester Oliveira,
        In Same cases overflow: hidden works. But not usable for all situations.
        See this link

        • says

          Yeah, sometimes you can’t put overflow:hidden but it really works for positioned elements. It won’t works only if your child element goes outside parent.

          But if your parent is smaller than child it doesn’t has same “logic” as we are using here (simple clearfix for floats), so you will need a different approach.

          Thanks for pointing it out!
          []’s

  4. sahity says

    Hi Guys !

    I need fixed width select box , css. I tried to fix the width in css. But it is not working in IE. Please help me.

    This is the code i written in my css file.

    Select{
    width:200px;
    }

  5. Mark says

    Hi Rochester

    For the IE RGBA filter you can use this to calculate IE Aplha Hex:

    Math.floor(0.6 * 255).toString(16);

    You can type it in firebug console and it will return the hex needed

    • says

      Hey Mark,

      Sorry, but I don’t get it. Why did you put “0.6* [rgb]” ?

      If you are saying to just use a solid “converted” color, that’s good, but won’t work if you have any image or if your element is in top of others also, I guess..

      []’s

      • Mark says

        Hi Rochester

        I have used this for a site I developed.

        To get the opacity hex used in the IE filter ( the 2 first chars after the # ) you can use the form:
        Math.floor(your opacity * 255).toString(16); For example for 0.6 the form will return 99 which is the hex for IE opacity

        filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#99000000′, EndColorStr=’#99000000′);

  6. Renato Alves says

    I’m not used to using media queries but when I was testing on my blog redesign it didn’t work. So somebody knows why?
    At first it was because my design is elastic, it used %(percentage) is there something to do with media queries?

  7. Bjorn van der Neut says

    Nice! Would be nice if you could make an example for all 17 css html effects. Than its even more clear what it does.

    Good luck!
    Bjorn

  8. says

    Agreed!

    But unfortunately we will still have IE6/7 (worst one) for a couple of years.. It’s sad to know that even IE8/9 still not as good as we wanted :(

    []’s

  9. Dinesh Kumar Shaw says

    Awesome collection dude.I liked specially for IE families fixes.Thanks for sharing the gr8 posts.

  10. Daniel says

    Great list of tips thanks

    I’ve already used a few of these, the CSS box shadow for IE is a good one (It’s surprising the number of people who’ve never heard of this!)

    A few others are new to me, so I’ll be adding them to my CSS arsenal!

  11. Gavin says

    Really good list, I will be using some of these. Quite a few wouldn’t validate though would they? I suppose it’s a compromise, do we want validating websites, or sites that support i.e6.

    I choose the former to be honest.

    • says

      Hi Galvin!

      I think almost all ie fixes (filters and expressions) wouldn’t validate, but it is just keep them in a separate stylesheet and you’re done!

      But all standard declarations validates, of course…

      []’s

  12. Jay Karsandas says

    Great list. An all in one place :) This is one for the bookmarks… Thank you for putting it all together especially with the IE fixes!!

  13. Lucas Rolff says

    I don’t know where people get it from, but using text-indent isn’t black or gray hat, or “bad” seo, using Cufon text should be bad too then..

    The reason is, that cufon using cufontext width 0 pixel, height 0 pixel – Would it be okay then to make

    h1 { background: url('some_background.jpg'); display:block; width 200px; height 300px; }
    span { width: 0px !important; height: 0px !important }

    Heading

    I’m just wondering, because then you can’t hide an element, or some part of text (Dropdown menu etc.)

  14. Rali Sravya says

    Most useful this article for every designer and developer, thanks for posing. If you interest i will post this article to my blog.