7 hits1

1. CSS Design: Creating Custom Corners & Borders Part II

A List Apart, Tutorials, 12 KB, 1012 words

{Part II of a two-part series.}

Part I showed how to apply customized borders and corners to liquid CSS layouts. The technique works well, as long as your design uses solid background colors. But what if you want to use patterned or gradient backgrounds? In Part II, we'll extend the technique so you can do just that.

A design problem

We've received another directive from our hypothetical graphic designer of Part I. Encouraged by the results of our previous collaboration, he has attached a new sketch he wants us to incorporate. (That's it on the left. Four rounded corners against a tall, gradient background.)

"It's easy to change,...

continue reading ...

2. Mountaintop Corners

A List Apart, Tutorials, 12 KB, 1043 words

Either I've never bothered to try easier methods for creating rounded corners, or I am not afraid of having horrible eyesight in a mere five to eight years. Regardless, one of my most oft-used little image creation tricks has to do with mountaintops: want that corner a little rounder? Just add another peak. This will begin to make sense in just a moment.

Figure 1

Consider Figure 1. A boring, square box with a single pixel removed from each corner. When viewed at 100%, the absence of that one pixel creates the illusion that the box is ever-so-slightly rounded. It's one of those techniques that's been used since TRON was cutting-edge.

Fewer pixels = more...

continue reading ...

3. Sliding Doors of CSS

A List Apart, Tutorials, 29 KB, 3387 words

A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2's current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.

One of those cases is tabbed navigation. It's time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. You're most likely aware that CSS can be used to tame a plain unordered list. Maybe you've even seen lists styled as tabs, looking something like this:...

continue reading ...

4. CSS Roundup

MezzoBlue, Tutorials, 9 KB, 208 words

A CSS -2 menu bar, rounded corners vs. CSS-3, and Jigsaw trouble.

Seamus Leahy recently brought to my attention a CSS -2 menu bar he has been working on. Oh baby, that's nice.

Why does it suck that browser development has hit the wall? Because the above example won't be practical on production sites until, oh, 2008. If we're lucky. §

A demonstration of CSS–based rounded corners. Another one. A third, with borders.

CSS–3 seeks to address this obvious need for rounded corners via the border-radius property. For the time being, we're stuck with presentational hacks that more or less defeat the purpose of CSS.

Why does it suck that browser...

continue reading ...

5. Onion Skinned Drop Shadows

A List Apart, Tutorials, 25 KB, 2054 words

Editor's Note: The techniques demonstrated in this tutorial are not for everyone. The design method works its magic by nesting divs that have no semantic or structural value. If that bothers you (and there are good reasons why it might), this is not the tutorial for you. On the other hand, if you wish to create visual effects that expand and contract to fit any object, require no image manipulation, and render the same across all browsers, then "Onion Skinned Drop Shadows" may be just what you've been looking for.

Onion skinned drop shadows?

Yes, onion skinned. Animators use onion skinning to render what is impossible to see otherwise: a...

continue reading ...

6. LMT Links

Learning Movable Type, Links, 43 KB, 2483 words

by Category | by Date


Getting the most out of MT-Blacklist - MT-Blacklist/Comment Spam Clearinghouse: Getting the most out of MT-Blacklist Birdhouse notes on Comment Spam - Why this web host is forcing comment registration Blacklist to Mod Security - by Peter Wood Brad Choate: SpamLookup - anti-spam plugin Interview with a Comment Spammer - The Register's interview with a blog comment spammer. MT-Approval Plugin - Prevents comment spam from spam bots MT-DSBL Open Proxy Comment Filter - from Brad Choate MT-Moderate - Plugin for moderating trackbacks and comments from Chad Everett Mod Rewrite to Block Bot Spam - Mod Rewrite method to divert comment spam bots to a 403...

continue reading ...

7. Panes, 3 Column

StyleMonkey, Templates, 20 KB, 409 words

A very simple but elegant design featuring a dark background with lighter "panes" for the content areas.

Click image for a full size sample. (opens in a separate window)

Black Cherry Coffee Dark Sage Dark Teal Dusty Rose Jade Plum

Posted by The Style Monkey at January 9, 2005 11:24 PM

continue reading ...


You want to post some comment? Please use the announcement post on the Movable Type Weblog.

If you want to give some feedback concerning a specific query, please use the feedback button that is shown after a search has completed.

mgs | September 27th 2005