Posts Tagged “CSS”

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 note

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 note

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. Read note

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 note

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 note

WRKSHOP

I’ll be leading a workshop (for WRKSHOP) on responsive layouts & prototypes in Austin this April 4th. I didn’t feel confident as a web designer until I got comfortable with CSS layouts, so that’s exactly what... Read note

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 note

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 note

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 note

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 note

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 note

CSS Off

Gene Crawford from UnmatchedStyle asked Paravel to design a page for this year’s CSS Off competition. Over 5,000 front-end developers have entered to show off their skills by taking a PSD we designed and coding it... Read note

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 note

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 note

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 note

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 note

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 note

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 note

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 note

Non Hover

“Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.” Read article

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 note

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 note

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 note

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 note