position: absolute - Design resources and inspiration.

In this simple 84-step tutorial, CSS-Master Matthew Inman of Drivl shows us the fine art of creating square corners with CSS. A wonderful alternative to all those rounded corner tutorials. Join him on “An epic journey of compassion and liberty that embodies the semantic markup movement in modern web design in an unprecedented paradigm shift to right angled HTML elements.”

Ten years ago, on 17 December 2006, W3C published the first standard for style on the Web: Cascading Style Sheets (CSS), level 1.

CSS Web designers have enjoyed fine-grain control of page appearance (fonts, colors, layout, margins, etc.) and easier page design and maintenance. CSS can also help make pages more adaptable to more users, including users with mobile devices and some users with disabilities.

To celebrate this tenth anniversary, W3C invites developers to propose their favorite CSS designs for the CSS10 Gallery.

Learn more about CSS from the CSS10 pages, the press release, and the CSS home page.

John Faulds of Tyssendesign has written up a comprehensive summary of CSS-based drop down menus. What makes this one stand out from regular link lists is that he provides all the pros and cons that come with each solution, so you can pick out what is best for your needs and know the limitations and the alternatives to each method from the start.

Last year’s webdeveloper advent calender “24 Ways” (we reported) is at it again, offering even more ways to impress all your geek friends. One new tutorial per day, up until Christmas. You’ll find last year’s archive here.

If you need to test your sites on a mobile phone but you don’t have the possibility (mobile online fees are expensive!), then how about giving Opera’s very own Mini Simulator a try? Naturally, this one only supports Opera Mini, but it renders the page exactly as the real thing does. I’m surprised at what a good job this browser does. Opera Mini renders only the most necessary CSS while leaving the page very readable and easily navigatable. Larger images can be downloaded in their original size or resized exactly to what you would need on your mobile, if, say, you wanted to use it as a background. I’ve tested position: absolute on it and while it reduces it to pure text and links, it does leave the general feel of the site intact, in a “mini” version. A nice addition is the built-in RSS reader. I’m definitely putting this browser on my next phone. Now if someone could please come up with sane mobile online fees…
Update 2009-11-06: new URL

Yeah, you read that right. uselesspickles.com has figured out a way to render real-time 3D using just CSS and Javascript. The magic behind the polygons lies in the CSS border attribute. This ingenious little trick abolishes the need for hundreds of little divs, sparing your CPU loads of cycles. The rotation of the 3-dimensional object can actually be controlled via keyboard commands. Not sure if there are any practical uses for this but cool stuff anyways.

In light of last week’s release of Internet Explorer 7, Slashdot is offering us the chance to interview the general manager of the IE7 team. All those questions you’ve been burning to ask over the years of frustration can be asked, and the best ones will be passed on to Dean Hachamovitch for answering. My favorite question so far:

If you adopt FireFox 2.0 as IE8, your boss would be impressed with how much you improved the product in a very short time. My question is: would you take the extra time to remove CSS features from IE8? Thank you and God Bless.

There are lots of serious questions, too. ;) I’ve added a question of my own here.
So then, ask away! (and play nice)

I’ve discovered a little trick that lets you change the icon that appears when you autoscroll in Firefox. Surprise your website visitors with this gimmick.
(more…)

Seriously, styling <input> buttons can be a pain. Browsers offer you little control, Safari even completely ignores your styles. There is an alternative, however, that I admit I’ve never really taken into consideration. The <button>. This little fellow is pretty versatile, working as you would expect from an <input>, and allowing you to make it look whichever way you want.

Unlike the input-based buttons, the majority of browsers do not force any particular design on the button element, leaving it a raw ingot which we can cast and shape to our liking.

Aaron Gustafson writes all about it on Digital Web Magazine.

Some good news for everyone relying on accessible websites: Google is experimenting with a new search engine: Google Accessible Search. The official Google Blog states:

Accessible Search adds a small twist to the familiar Google search: In addition to finding the most relevant results as measured by Google’s search algorithms, it further sorts results based on the simplicity of their page layouts. (Simplicity, of course, is subjective in this context.) When users search from the [..] site, they’ll receive results that are prioritized based on their usability.

To see the difference to regular search results, Philipp Lenssen of Google Blogoscoped has created a comparison tool.

I hope this will pick up. With Google now (quasi)officially supporting accessibility standards, it might help further push the issue into the public eye and increase awareness. It’s just too bad that the Google search page, as well as most other Google pages, does not produce valid code itself.