You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. This property is compatible with Webkit (Safari & Chrome), Firefox, Opera, and IE9, so there’s no reason to hold off... Read more
I used 100 text-shadows to make the graphic below happen. Sure, it’s excessive, ridiculous and just plain silly. But why, at times, can’t the web be all of those things? I’m all for sensible, well-reasoned CSS, but let’s keep things in perspective. We’re not surgeons. We can experiment without causing anyone bodily injury. So go! Have a blast! Pull up your localhost and build something wonderfully useless! Click... Read more
IE9 public beta is here, and I’ve had the fair fortune to be recruited by The Friends of Mighty to showcase its support for the Web Open Font Format (WOFF). A while back, Jason Santa Maria called to see if I’d be interested in joining him on a team with Frank Chimero & Naz Hamid. After confirming my participation, as well as the fact that this wasn’t a... Read more
One thing I’ve revisited a number of times since we launched the latest installment of The Many Faces Of... for the Goonies is the Chutes and Ladders style iPad Game. Reagan designed it and Dave built it with jQuery, JSON and CSS3. Similar to the way iBooks saves lots of shelf space on books, I wonder if the iPad, or a larger coffee table version, could save drawer... Read more
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;}... 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... Read more
