Download options:
FontShop has done a lot for web fonts. Their latest contribution, FontFonter, lets you test an ever-expanding set of available fonts on any site you wish. Aside from being the easiest & lowest commitment way to test web fonts, it will come in handy here at Paravel, letting us mix & match web type on the fly.
While I don’t think it overrides the font settings on a site currently using @font-face, it’s really fun to see what FF Dagny Web would look like on Dribbble, or how Mark Boulton’s blog would shape up with FF Meta Serif Web. Got a favorite FontFonter experiment? Let me know…
I use the column-count & column-gap property on the search page of this site to break my Tags list into 4 columns. Because the content is dynamic, I couldn’t just hard code each column, and I didn’t want to waste kilobytes on running a WordPress plugin to achieve an effect that was possible with a single line of CSS. Currently, only firefox and webkit browsers supports this feature and they all seem to do it differently. I’ve noticed that Mobile Safari, Safari and Firefox each render the exact same column-count CSS differently.
My HTML is simply a dynamic unordered list and my CSS looks like this:
Note: the Opera and universal code is future proofing & wishful thinking.
.tag_list ul {
-webkit-column-count: 4; -webkit-column-gap:20px;
-moz-column-count:4; -moz-column-gap:20px;
-o-column-count:4; -o-column-gap:20px;
column-count:4; column-gap:20px;
}
Admittedly, this property needs quite a bit more hashing out before I’d recommend implementing it on the home page of a client site. That being said, I’m happy to continue to use this for my Tags list. It’s lightweight, efficient and a constant reminder that the web is ever-evolving.
I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay to search / submit buttons, which also got rounded corners.
After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI. I added this code for comment & search forms to retain the basic style I defined in my CSS: -webkit-appearance:none;
There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.
Yesterday I was cleaning up my hard drive and migrating some design assets to Dropbox when I came across a few PSD files for a version of the Paravel site from over 6 years ago. I’m not sure what I was thinking, but I got such a kick out of it I figured I’d upload a crop as a Dribbble shot and invite others to do the same. Seeing what fellow designers were doing 5 and 10+ years ago has been great fun. It’s also been pretty interesting to sort through folders of Paravel’s early work…
Much of it doesn’t exist anymore. Gone. Vanished. All that hard work, thinking, stressing… poof. It’s a nice reminder of what’s important, and the reality of the ever-evolving web. A lot of this junk is just temporary. – Dan Cederholm
Since downloading Safari 5, I’ve been incorporating some new extensions into the ol’ workflow. While I typically use CSSEdit to pick apart code in-depth, Jeremy Hubert’s Live CSS Editing Extension allows Safari users to make quick, experimental edits on the fly. Download the extension, fire it up and you’ll be able to turn the background of my site pink!
