Skip to main content
CSS is fun and cool and I like it.
Article

Having a Little Fun With Custom Focus Styles

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself.

So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab … Read article

Link

The div that looks different in every browser

Almanac

outline-offset

The outline-offset property in CSS offsets a defined outline from an element's border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and it will not affect the position or layout of surrounding elements.… Read article

Article

Text Stroke: Stuck In The Middle With You

There is a non-standard way to stroke HTML text (SVG has a standard way). It's not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example:

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

And she's right:

This CSS isn't fully-baked or fully-supported. But it's good enough to be used today, especially since it's simply offering a visual enhancement. It's not mission critical

Read article
Article

Adding Stroke to Web Text

Fonts on the web are essentially vector-based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, we … Read article