CSS post it notes

css post it notesYellow post it notes are cool and a really good way to get someone's attention, don't you think ? I had in my disposal the transparent png solution for IE using CSS so all I needed was a cool graphic and a way to position it anywhere on a page using just CSS.

The advantages of this implementation are:

  • you don't need javascipt
  • you can position it anywhere on a page by changing a few css parameters
  • any PNG-24 graphic will do, no need to think about what colors will be behind it on the page

You can take a look at the complete css post it note example and come back for the details:

Html-wise all we need is two nested layers. The inside layer is basically for formatting purposes and for the sake of the OLD and buggy IE5.5 and IE6 to apply the .filter rule otherwise we would eliminate it.

<div class="postit dim">
<div class="dim filter padding">
<!-- your content here -->
</div>
</div>

CSS-wise all I need is the postit rule to position the post it layer where I wish and put my "post-it" background image in place.


.postit{
position:absolute;
left:700px;
top:-50px;
background: transparent url(postit.png) no-repeat 0 0;
}
.dim{
width:228px;
height:228px;
}
.padding{
padding:50px;
}

making the position absolute allows us to take them "out" of the normal flow of content and position it anywhere relative to the parent container. Here I chose to put it in a absolutelly centered container using CSS which I believe does not need too much of explaining. I have to specify the left and top positions relative to the wrapper container. The width and height of the dim class match those of the postit.png image.

Actually that is not all
IE6 does not know how to display the PNG alpha transparency so it needs a little trick

<!--[if lt IE 7]><style>
.filter {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='postit.png', sizingMethod='crop');}
.postit { background-image: none; }
.postit div a {position: relative;z-index: 1;}
</style><![endif]-->

This basically makes the PNG transparent for IE5.5 and IE6, but we don't want IE to display the background-image therefore the included image as background. The next rule is there to overcome yet another IE bug that make anchors not being clickable when the filter is applied.

The rest of the rules are irrelevant to this example and won't be explained (maybe if someone asks for them).

For a more thorough discussion on PNG transparency look here. One can download all the necessary files of the example here.
If you are a graphic designer and you want to create a better graphic for the example I would gladly include it and credit you; I admit of not being very good with graphic design.

NOTES
I am not claiming to have discovered anything that is involved to make this css post it notes; I only put some of the available tricks into good use, I hope you like the outcome. If you do use it in any of your projects or sites I would appreciate a mention or a linkback. It has only been tested in IE6 IE7, Mozilla Firefox 2.0.0.8, Opera 9 and Netscape 7.2 by me (all in windows). If you can test it in other browser and leave a comment below it would be greatly appreciated ...

As long as there is there are IE6 users (mostly users that are on windows XP and Win9x) we are bound to use "tricks" to help the browser understand, but in the end it stops designers and developers from REALLY innovating. Maybe its time for those users to be educated for the necessity to start using a modern browser and help this field grow.

Category: 

23 Comments

You know, your example page doesn't work at all in Safari 3.0.4 on Mac OS X - screenshot: http://img164.imageshack.us/img164/7451/picture1ir7.png

As for your last comment about IE6 users needing to be "educated", I'm afraid the situation is a lot more complicated than that. As for designers and devs "innovating", if you mean more ajax and complicated layouts as is the norm nowadays, that's doing nobody a favor. Maybe being restricted to a point by outdated browsers is doing more good than bad - not to the user, but to devs who have to take that into consideration. And shame on them if they're willing to dump an entire group of users just because they're too lazy to care for it.

I know this is starting to go off on a tangent, but I find http://www.456bereastreet.com/archive/200711/keep_browser_lockout_a_thin... to be slightly relevant to what you've mentioned. No, you don't use any javascript or anything. But it's just that one comment about browsers bugging me, combined with the fact that this doesn't work in Safari (which is also for Windows). Sometimes people don't have a choice, or they don't know, or they'd sooner stop using the website as a result.

Ouch, my post sounded somewhat insulting. I didn't mean for it to.

Basically, I know what kind of frustration goes through the minds of devs and designers alike when having to deal with MSIE's backasswardness, although I do a lot more backend work than designing. I've spent many hours going through Google finding workarounds for MSIE issues on some of my sites, cursing the shortsighted fools at MS for designing something like MSIE 5/6 and wondering if I could bill them for the headache incurred from having to deal with such a POS browser (clients pay for the time wasted :p ). It's not pretty.

