CSS Gradient Text
Wanna put a gradient over text, but you don’t want to have to save a ton of graphical header files for that site? This technique may help. It involves using a PNG gradient over regular HTML text. It’ll only work on solid colored backgrounds where the “shine” effect is the same color, but not a bad looking technique if you can get away with using it.
Firefox Disappearing Cursor
Front-End Developers:
It took me a while to get this going, so I figured I would share it in case anybody else comes across the same issue. On http://mercuryracing.com/techcorners/ when you click on “Join our email list”, in the div overlay that comes up, the blinking cursor bar failed to appear in input text fields in Firefox.
The Firefox bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=167801
It is fixed with the code below, thanks to comments #50 and #51 on bug report page:
#emailListPopupContainer {
position: fixed;
position:expression(”absolute”);
overflow-x: visible;
overflow-y: visible;
…
}
Cool JavaScript/CSS Menu Ideas
Thirteen different menu examples. Kinda out there ideas, but you never know when you might want something like this. Fun to play with the demos.
Epitonic.com - Creative ways to deal with variable screen width
Try expanding your browser window width on Epitonic to see how they dealt with it.
Hey, what ever “floats” your boat - with CSS that is.
UC Berkeley Dept of Spanish and Portuguese
http://spanish-portuguese.berkeley.edu/
Ok, here’s another interesting site that displays content in new and unique ways… I’m not saying it’s great design mind you (but it IS good)…just interesting when you look at the overall thoughtful blend of technology and design. The designer/programmer manages to break webconventions without losing the intuitiveness of rummaging thru the site and finding necessary information (like the logo is kind of buried in the middle of the ‘visually-cluttered’ header). And it’s chuck full of cool stuff w/o looking or acting too geeky.
There are several things to discover here and I’ll list just a few:
1. many interesting custom illustrations that load randomly as a page refreshes
2. a blog between professors and students based on a customized version of word press
3. simple navigation
4. the layout changes depending on browser window size; small screens automatically view ALL the content in 2 columns, larger screens in 3 or 4.
5. javascript animates the interface (there’s a nice fade in and out of content) and rearranges content whenever “read more” links are activated
6. from what I’ve read, it’s written in XHTML, CSS and Javascript, according to web standards and usabillity guidelines…or as steven says, “it’s clean under the hood”.
7. it’s designed and developed by Miguel Ripoll who, interestingly enough, has studied the History of Art / Musicology and Comp Lit! Check out his site here: http://miguelripoll.com/
Ok, have at it!
Design in Real Time - A Slideshow
…or a really big animated GIF. MBoffin.com shows an animated GIF that shows the building of a site. While not being earth shaking, it is a good visual example of what front end developers go through to apply style to content.
Scrollable checklists
In a blog entry, Nicholas Rougeux gives a very slick way of presenting lists of checkboxes via CSS. As a design case for creative or usability work, think this should be considered another tool for the GS Interactive toolbox.


