Here goes a mighty fine job: a test meant to show just how well implemented is the CSS support in a browser. The test starts from a rendering considered corect (reference) and you get to compare that render with the test-page as viewed in your browser. Extremely interesting for a CSS geek like me… 
ArchivePage 2 of 2
For the sleepless… a page built exclusively with CSS… even though it doesn’t look like html… guess how they did it.
For those using Firefoxe’s Firebug, inspecting DOM elements is already a breeze. But what about Internet Explorer? The guys at slayeroffice have created a new DOM inspector that works on any browser, which is easy to install, by simply bookmarking it. It’s not as advanced as the Firebug, but it can prove extremely useful sometimes. See here
…or “Building An Expanding DHTML Menu With CSS and JavaScript – revisited”.
What’s this all about: a vertical menu with submenus which are hidden initially and show on rollover.
Requests:
1. On roll-over over a zero-level element, the corresponding sub-menu must appear
2. On roll-over over another zero-level element, besides the effect from point 1. any other secondary menu must hide, only the the submenu corresponding to the active roll-over must remain visible
The most elegant solution I found is in the page linked at the beginning of the article, but it was a bit too long for what I needed, so I took it, adapted it, and I got exactly what I need (see here a functioning example, with all it needs to understand it, if you look in the source).
Later edit: for a more elegant menu version (in terms of coding and approach), but less functional and without JS, read here (in Romanian).
Versiunea in Romana a acestui articol aici.
I used to write some time ago about the possibility to create graphically rich and yet still editable buttons.
The first problem with tha approach was an optimisation issue: foe each button you’d have to use 2 images, hence 2 different requests on the server. In time, and on a crowded server, any problem of this nature begins to show, and to ask for optimisation.
Second problem: on top of that, our buttons lacked any roll-over effect.
This made me re-think the approach of this problem:
1. Before, I used to use 2 tags, like so:
A) <li> <a>button here</a> </li>
The new approach still uses 2 tags, but this time in a bit different manner:
B) <a>button here<div class=end></div></a>
The new DIV, marked by the class “end”, has the precise role of defining (graphically speaking) the right end of the button. I’ll just go ahead and enter below an explanatory graph, followed by, well, explanations:
As you can see in the image above, instead of using more images, we’re just going to use a single image, long enough to cover any scenario* and double in height: one row for the normal state and one row for the “over” state.
I wrote, some time ago, about how to solve this problem with min or max dimensions in more retarder browsers.
The solution proposed was to use conditional javascript expressions inside the CSS file. Not very elegant, and quite limited.
Meanwhile I found a much simpler, more elegant and better validating solution. Let’s say we want to get a min-height of 400px. How do we go about it? Easy enough, we use 3 CSS properties instead of just one, like so::
min-height: 400px; height: 400px; height: auto !important;
And, miracle! It works! In every browser that I always test against: IE6, IE7, FF, Opera, Safari. Enjoy…
Yep, I know – yet another tutorial on how to extract an image from its background.
Only this time, It’s about extracting images with sensitive areas (such as shadows, hair etc.) from relatively uniform backgrounds. We’re going to use for this example a human face, taken, with thanks, from imageafter.com.
OK, let’s get to it.
1. Open the image
Continue reading ‘Easy image contour extraction’
I needed, at some point, a “fire animation” that would be:
1. looping seamlessly
2. horizontally tile-able
I googled and I googled, in vain – I couldn’t find anything but a small tutorial about blending modes. So I took on doing it myself and with some Photoshop scribbling, I got what I wanted – something like this:
How can you too do something like this? Perty simple, just follow the steps in my tutorial:
(Romanian version here)
Continue reading ‘Fire in Photoshop – seamless animated loop’