But when I do that, it usually makes me realize who my audience MIGHT include. People on mobile browsers, the (generally) disabled bunched into one huge group, old folks, young folks... and everyone has needs that need to be filled. It's not my place to put up a page telling them to upgrade. That ends up with pissed off users who'll never come back to the site and would probably discourage others from going to the site as well, which does not bode well for the client. It's my place to try to accommodate them as best I can, with gracefully degrading code and if needed, alternate versions.

I apologise if my first comment came off as being a bit ticked. You tested the postit test page in Opera but not in Safari which has the bigger market share and audience, coming preinstalled with a rather popular OS. You made a comment about people needing to move on and use newer browsers. It's a rather frustrating situation.

In an ideal world, people would update. But until then, I'm sure there are still plenty of satisfied users out there using MSIE

Jane thanks for your comments, they did not sound "too harsh" the first time around but thanks for clearing it up.

When I say innovating ....

I certainly do not mean AJAX and web2.0 stuff since those can be used unobtrusivelly and browser agnostic (or at least they should) which means whoever has the proper technology (browser) takes advantage of them.

I mean stuff like transparency and proper CSS (pure design issues) that are very convenient for the designer to create an aesthetically pleasing site that is not bloated.

Lots of designers still use tables for layout because they can't be bothered with finding CSS Hacks for IE6, and I don't blame them. Tables are the lowest common denominator (all browsers understand) but this results in bloated pages that if combined with inline styling (not proper CSS) could mean pages that are 900% in size of what they ought to be ...

And I am even thinking what will happen if a new specification of HTML and CSS comes out that defines great design techniques, the developers will still need to consider the IE6 browser that was build in 2001 ...

About Safari, I was under the impression that SAFARI only came out for MAC ... I am downloading the safari 3 Beta for windows and I will try to accommodate it

Wee, thanks for the quick reply.

Yes indeed, it does work, sorry on my lazy behalf for not seeing what the issue was. I'd be surprised if a discrepancy like that appeared between the Mac and Windows versions, I mean I have this sneaking feeling the Windows version is mostly for iPhone and Safari testing in general because it's not convenient for devs to get their hands on a Mac and all. ;)

Yes, I get why there might be a reason to ditch tables for layout and all, and a need for consistent and in-depth CSS support across all the browsers, but it needs to start somewhere. Having specs that aren't being pedantically argued by the mixed group in the various working groups and whatnot for all the various standards would help...for starters...especially if real-world usage was taken into account with a grain of salt (maybe it's the real-world usage one might be interested in changing...).

And even if devs ditched it all in favor of modern browsers, along with the users, there's still the huge backlog of sites out there that will never be standards compliant. Browsers can't be expected to drop support for those (i.e. something like extremely draconian error handling - "omg you used <b> ?! i'm not even gonna bother rendering the page!"). So you have this catch 22 of sorts where nobody can really budge in one major way or another, just have to try to take one step forward at a time.

Interesting post and follow on discussion.

Was wondering if you guys know the answer to this. Does Safari (PC) render xhtml/css exactly the same as Safari for Macs. I run PCs (one with IE6 and one with IE7), plus the other usual suspects (FF/Opera) on both machines, and I am very loathe to splash cash on a Mac unless I have to.

TIA

Alex

Alex not really sure but in theory they should be the same rendering engines ....

The master of CSS and DOM Peter Paul Koch does not make a distinction between Win and Mac Firefoxes - in his comparison of the DOM compatibility - but for Safari he does state that its the Win version of Safari
http://www.quirksmode.org/dom/w3c_core.html

Great CSS tip.

The post it note would be more useful from a marketing perspective if it could be closed or clicked upon to follow to another web page.

Is this possible?

CSS
------
#nav li {
display:block;
float:left;
position:relative;
}
/*To make the group links visible when hovered on them */
#nav li a span {
display:block;
float:left;
height:22px;
letter-spacing:1px;
padding:9px 21px 0pt;
}

#nav ul {

border-top:1px solid #FFFFFF;
display:none;
left:7px;
margin:0pt;
padding:0pt 0pt 6px;
position:absolute;
top:31px;
width:160px;
}
#nav li:hover ul, #nav li.over ul {
display:block;
z-index:100;
}

#nav ul li a, #nav li:hover ul li a, #nav li.over ul li a {
background:#B0B0B0 none repeat scroll 0%;
border-bottom:1px solid #FFFFFF;
display:block;

padding:5px 0pt 3px 8px;
width:132px;
}

CODE
---------

The links to the examples seems to be broken. I would realy like to get a hold of the script and image.

Works like a charm!
Thanks for the quick reply.
->anders.