Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame. .avatar-frame{border: 2px solid #c7b89e;} .avatar-frame,.avatar-frame img{ width: 50px; height: 50px; -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera… Read More
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… Read More
The last version of this site lasted just under a year. That may seem like a short amount of time until you consider how quickly things change on the web. @font-face usage has been fortified by services like Typekit & Fontdeck, CSS3 & HTML5 are popping up everywhere, and with the release of the iPad, multi-touch technology is drastically changing web design. My goal has been to cut out the extra divs, widgets and doodads so browsing is more fun for you and posting… Read More
Earlier this year I was fortunate enough to become acquainted with Brian Hoff through DesignSwap and Dribbble. After being really impressed with his redesign shots for The Design Cubicle , I was thrilled when Paravel got the call from Brian asking us to jump on board to provide the HTML & CSS. Working with Brian has been a privilege and a joy. So much so, that I couldn’t help but spend some free time taking his beautiful masthead design and translating it into CSS…. Read More
With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. That being said, here is another experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this. Here is the webkit… Read More
In another round of CSS3 experimentation, I wanted to see if it was possible to sequentially transition the opacity of 3 or more elements via CSS without having them all begin fading at once. While it seems painfully obvious now, I wasn’t aware that the transition-delay property existed. It’s only compatible with webkit browsers like Safari or Google Chrome at the moment.
