Ellipsis Truncation in CSS
Mint’s Justin Maxwell describes a cross-browser solution for trimming long strings using pure CSS (and a Firefox binding). How did I not know about this? Already implemented in one project today.
A transmission from the deep south.
Mint’s Justin Maxwell describes a cross-browser solution for trimming long strings using pure CSS (and a Firefox binding). How did I not know about this? Already implemented in one project today.
Useful plugin by David DeSandro:
Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Nice rollover effects on his site, too.
A collection of experiments by designers and developers using HTML5’s Canvas element. (via CSS Beauty)
A very promising resource of hand-picked typefaces with free commercial-use licenses, perfect for embedding using CSS’s @font-face declaration. Plenty of options in the handwriting, display and grunge sections. Wanted: more good serifs and slab serifs. (via Tobias Otte)
Matthew James Taylor with a beautifully simple trick to horizontally center menus or tabs. I’ve seen a few other solutions lately but they’re full of crazy browser workarounds. His blog post explains in a few easy visual steps exactly how it’s done. (via Mat Wiseman)
Robert Songsmith just got a facelift, courtesy of yours truly. What do you get when you cross Cure lyrics with a Microsoft Songsmith backing track? Pure audio gold, that’s what. Calling for submissions now!
Love what Mike’s done with this, some really clever handling of audio posts to (mostly) hide the really sorta ugly player component. Who’s got a submission then? Topherchris surely…
Jarred Bishop has made his new Tumblr theme available for use. It’s partially inspired by the theme Wilson Miner built for his wife’s site, and includes nice touches such as lightboxing for oversized images, keyboard navigation and Twitter integration. Smoking hot.
Here’s a few tips for anyone who’s installed my recently released Esquire Theme for Tumblr, inspired by the typography and design in the US edition of Esquire magazine:
To enable Tim Van Damme’s lovely social media icons you’ll need to edit the theme’s HTML code. If you installed the theme from the Tumblr Garden, go to the Customize page and under Theme select Use Custom HTML to reveal the theme code. Find the commented block that begins with check the box to “Show social media links” in the Appearance settings, then enter the relevant usernames for the sites you’d like to display.<!-- and ends with -->. Remove the first and last lines (plus the two lines of description at the start), then remove all of the services you don’t want to include on your tumblelog by deleting those lines. Edit the URLs of the services you retain so they point to your respective profile pages. Save changes.
To highlight your own notes on a permalink page, find both occurrences of enter your Tumblr username in the Appearance settings for the theme (new in version 1.5)..tumblelog_matthewb in the theme code and change my username to yours (leaving .tumblelog_ in place)
If you’d prefer the sidebar to scroll along with the rest of the page, change the CSS positioning parameter for #sidebar from fixed to absolute. You’ll find this declaration near the top of the CSS block in the theme code.
The best place to add Disqus comments is immediately before (or after) the Disqus comments are natively supported as of version 1.5. Enter your Disqus shortname in the Appearance settings for the theme.{block:PostNotes} code block. You only need to add it once to the theme, not individually for each post type.
Most of the theme’s colours may be customised in the Appearance menu within the Customize section of the Tumblr Dashboard (for example, Jess in Hot Pink).
Thanks to everyone who’s promoted the theme or sent feedback.
Written and designed by Matthew Buchanan. Colophon. Please give credit. Email