I didn't know you could do that!

"This site documents my attempts at understanding and exploring the possibilities of CSS. From standard navigation links to my more bizarre experimental techniques.

All my examples are produced with JUST CSS, no javascript, or any other language, has been used in any of the examples. The demonstrations are designed to work in all the latest browsers, but, if you're lucky, some may also work in earlier versions."

Stu Nicholls' Navigation Gallery.

Here are two of the examples demonstrated:

Messing about in boats
Hover over a picture and it enlarges to 100%

Also:



The Streaker
A piece of animation done with CSS alone, no Java.

(I haven't figured out how to use situational CSS in a blog, so you'll have to go to Stu's site to see if the guy gets to the other door.)



See all Topics

internet

Labels: CSS, Graphics, HTML, Tips

Information rich site

Mezzoblue .com has a wealth of information including:

CSS Crib Sheet

"You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble."

"The old-timers had to figure out the hard way all the tricks and techniques we now take for granted; lucky folks who came in later (myself included) can benefit from their sweat and tears.

In the end, when your skill using standard-based design eclipses your skill using old-school table-based methods, you’ll look back and marvel at how much more sense it makes to layout a page with CSS."

Labels: CSS, Expression, HTML

Screen-magnification or zoom

"[Participants] told us that they often copied and pasted material into Word where they could enlarge the font even more and make it bold, thus rendering it easier for them to see."

"We have not done a good job of catering to these screen-magnification or zoom users. Using CSS, it's easy to do, as we shall soon see. And moreover, using CSS to develop zoom layouts is almost exactly what developers of handheld and PDA browsers are doing in their quest for small-screen rendering of wide, multicolumn web pages."

Labels: CSS, HTML, Layout, Tips

Before or after

"The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn."

The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are page-break-before and page-break-after.
The page-break-before and page-break-after properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page every time an h1 heading is encountered and after every .section block.

h1 {
   page-break-before:always }
.section {
   page-break-after:always}

Labels: CSS, HTML, Layout

Map through the forest

"Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we?

Ok. Straight to the business. Anytime I've ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you're supposed to be set on your way.

Well well. Over the years, I've found quite some interesting unknown quirky facts about these shorthands. . . hence this Guide was born."

Labels: CSS, HTML, Internet

Cascading Style Sheets

Labels: CSS, Expression, HTML, Layout

Code and directions

"The core of any Web site is the navigation mechanism, the menu. If Web sites are primarily about organizing and presenting content, a site's menu provides the means of traversing this information set.

In designing a Web navigation system, it is often difficult to balance the competing objectives of simplicity, flexibility, usability, and maintainability. Often very simple designs are not flexible; flexible designs trade off with usable ones; and easily maintainable designs are rarely even considered."

Labels: CSS