201 posts tagged “css”
2002
More CSS layouts
I’m not sure when it happened, but Opera.com has been redesigned (since the last time I checked the site). The new layout is done with valid XHTML and CSS but is decidedly tabular in appearance, demonstrating that using CSS does not (as some people have claimed) make it impossible to achieve the same kinds of layouts as table coders have been creating for years. It also degrades quite nicely in Netscape 4 (losing most of the layout but maintaining a crisp look and feel). In related news, Jeffrey Zeldman is currently redesigning The Daily Report with CSS (replacing his old transitional tables/CSS layout). No menu yet, but it displays in Netscape 4 almost exactly the same as Mozilla and IE.
Taming lists
In CSS Design: Taming Lists, Mark Newhouse explains in detail every CSS list trick in the book, including inline lists, nested breadcrumbs and a variety of other useful techniques. He also links to Eric Meyer’s essential DevEdge article Consistent List Indentation which explains how to deal with the differences between list indentation in Internet Explorer and Mozilla.
CSS in the real world
Adrian Holovaty: CSS in the real world. Adrian uses CSS to reduce the markup for a list of news headlines by 75%:
[... 56 words]CSS image rollovers
CSS Image Rollovers describes a brilliantly simple technique for creating the effect of an image rollover using only one image and no javascript. The effect works by creating a gif with a transparent background, then using a :hover pseudo class to change the background colour of the the containing area. Pretty straight forward so far, but the clever part is that by making the transparent part of the gif an interesting shape (placing it around the outline of a shape in the image for example) you can give the impression of displaying a different image entirely.
CSS Trickery
New CSS Experiment: Trickery with Floats and Negative Margins, inspired by this message on css-discuss. By applying both position: relative and a negative margin to a floated element it is possible to pull it out of the flow of text in to the margin of the document. I have used a variant of this technique in the third revision of my SitePoint in CSS demonstration.
Funky stuff for css-discuss
I think I’ve kept quiet for long enough, so here are some details of the two projects I have alluded to. The first is a database driven mailing list archive for css-discuss. It has just gone in to private beta, so anyone subscribed to the css-discuss list should have an email with the URL, username and password requried to try it out. It has a pretty usable search engine and does some nice threaded views in messages—more importantly, it now contains all 9,000+ messages sent to css-discuss since it launched back in January 2002 (imported from the static Mailman archives). I’ve spent many hours surfing through the archives already and they are a wealth of useful CSS information.
[... 161 words]More CSS
Two more interesting CSS demonstrations—Bullet proof rounded corners and Breadcrumb nested lists. The rounded corners technique is very impressive—it solves a common CSS problem in a way that is durable, cross browser and, well, bullet proof. However, as Mark Pilgrim points out:
[... 165 words]Impressive CSS
Take a look at this page in Mozilla, view the source code and ask yourself “how on earth did he do that?”. It appears to involve very creative use of borders, possibly relating to the fact that a single border in CSS (at least in Mozilla and presumably in IE5/Mac as well) is actually a trapezium, not a line. Tantek Çelik was the project lead for IE 5 for the Mac (and the creator of both the Box Model hack and the High Pass Filter) so general CSS wizardry is to be expected.
LUMS in CSS
I’ve been messing around with CSS today, trying to convert this page to use standards compliant CSS and XHTML while keeping the overall look and feel. My efforts so far can be seen here—I’ve knocked the HTML file size down from 27KB to 7KB (although that doesn’t take the new external CSS file in to account) and it seems to work in Opera, Mozilla and IE on Windows. There is a slight issue at 800x600 (the breadcrumbs dissapear) and it looks terminally boring in Netscape 4 but on the whole it’s come out pretty well.
CSS selectors tutorial
Since it took me a while to find this page today, here is it for future reference. Westciv’s Guide to CSS Selectors is an excellent explanation of selectors, a key element of CSS. A good understanding selectors makes styling any part of a document possible with less code and more flexibility.
The CSS bug ring
Killer CSS link: Position Is Everything, part of the CSS bug ring. Big John on CSS-Discuss is probably the single most helpful individual I have ever encountered on a mailing list—he explains the most complicated (and simple) of solutions quickly, comprehensibly and in easy to understand terms. Position Is Everything is his collection of common but complex CSS browser bugs, complete with full explanations and any effective workarounds. The site links in to the CSS bug ring, a small ring of five sites providing more of the same. Truly an indespensable resource for anyone with an interest in CSS.
CSS could be so much more
Stuart Langridge discusses the nature of minimalism and CSS design, following a post by Sarabian. Stuart wonders if the current trend for relatively plain site designs is an interim period while we find our feet in the relatively new medium of CSS. I am sure it is—while I personally love the elegance and simplicity being showcase in many pure CSS sites, it’s not going to help convert die hard table fanatics. The annoying thing is that CSS is capable of so much—the power it gives us over background images should free designers to do things that were difficult or impossible with tables. I’m a rubbish designer, but I’m considering taking on the challenge of “interesting” CSS design in the not too distant future. If I can make things look good, anyone can ;)
More CSS demos
Chris Smith has an interesting set of CSS demos, including some attractive CSS buttons and an excellent example of a more complex layout. There’s a lot of interesting creative work going on with CSS at the moment as more developers start exploring the possibilities it brings—Eric Meyer’s css/edge is just the tip of the iceberg.
Pretty link on Kottke
In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than the link text. Today, Jason explains the technique and the thinking behind it.
Accessible fonts
Mark has out-done himself today with his long awaited coverage of relative font sizes. This is a notoriously tough topic (thanks to a whole bunch of strange CSS bugs and browser differences) but Mark carefully and comprehensively explains the various work arounds and CSS hacks needed to get the right effect with maximum accessibility.
SitePoint CSS guide
SitePoint have a good new article on CSS layout, which includes some useful tips on how to use position: float and position: absolute to create columns on a page, as well as some tips on providing Netscape 4 with only basic CSS rules and an example of a PHP browser detection script.
Dot leaders in CSS
Via Brett Merkey on CSS Discuss: Dot Leaders without Tables. Dot Leaders is a publishing term that describes the rows of dots frequently used in tables of contents to connect a chapter title with its relevant page number on the other side of the page. Brett’s CSS solution resizes elegantly to fit the page, and there isn’t a table in sight. Brett’s site provides an assortment of other useful CSS resources, including a very handy CSS cheat sheet.
Amazon with CSS
More CSS layout fun courtesy of Webdesign-L. This time Steve Clay has taken Anil Dash’s standards compliant Amazon and reworked it to use CSS for layout. Unfortunately it is likely to be a while before a major ecommerce site or portal decides to go with a CSS layout simply because of the continuing relevance of Netscape 4 users, but these examples demonstrate how close we are to being able to leave the era of nested table designs behind us.
Pure CSS popups
New example on Eric Meyer’s css/edge: Pure CSS Menus. This is very impressive stuff—it’s an implementation of those dropdown menus where you hover over an item and a new menu pops up, but it’s done in pure CSS without a line of javascript. Even better, the markup for the menu is a nested unordered list, so browsers that don’t support the advanced CSS needed will still display the menu in a meaningful way.
[... 113 words]CSS panic guide
Owen Briggs: CSS Panic Guide. Owen is the author of several excellent CSS resources (including Box Lessons and 264 font size screenshots) and this is his collection of links to CSS resources from all around the web. It covers every CSS reference worth knowing about and is an essential bookmark for anyone interested in using CSS for layouts.