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 CSS hyphenation to all paragraphs: p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } During a day or so of road testing I noticed some pretty funky widows, so I fine-tuned my... Read more
Since upgrading to Lion I’ve noticed a font rendering issue with Safari 5.1. Sites were randomly displaying some web-safe and web-served fonts with the Last Resort font, AKA “Block-A Characters.” These can appear for a variety of reasons, but I was getting them because Safari 5.1 has a compatibility issue when rendering fonts for those who use 3rd party font management apps. I use Font Explorer and love... Read more
After my last post on mask-image, I needed to create a few more examples for an upcoming tutorial. I had to abandon this one because it wasn’t straightforward enough—though I quite like how it turned out, so I thought I’d share. Remember this property is sadly webkit-only at the moment. Ground Control Note: If you’re on any responsive width other than 100% (full), the masked shadows won’t line up.... Read more
I recently wrote about Controlling Web Typography and focused on CSS pseudo selectors & down-to-the-letter control. As a web designer, I want the same level of control over type that print designers have, including texture. There are currently 2 webkit properties that I’ve grown to love and hope gain more traction & browser support. My favorite would have to be background-clip:text, but it currently degrades poorly. A close... Read more
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
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