14 hits1

1. CSS Drop Shadows II: Fuzzy Shadows

A List Apart, Tutorials, 16 KB, 1483 words

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it.

We thought wrong.

The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. Most notable among the latter was Phil Baines' method for keeping the markup simple when dealing with paragraph drop shadows. We are indebted to him.

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike...

continue reading ...

2. CSS Drop Shadows

A List Apart, Tutorials, 17 KB, 1525 words

They're the corkscrew in every graphic designer's Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they're not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends - and static images with a fixed background effect are not very adaptable.

But what if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? That can expand as the content of the block changes shape? Compatible with most modern browsers? With better results for standards-compliant...

continue reading ...

3. yDSF - Robust CSS Drop Shadows

Six Apart Pronet Articles, Tutorials, 13 KB, 882 words

Drop shadows are cool, but adding them to elements of a web page can be a pain. You can fiddle with background images, tables, pure CSS solutions, Internet Explorer PNG limitations, or fixed single-use shadows tied to an image and a particular background.

The latest release of TypePad has a new popup (or flyout) interface element which presents the user with a set of options or an expanded view of an object when clicked on. The flyouts are similar to the location bubbles used in Google Maps. They have soft alpha-blended drop shadows that scale with the size of the box. The drop shadows are implemented in valid XHTML and CSS, with no CSS hacks or JavaScript. We...

continue reading ...

4. 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 ...

5. Making Drop Shadows with CSS

Six Apart ProNet Weblog, News, 14 KB, 161 words

While creating our recent updates to TypePad, we needed to be able to create simple drop shadows for elements of our user interface. Randy Reddig, one of our engineers here at Six Apart, created a simple system that can be used in any CSS layout, and now he's written up a ProNet article about the technique so you can make use of it in your own applications and sites.

yDSF - Robust CSS Drop Shadows describes the way it works, offers up a sample page showing some (over)use of the technique, and documents how yDSF works with all modern browsers while gracefully degrading on older systems. If you're a TypePad user, you can already see it in action just by using the new comment and...

continue reading ...

6. Text Wrap

Learning Movable Type, Tutorials, 40 KB, 2953 words

Updated March 23, 2005

Once you are uploading images to your MT weblog with ease, you might on occassion want to wrap text on either side of the image, like so:

Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia...

continue reading ...

7. Suckerfish Dropdowns

A List Apart, Tutorials, 14 KB, 1348 words

"DHTML" dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.

Meet the markup

To start, we should use the best method for defining a navigation menu - a list. For this example, we will work on a simple HTML unordered list. {Line wraps are marked ». –Ed.} <ul> <li>Sunfishes <ul> <li><a href="">Blackbanded» sunfish</a></li>...

continue reading ...

8. MT3.2 - Bare Essentials Templates

Learning Movable Type, Tutorials, 25 KB, 1434 words

This tutorial is written by LMT guest author Chris Vannoy of Circadian Rhythm.

Movable Type's default templates have always been intimidating things to those new to the system, and with Six Apart's decision to standardize their template structure across all three of their blogging platforms, TypePad and LiveJournal being the other two, they've become a lot more intimidating in version 3.2 of Movable Type.

This standardization is a great idea if you are a web designer already familiar with the intricacies of Cascading Style Sheets (CSS). The standardization means that, assuming users stick to the default templates, you could design one stylesheet that would work on sites on all three...

continue reading ...

9. Better Listings Pages Throughout Movable Type 3.2

Six Apart ProNet Weblog, News, 22 KB, 1234 words

Except when you're writing or editing entries, much of the time spent in Movable Type is in managing the listings of entries, comments, TrackBacks, authors, or other items in the system. In past versions, listings could be inconsistent, with listings offering varying degrees of control, and the arrangement of information on some pages being frustrating. Worse, when the same type of information was listed in two different places, it wasn't always the same. For example, the comment listings page and the display of comments on an individual entry worked in completely different ways.

Every listing page improved

With Movable Type 3.2, we've made some massive improvements to the way that...

continue reading ...

10. MOSe Menus

MezzoBlue, Tutorials, 13 KB, 812 words

When in doubt, reload.

I introduced my idea of MOSe, or Mozilla/Opera/Safari Enhancement about four months ago, with my Zen Garden submission mnemonic. It's time to take it further.

With a strong nod to Eric Meyer's Pure CSS Menus, the latest tweak to mezzoblue adds an opaque CSS-based menu system to the global navigation system. That is, not a line of Javascript was used to construct these. Gecko browsers and Safari love them, Opera 7 has a few issues I may leave as an exercise to Opera Software to resolve, and all browsers that can't handle them (you know I'm looking at you, Internet Explorer) have a fallback.

By logically structuring the bits and...

continue reading ...

11. Cross-Browser Variable Opacity with PNG: A Real Solution

A List Apart, Tutorials, 22 KB, 2655 words

Periodically, someone tells me about the magic of PNG, how it's the ideal image format for the web, and that someday we'll all be using it on our sites instead of GIF. People have been saying this for years, and by now most of us have stopped listening. Sadly, flaky browser support has made PNG impractical for almost everything; but now, with a few simple workarounds, we can finally put one of its most compelling features to use.

PNG? What?

The Portable Network Graphics, or PNG (pronounced "ping"), image format has been around since 1995, having cropped up during the now long-forgotten GIF scare, when Compuserve and Unisys announced they would begin charging...

continue reading ...

12. ProNet: July 2005 Archives

Six Apart ProNet Weblog, News, 89 KB, 9750 words


Dynamic Publishing support for PostgreSQL and SQLite

It's a common refrain for us to talk about Movable Type's wide platform support, but we really are committed to making sure Movable Type's full power is available on the widest variety of platforms. It's an investment that takes a lot of care and attention, but we think it's well worth the effort.

For example, take databases. Movable Type has long supported multiple databases, with MySQL and Berkeley DB being among the most popular. But two mature, popular open-source database technologies that a lot of our users have requested have also part of our platform support for over two years: PostgreSQL and...

continue reading ...

13. Vespaway, the new Vespa Blog

Six Apart ProNet Weblog, News, 15 KB, 245 words

Courtesy of Steve Rubel comes work of Vespaway, the cool new blog from popular scooter maker Vespa.

Though the scooters are already enormously popular, Piaggio USA, which makes Vespas, is making a big bet on blogs to help sustain and grow the enthusiasm around the brand. And there's another VespaBlog on the way, with good reason according to

Piaggio USA feels blogs are an ideal way to connect with Vespa brand loyalists and encourage them to become online evangelists. It is an extension of the scooter clubs that have existed offline for years. One reason is that U.S. scooter buyers are heavy online users. According to internal Piaggio USA research, a full 65% of...

continue reading ...

14. Updated Alternate Template Collection

Eat Drink Sleep MT, Tutorials, 18 KB, 417 words

I've updated the Alternate Template Collection with Movable Type version 3.2 compatibility.

To summarize, edit_entry.tmpl and preview_entry.tmpl have been updated. upload.tmpl and upload_complete.tmpl work with 3.2 as-is. list_blog.tmpl is no longer needed because 3.2 incorporates the change I made.

Complete information - including how to use these alternate templates - on the templates can be found on the Alternate Template Collection page.

If you found this article useful, please consider supporting this site through a donation.

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