CSS event:Selectors

Justin Palmer has created a wonderful JavaScript snippet named CSS event:Selectors that allows you to allow you access to Javascript events using a CSS style syntax. If you work at all with JavaScript you’ll probably love this little hack as much as I do.

Here is a quick example of what Palmer is up to:

 var Rules = { '#icons a:mouseover': function(element) { element.style.display = "none"; }, '#icons a:mouseout': function(element) { element.style.display = "block"; } } 

Pretty sweet!  The article is very short and explains everything you need to know to implement event:Selectors with applicable code snippets as well, and includes links to view examples, documentation and to download event:Selectors.

From PSD to CSS

There is a nice tutorial at the Erratic Wisdom blog that will show you how to take your PSD website mockup and coding it into a standards based layout. This is a well-written, four-part tutorial that ironically begins by the author advocating taking a pencil and physically marking up the basic design composition.

I would pass this along to any students of web design who are making use of Dreamweaver and CSS because he starts by assuming virtually no PSD or CSS web design knowledge at all. If you need a refresher go take a look at this article and bookmark it for future reference.

CSS Bubble Tooltips

Bubble Tooltips is some more CSS magic from Alessandro Fulciniti that creates some very nice Javascript and CSS based tooltips.  As with other scripts from Alessandro, this one uses unobtrusive Javascript and degrades perfectly! We are starting to see particularly adept coders and programmers create features out of CSS that are very helpful and educational for the CSS community in general.

Maybe in the future we will have more examples of very talented coders and web developers who are analogous to entertainers nowadays who create something interesting to share it with “fans” who have an appreciation of what they are doing.

Image Magnifier using CSS and JavaScript

The Image Magnifier is a pretty cool combination of CSS and JavaScript. Basically nowadays we have come to the point where any programmer with a creative idea is empowered to make things that are incredibly helpful, fun and potentially enriching— or a combination of all three!

Almost anything you can imagine in the visual realm can be presented on a webpage, and since the distribution, finding and consumption of creative efforts is not a problem anymore for anyone with an Internet connection, the possibilities that are opened up in this brave new world of digital media are, as they say, endless. That’s right, I’m that inspired by this interesting magnifying glass effect over book binding at the link above!

Nice CSS Layout Gallery

The Web Page Layout Gallery contains 5 very nice examples of various website layout designs and they are offered for free usage. As the first paragraph on their webpage states: “building CSS-based layouts can be a real pain in the *ss.” How very true!

A few other layouts included in this gallery are one designed to be used in a portal with generic classes that handle the appearance of specific portlets, as well as ‘Ruthsarian Menus’, advertised as a very compatible CSS-based dropdown menu system.

There even is a so-called “experimentation chamber”, but I didn’t have the courage to click through to see what specifically was offered there in the way of CSS layouts.