After exploring the possibility to add multiple background images to an element, I realized it was possible to use that technique to create boxes with rounded corners in a very clean, CSS-only way. In particular:
- No need to add any extra markup.
- No need to know the dimensions of the element. In fact the element can be resized freely, which makes it perfect for fluid layouts.
- Pure CSS solution.
The catch is: this technique relies on the use of generated content, so it doesn't work in IE6 or IE7. Which makes it pretty much useless for real projects, unless for some reason you can ignore IE. Read the full text...
Posted 080902, in: English, Web, CSS
Tags: generated content
Here's an interesting way to add multiple background images to an element using CSS2. Before anyone gets too excited, since this technique uses generated content it doesn't work with IE6 nor IE7. Maybe IE8 will support generated content, but who knows.
Still it's fun to try, and if you can ignore IE, then this might be useful sometimes. It works in Firefox 2/3 and Opera 9 under Windows XP, at least.
In this article I'll first guide you through a basic example, and then we'll create a nicer box. Read the full text...
Posted 080831, in: English, Web, CSS
Tags: generated content
One of the problems with existing methods for CSS image replacement is that when a user is using a browser with CSS on but images off, the replaced element is not visible at all. There is a solution to that, but it implies using this sort of HTML:
<h1><span></span>Some text</h1>, which I find rather ugly.
Lately I've been playing around with generated content trying to find a solution that solves the above described problem, without the use of any extra markup. Obviously this won't work in IE6, not even 7, but apparently IE8 will support generated content, so why not give it a go? Read the full text...
Posted 080812, in: English, Web, CSS
Tags: css techniques, generated content, image replacement
