css

CSS Speech Bubbles

Twitter front-end guy Nicolas Gallagher likes both CSS and speech bubbles enough to want them unadulterated by images and non-semantic markup. The lesson from his many examples is that it all comes down to an :after pseudo element that puts the little triangle in there:

.speechbubble:after {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

More examples on Nicolas’ site.

Helvetic Neue On The Web

CSS Tricks tips “better helvetica.” Guillermo Esteves explains that specifying font names in CSS is really about specifying font families: If you want to use a specific font face, you have to use font-family along with the font-weight property, calling both the PostScript and screen names of that face for backwards compatibility Which, for a […] » about 200 words

CSS Transformations in Safari/WebKit (and Chrome too?)

The cool browsers support radius corners, but Safari supports CSS transformations that allow developers to scale, skew, and rotate objects on the page like we’re used to doing in PostScript. And better than that, we can animate those transformations over time — all without any JavaScript.

Fire up Safari or Chrome and mouse over the examples here. The screencast at the top is from the menu on that page. There are, obviously, better uses for these transforms, but it’s easy to see it at work there. Also see this screencast. It shows a rendering error, but it’s a better use of the tech.

Now kick it up a notch with 3d transforms. They only work on the iPhone and iPod touch for now, but they’re quite nifty. See these examples: one, two. Paul Bakaus offers more detail, and Matthew Congrove offers this example of flick navigation.

Web Design Frameworks?

I’m a fan of the Sandbox WordPress theme because it does so much to separate application logic from design, and a few small changes to the CSS can make huge changes to the look of the site. I think that’s the idea behind Yahoo! Developer Network’s Grids CSS library. That is, well structured HTML allows very sophisticated styling. All you have to do is plug in your content. To wit:

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

That got Alister Cameron excited; he’s building a Sandbox-inspired, Yahoo! CSS-based WordPress theme he’s codenamed Vanilla.

Compress CSS & JavaScript Using PHP Minify

It was part of a long thread among WordPress hackers over the summer and fall, but this post at VulgarisOverIP just reminded of it: minify promises to be an easy way to compress external CSS and JavaScript without adding extra steps to your develop/deploy process. No, really, look at the usage instructions. (To be clear, the Vulgaris and Google Code versions are different, one derived from the other and backported to PHP4 compatible. Still, the concept is the same.)

Vulgaris reports a nearly 300% decrease in time to download, definitely worth the effort.

Fixing position: fixed In IE

It turns out the Internet Explorer doesn’t properly support CSS’s position: fixed. Google led me to the following:

The DoxDesk solution looks promising and simple, but I think bugs elsewhere in my layout are preventing it from working. It’s time to start again from scratch.