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 stylesheet to only target narrow columns, like the ones on my info page, which is a scenario where CSS hyphenation really comes in handy. Overall, I’m not sure what to think about fluid columns and widows—they’re bound to show up at varying widths. I try to avoid them at my defined max-width, but have plans to test the wp-Typography plugin in a responsive setting once we perform some server upgrades for the blog (taking our old Media Temple DV from php 4 to 5). I’ll be sure to report back when we get there.

Update (9/21/11): I’m happily using the wp-Typography plugin to prevent widows now that our servers have been upgraded. Things seem to be reflowing smoothly in my responsive layout. This plugin has loads of features, hyphenation, spacing control, character replacement, etc., that I’ll be experimenting with further soon.

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 it, but after my old trick of clearing font caches proved unsuccessful, I took to twitter and got some good advice from Jason and Matt. I followed the steps outlined at this CNET post and got an immediate fix. Hooray! Web fonts and font management are still a thing!

Note: If you’re on any responsive width other than 100% (full), the masked shadows won’t line up. That got me thinking: wouldn’t it be cool if you could scale masked images like you can background images? Maybe it’d look a little something like: mask-image-size:100%;

Thanks to The League of Movable Type and Tyler Fink for providing Ostrich, the font used in the design.

]]> http://trentwalton.com/2011/06/01/more-css-mask-image-text/feed/ 6 http://trentwalton.com/2011/05/19/mask-image-text/ http://trentwalton.com/2011/05/19/mask-image-text/#comments Thu, 19 May 2011 16:43:32 +0000 Trent http://trentwalton.com/?p=4398 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 second is mask-image, which you can apply to text.

In the example below I’ve implemented a subtle grey flecked texture effect over the white text. Hover over the box to see how it will degrade in non-supporting browsers. Note: because this is -webkit only it’ll only show up in those browsers.

Here’s the CSS code with all the structural bits trimmed out:
.mask-box h3, .mask-box p{
-webkit-mask-image: url(/path/to/mask.png);
-o-mask-image: url(/path/to/mask.png);
-moz-mask-image: url(/path/to/mask.png);
mask-image: url(/path/to/mask.png);
text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);}

In most cases, I prefer subtle amounts of texture / graphic applied to text. The best example of a well used mask-image for type I’ve ever seen is this event page designed by Matthew Smith of Squared Eye and built by Michael Meyer. The “A Night for Adoption” headline is selectable and it’s got rays of sun shining through. Magical!

When background-clip:text and mask-image are combined with web fonts, enhanced CSS pseudo selectors, and CSS transforms, we’ll soon be all out of reasons to resort to image replacement for beautiful type on the web.

When building Camp Wapo, we used inset on the action item buttons.

Lettering.js has an inset hover state on each of the linked images.

The feature box on A Book Apart has a nice vignette shadow framing the div.

When logged out, the Rdio homepage employs inset shadows on their features list.

Now, what about images? It’d be nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content. For example, if you inset a shadow you probably wouldn’t want it overshadowing the text within.

A reasonable way to circumvent this issue would be to wrap the image in a div or a span element and employ some basic z-indexing. See the example code provided below. While this method gets the job done, I wonder if it’d be sensible to update the CSS Working Draft to allow for inset shadows to be displayed on top when applied directly to an image. Despite the inconsistency, it seems intuitive to me and would ultimately lead to cleaner, simpler markup.

<div class="vignette">
<img src="mustang.png" alt="mustang" class="car_photo"/>
</div>
.vignette{
box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
}
img.car_photo{
z-index: -1;
position: relative;
}

.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 10.5, IE 9 */
/*-moz-border-radius: 30px; Disabled for FF1+ */
}

I love this solution. It yields rounded avatars with no additional images or scripts loading, just an extra line of code. The -moz prefix is disabled here because Firefox doesn’t support this, though they really should. CSS for -moz-border-radius of course works for the div, but not the img. On the bright side, it degrades quite nicely into a square avatar with a 2px border.

Opera is another matter altogether. Because it utilizes the general ‘border-radius’ CSS and doesn’t apply it to an img, Opera displays a square image with a rounded border. I’d say this is a great example of where browser-specific prefixes come in handy. It’d be nice to disable this for Opera until it works.

My HTML is simply a dynamic unordered list and my CSS looks like this:
Note: the Opera and universal code is future proofing & wishful thinking.
.tag_list ul {
-webkit-column-count: 4; -webkit-column-gap:20px;
-moz-column-count:4; -moz-column-gap:20px;
-o-column-count:4; -o-column-gap:20px;
column-count:4; column-gap:20px;
}

Safari / Chrome shuffles an extra item into the last column & hides my last tag.

Mobile Safari does better, showing all tags & arraying them in left-hand columns first.

Firefox performs fairly well, filling out each column from left to right.

Opera doesn’t currently offer support for column-count.

Admittedly, this property needs quite a bit more hashing out before I’d recommend implementing it on the home page of a client site.  That being said, I’m happy to continue to use this for my Tags list.  It’s lightweight, efficient and a constant reminder that the web is ever-evolving.

After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI. I added this code for comment & search forms to retain the basic style I defined in my CSS: -webkit-appearance:none;

There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.

Similar to Kyle Meyer’s experiment, I noticed a significant improvement and added the property to my body CSS for this site.  Overall, type looks much tighter and successive capital letters, like “CSS”, seem more evenly spaced.  Firefox uses optimizeLegibility by default for font sizes 20px or larger and I agree with Paul Irish’s thought that Webkit should do the same.

.itried {font-size: 50px;}
.css {font-size: 206px;letter-spacing: 5px;line-height: 1;}
.itworked {
font: italic 60px/0 "bistro-script-web-1","bistro-script-web-2", cursive;
text-transform: lowercase;
margin-bottom: 20px;
margin-top:20px;
}
.hoo {font-size: 258px;letter-spacing: 5px;line-height: 1;}
.view {font-size: 57px;margin-top: -15px;}
.hoo, .css {text-shadow: #4a8d97 3px 3px 0;}
.css:after, .hoo:after {
background: url(../img/crosshatch.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
display: block;
z-index: -5;
}
.css:after {content:"CSS Three";margin-top: -198px;margin-left: 16px;}
.hoo:after {content:"Hooray!"; margin-top: -250px;margin-left: 18px;}

.line-left, .line-right {
border-bottom: 2px solid #2a4f54;
width: 160px;
display: inline-block;
margin-bottom: -30px;
}
.line-left {float: left;margin-top: 36px;margin-left: 15px;}
.line-right {float: right;margin-top: -34px;margin-right: 15px;}

Some of the class styles may seem oddly titled. I sourced them from the first few letters from each line of text. At the moment this will only work in webkit, so fire up Safari or Google Chrome and check out the example.

Update: Thanks to Jess Brown’s recent contribution via Dribbble, I’ve been able to revise the code, retaining the double shading effect without having to resort to coding the same text twice.