Here’s a quick little tip that might come in handy for someone. I’m working on the mobile version of a magazine’s site which will be targeting WebKit browsers. The design I’m implementing calls for a list of comments that alternates the display of the commenter’s name (and timestamp info) left and right. This can be done with a single image, use of the nth-child(even) CSS selector, and -webkit-transform: scaleX(-1). The fiddle here uses jQuery, but I’m using Zepto.js (mostly jQuery-compatible syntax in just a couple of kb) for the actual implementation.
- For bonus points, the comment arrow could be implemented with a small canvas to remove the need for an image at all.
- AFAIK, there doesn’t seem to be an agreed upon microformat for comments.
(Tumblr users need to click through to view the fiddle)
I’m excited to announce that I have launched a redesign of my business/portfolio site Black Ant Media. I started in on a redesign about a year ago and never finished it. They say if you’re too busy to update your own site, that’s a good thing. But when you’re in the business of selling your supposed expert services, not having any work to view is an embarrassment.
I had been wanting to play with MooTools for a while now, so I took the opportunity to use it on this redesign. I came away from the experience feeling like PHP is to jQuery (everyone structures their code differently) as Rails is to MooTools (established OO patterns that pretty much everyone follows). The MooTools Fx classes offer some of the smoothest animations I’ve come across. There is still much I want to learn about this framework, but I’m really impressed so far.
I’m using the lightweight (no database) Stacey CMS for the portfolio. Since this is a single-page site, I decided to load all of the project information dynamically from Stacey using AJAX calls and fetching JSON data.
I had a fun time working on the contact form as well. For WebKit browsers, the form flips around when you submit it turning your message into an envelope that gets dropped into a slot. On the server side, I use Akismet to check for spam submissions. Please send me a message if you’d like to try it out.
I few other buzzwords I incorporated: HTML5, Sass, TypeKit, Modernizr, hCard microformat, and parallax background scrolling.
I still have a bunch of cleanup/refactoring to do and I need to make a mobile version, but I’m really pleased with how it has turned out so far.
I rarely buy web design books (preferring to absorb tips and techniques online), but my credit card comes out when Andy Clarke publishes something. Hardboiled Web Design looks like another work of art with minimal nonsense.
I’m a little embarrassed to say that I had never heard of simurai until today. This guy (or girl?) is doing some amazing experimental work with CSS3. This refractive glass text effect is just one example. Also don’t miss simuari’s delicious looking CSS3 buttons.
 Found by spelunking through fave-star.js
Inspired by the recent Responsive Web Design ALA article, Jon Hicks builds a brilliant fluid site design for his blog. The structure dynamically switches between a one, two, three, or four column layout depending on browser width.
Animated Pure CSS Twitter Fail Whale - the practicality to work ratio is very low here, but overall awesome level is way high.
Here’s a quick tip for creating a subtle depressed link effect as shown above. I’ve been using this type of UI treatment on a current project in place of a heavier tabbed interface. I’m indicating the currently selected link with just a few lines of CSS. Well, Sass actually - you can reconstruct the CSS easily enough.
ul#participant-nav :float right ul#participant-nav li :display inline ul#participant-nav li a :display block +rounded(15px) :float left :line-height 24px :padding 0 1.4em :color #333 :margin-left 0.5em ul#participant-nav li a:hover, ul#participant-nav li a.active +box-shadow(inset 0 1px 0 #b2b2b2) :background-color #dbdbdb
And here are the Sass mixins being used:
=rounded($radius: 4px) :border-radius $radius :-moz-border-radius $radius :-webkit-border-radius $radius =box-shadow($attributes: 2px 2px 3px #888) :box-shadow $attributes :-webkit-box-shadow $attributes :-moz-box-shadow $attributes
As a bonus, here’s the Sass for the “Add Participant” button that’s shown:
.small-button :display inline-block +rounded(15px) +box-shadow(1px 1px 0 #aaa) :height 24px :line-height 24px :padding 0 1.4em :color #333 :font-size 11px :font-weight bold :background-color #eee :background-image url(/images/bg/small_button_gradient.png) :background-repeat repeat-x :border solid 1px #ccc
The background image is just a grey-to-transparent (bottom-to-top) gradient that I can use on any colored button, giving it a subtle shading. I’ll probably convert this piece to CSS3 gradients, but this technique is pretty darn simple.
Anyhow, when the button is clicked, I add a “depressed” class and show the new participant form:
.small-button.depressed +box-shadow(inset 0 1px 0 #b2b2b2) :border-bottom none :background-color #dbdbdb :background-image none :-webkit-transform translateY(1px) :-moz-transform translateY(1px)