Category Archives: CSS

Three options for sharp, responsive logos

Web developers and graphic designers don’t like to see blurry logos, like we often see on retina displays. Generally, we will “fix” a unsharp logo by serving a PNG that is twice the resolution. This is a decent solution, but not an ideal one. Rasterized graphics will always be resolution dependent. Logos, in particular, wants to be what they are: vector, or line art. Here are some suggestions for making a logo crisp and responsive:

1. Icon Font

If you’re already using an icon font, and your logo is a single color, and it’s not too complicated… just add your logo as a glyph to the font. This is my favorite solution because it’s *free*; you don’t need to make an extra request, and your font file will not grow substantially.

2. SVG

Some people think “Dammit, why aren’t we using SVG already?” To me, SVG is like a very nice, but not perfectly ripe, fruit. Here’s why:

  • You need a fallback for IE 8, and maybe previous Android (but fallbacks are easy)
  • It’s an extra request OR an un-cacheable inline graphic
  • SVGs saved out of Illustrator are generally much bigger than PNGs, and need special care — for example, refined bezier curves — to be decently optimized

Once you put the effort into making an SVG logo, you can do special things with it, like style and animate with CSS.

3. @font-face

You can also load the font that your logo was created in, and then display it as text. But it may not be that easy, or an option. Branding is very particular, and logos often have special kerning between pairs of letters, as well as custom glyphs and art. It’s not always feasible to reproduce some logos as text. I see that the css-tricks logo is simply text with a font applied, but that font is also used in the body — they get it for free.

(One last idea: I suppose we could combine #1 and #3 and include the specific letters that make up a logo as glyphs in an icon font. That seems messy and perhaps is trying too hard. Let’s NOT make that #4, but it’s an interesting idea.)

There you go. Exploring one of these options is a bit more work than adding an additional, higher-res PNG, but the reward is a very flexible resource: a single, ultra-crisp logo in any view.

Replace images with CSS gradients for striped backgrounds

One of the easiest and most effective ways of speeding up a web site is to replace background images with CSS3. Currently I’m exploring, and trying to have a very good understanding off, all the ways we can use CSS3 to create layouts instead of resorting to using images that create http requests and slow down pages, especially on mobile devices.

The site I happen to be working on has three different backgrounds with vertical stripes. Figuring out how to replace the images it currently uses with CSS is a big win, provided that the size of the CSS required to create these backgrounds is not prohibitively large. (Background images tile and can be very small files — it’s the http request for the image that is more expensive in terms of performance.) In the case of stripes, the CSS is small.

So how do we make striped backgrounds with CSS? The place I looked for and found the answer is Lea Verou’s CSS3 Patterns Gallery. This gallery blows my mind with the possibilities of how to use CSS3 gradients to make backgrounds. What I’m doing in this example is relatively very easy; the gallery includes plaid, hearts, checkerboards and many other cool patterns.

As far as I can tell, there is no easy way to copy the cross-browser CSS from the gallery. Therefore I’ll provide it here, and show you how to take thick gray lines and create other colors and widths.

Here’s Lea’s vertical stripes background and the code to create it:

.verticalStripes {	
	background-color: gray;
	background-size: 50px;
	background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
	background-image: -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
	background-image: -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);	
}

The backgrounds I need to re-create are blueish with very thin, subtle lines. Here’s a screenshot of one of the replaced backgrounds with the code.

.verticalStripes {	
	background-color: #99d0d4;
	background-size: 10px;
	background-image: -webkit-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 90%, rgba(255, 255, 255, 0.25) 50%);
	background-image: -ms-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
	background-image: -o-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);		
}

It’s easy to take these examples and create variations. Here we are taking one color, and putting a transparent sheet of another color on top, shifted X percent. In the blue stripes example, the total width of the repeating background is 10px and the part of it that is overlapped with transparent white is 10% or 1px. We could replace 90% with 9px if we wish, but using a percentage here may be more maintainable.

What if we want two different colors, not a color and a shade of the same color? We can just take our transparent sheet and put another color, not white, on top of it. Here I’ll make red and purple stripes using red as a base color and blue as the overlay.

.verticalStripes {	
	background-color: #ff3300;
	background-size: 50px;
	background-image: -webkit-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(0, 0, 255, 0.5) 50%);
	background-image: -ms-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
	background-image: -o-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);	
}

Easy!

As you can see this is very flexible. I’d challenge you to find a striped background that can’t be replaced with CSS. If you want red and green stripes, you might need to find another solution, like a background image. But if you want red and green stripes — the idea alone gives me a headache — you could be deliberately punishing your user anyway, and you might further torture them with a slow page.

File under: big wins.

A Nice Call to Action Button

We are replacing our large image buttons with markup. Yay! I think what our designer came up with is quite nice, and easy to build with CSS3, so I’m sharing it.

Sample Button

Here is the CSS:

.button2012 {
   border: 1px solid #c95d00;
   background: #fa962f;
   background: -webkit-gradient(linear, left top, left bottom, from(#fa962f), to(#ee7106));
   background: -webkit-linear-gradient(top, #fa962f, #ee7106);
   background: -moz-linear-gradient(top, #fa962f, #ee7106);
   background: -ms-linear-gradient(top, #fa962f, #ee7106);
   background: -o-linear-gradient(top, #fa962f, #ee7106);
   padding: 5px 20px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   text-shadow: rgba(20,20,20,.6) 0 1px 0;
   color: white;
   font-size: 18pt;
   font-weight: bold;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
}
.button2012:hover, .button2012:active {
   background: #ee7106;
}

You can make the button and the hover any color you want, of course, although A/B tests have shown that red buttons convert better.

The Difference Between Pseudo-Classes and Pseudo-Elements

A pseudo-class is a feature of an HTML element that can be styled but is not available via the document tree. Pseudo-classes are often used with the anchor tag: a:link, a:hover, a:visited, and a:active. Some pseudo-classes can accept values such as lang :lang pseudo-class: p:lang(fr), :lang(de).

Pseudo-elements are abstract sub-elements of an html document: ::first-letter and ::first-line are examples.

If you were an HTML element the state of your eyes being closed, open or squinting would be a pseudo-class, and your pinky toe would be a pseudo element. Go ahead and do this exercise yourself to sort pseudo-classes and pseudo-elements. 🙂 What would your grandmother be? (hint: “behind”)

Previously, pseudo-classes and pseudo-elements have looked exactly the same: element:pseudo-something. Which is kind of nasty considering the mental energy that goes into separating these ideas. But the Level 3 recommendation has improved the visual distinction. Pseudo-classes continue to use one colon, and pseudo-elements, going forward, use two.

Pseudo-elements with one colon will always be supported for existing pseudo-elements, but that’s not true for pseudo-elements that are introduced, so we aught to get in the habit of using two colons.

Burn the following selectors into your mind:

::after
::before
::first-letter
::first-line
::selection

and to contrast:

:target
:focus
:enabled
:disabled

Should we worry about browser support for the new syntax of pseudo-elements? Nah, progressive enhancement, Baby! It is indicated that earlier versions of Internet Explorer do not support two colons but I have confirmed that IE 8 supports all, with the exception of ::selection, perhaps. In this case I would use two colons and not try to write both in your style sheets.