CSS Columns
I frequently use CSS multi-column layout (i.e. column-count: 3) for basic list items limited to words or phrases (like my search page tags list), but I’ve always struggled to make the property work with more complex... read more
Posts Tagged “CSS”
Viewport Padding
I was inspecting Ethan’s site the other day (as totally normal and well-adjusted people do) and realized he was using one of my favorite tricks where viewport units were combined with em units via calc() for... read more
Native CSS Variables
I’ve been using Sass variables for quite a while, so I’m interested to see how native CSS variables (AKA CSS custom properties) compare to preprocessor variables. W3C Info Can I use info MDN intro / demo... read more
BreakpointTester
I’m loving BreakpointTester. It’s a bookmarklet that scans your CSS/breakpoints and displays them all at once. It shows not images, but actual web pages you can scroll, navigate, and even web inspect. Brilliant! read more
Fast Track to Sass
Steve Drucker from Fig Leaf Software recently published Fast Track to Sass. The book uses my CSS Zen Garden Apothecary Theme as the example site—transitioning it from CSS to Sass. Thanks, Steve! read more
Brent Jackson’s Colorable & Shade
Brent Jackson (http://jxnblk.com) has been building some really great tools recently. Colorable helps you test color combinations/palettes with WCAG accessibility guidelines in a visual way. He’s also built a text version with a crazy-simple UI. And... read more
CSS Zen Garden #221
There’s a lot to love about Andrew Lohman’s CSS Zen Garden #221 theme, Mid-Century Modern. In addition to the type, color palette, and imagery, I am particularly fond of the layout itself. Each section flows nicely... read more
Flexible Foundations
Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations. This concept is nothing new, having been prophetically outlined in Jon Allsopp’s 2000 article, A Dao of Web... read more
Keeping Current With CSS
I recently got a question about CSS experimentation from Paddy O’Hanlon, and I thought it warranted a quick post. @TrentWalton I’m reading your interview in the new Insites Book. You mention testing out new CSS. Where... read more
Icon Fonts
Chris Coyier’s Icon Fonts are Awesome demo pushed me up to the edge, and seeing how fuzzy image icons look next to ultra-crisp retina display text threw me over. Now, I’m testing out an icon font... read more
CSS Column Breaks
I’ve been working on a responsive project with lots of content that will need to be updated frequently. Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything... read more
Vertical Media Queries & Wide Sites
I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px... read more
New Adventures Workshop
The time for New Adventures is nearly upon us! I’ve been building slides for my talk as well as prepping materials for my workshop on controlling web typography. The plan is to spend some time exploring... read more
Things Still Missing From CSS
Molly Holzschlag wrote a great article for .Net Magazine outlining seven things still missing from CSS. She gets into web fonts on #5, which is my favorite. I particularly liked this point: Fine control remains elusive... read more
Netmag: Texturizing Web Type
I recently wrote a tutorial on texturizing web type for .Net magazine (Issue 221). One of my favorite CSS properties for text, mask-image, is covered in-depth from creating a semi-transparent texture in Photoshop to implementing it... read more
CSS Hyphenation
After reading this Fontdeck Blog post a few of weeks ago, I dropped an exciting new CSS property into the stylesheet for this blog. Wanting to test hyphenation on all my posts and pages, I applied... read more
Content Choreography
The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past. Media-queried responsive & adaptive sites afford us the ability to re-architect content... read more
Converge SE 2011
I’ll be doing double duty this June at Converge SE, teaming up with my Paravel cohorts, Dave & Reagan, for a workshop called Designing with Type on Friday, and speaking about Controlling Web Typography on Saturday.... read more
Controlling Web Typography
Lettering.js was built to solve a problem. As web typography improves, web designers want the same level of control print designers have. Just as we’ve moved beyond Helvetica and Times New Roman, we’ve begun to think... read more
Lettering.js & Twitter’s Year in Review
We were thrilled at the Paravel office to see such a great use of Lettering.js on Twitter’s 2010: Year In Review site- specifically on the headline for The 10 Most Powerful Tweets of 2010. Josh Brewer,... read more
RGBa & HSLa CSS Color
In certain situations, RGBa (red, green, blue, alpha) and HSLa (hue, saturation, lightness, alpha) color values can save the day. It’s widely supported in Chrome, Safari, Firefox, Opera, and IE 9, and when working with box-shadow,... read more
CSS Box-Shadow:Inset
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... read more
Fun With CSS Text-Shadow
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,... read more
Lost World’s Fairs
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... read more
Don’t Make Me Wait
Page speed and load times are the foundation for a positive user experience on the web. Let’s face it, if your page fails to load in time, all the effort put towards information architecture, content strategy... read more
CSS3 Border-Radius & Rounded Avatars
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... read more
CSS3 Multi-Column Layout & Column-Count
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... read more
CSS Webkit Appearance
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... read more
Safari Extension: Live CSS Editor
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,... read more
CSS Text-Rendering
This morning I saw a couple of tweets from @seangaffney and @maxvoltar about the CSS text-rendering property, which is in the W3C Working Draft. Aesthetically Loyal has outlined the differences in kerning pairs and browser support... read more
Typekit, @font-face & This Site
Since launching and outlining the process for the latest version of this site, I’ve had a bit of a type adventure going on. After fielding a variety of questions on the subject, I thought it’d be... read more
Trimming The Fat
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... read more
TDC in CSS3
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... read more
CSS3 Background-Clip & @Font-Face
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... read more
CSS3 Transition-Delay
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... read more
Background-Clip: Text
I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose... read more
Position Absolute
Put on your critical thinking caps… In web design there are very few absolutes. There are multiple ways to markup pages, limitless directions a design can take and no single right or wrong way to run... read more
A Fresh Coat of Paint
Update: Surprise—This post is now outdated & is about a previous version of this site. To learn more about what I’ve got cooking now, click here. It may not look like it, but this version is... read more