Marker Felt

Zapfino

American Typewriter

Arial rounded MT bold

the CSS

.marker  {font-family: "Marker felt";}
.zapfino {font-family: Zapfino;}
.type    {font-family: "American Typewriter";}
.arial   {font-family: "Arial rounded MT bold";}

test, screenshot

Here’s a test page and, if you’re not reading this from your iPhone or Mac, and these fonts are not on your system, here’s a screenshot.

name="search" or type="search"

When you tap an input box, the keyboard comes up. Right next to the [space] key there is a button that submits the form you’re currently filling out. This button by default says “Go”.

But when you set the name attribute of the input to have the value “search”, then the button says “Search”. Pretty neat.

Sometimes you may not be able to rename your input, because there are already too many dependencies on the backend. In this case you may use “search” as value of the type attribute. I don’t think this is a valid standards-compliant value for the type attribute, but… oh, well.

placeholder attribute

This attribute helps you present something like labels for the inputs but without taking page real estate, because they are displayed inside the input.

So if you add this to your input: placeholder="type here", the input will look like:

No corrections, please

You’ve noticed already the spell-checker when you fill-out forms (and probably have been at least once pissed off by the corrections). To turn it off simply set the autocorrect="off" attribute.

Same for capitalization. If you think your users don’t need auto-capitalization in this particular input (username input for example), set the attribute autocapitalize="off"

The End

At the end, this is what your code will look like if you implement all the tips.

<form><input type="text"
       name="search"
       autocorrect="off"
       autocapitalize="off"
       placeholder="type here"
 /></form>

And here’s a demo page.

Screenshot/demo

Here’s a screenshot.

And here you can see the demo.

The code

You put a semi-transparent PNG image, 1 pixel wide by any pixel high, as a background-image on the element you want to make shiny and then use your selected color as background-color. Simple as that.

.mybutton {
  background-image:url(mask.png);
  background-position: center;
  background-color: #4a6C9b;
}

Mask image

Now about the image that you use as background? It’s a 1×1000 image where the top 1×500 of it is about 80% transparent and the the bottom half is 100% transparent.

Why 1000 pixels? Too many? Well, I chose 1000 just to be on the safe side if the user resizes the font. The thing is that for this type of image 1000 or 100 doesn’t matter for the file size. In fact 1×10 image is 106 bytes and 1×1000 is 120 bytes.

I updated my script that generates the shiny glossy overlays for icons (see previous post) to generate the new type of image. The script can be called like this:
http://tools.w3clubs.com/mask/mask.php?type=h for a 1×100 image (default)
http://tools.w3clubs.com/mask/mask.php?type=h&x=1000 1×1000 image
http://tools.w3clubs.com/mask/mask.php?type=h&x=10 – 1×10 image

The code that generates the images is on github if you want to customize it.

Browser support

Since there’s nothing complicated in this technique it will work fine in Safari, Firefox and IE7,8. IE6 will show the semi-transparent PNG8 as fully transparent so your shiny element will degrade gracefully to a non-shiny one. For the rounded buttons, since I’m using border-radius, they will not be rounded in IE.

data: url

For performance purposes it’s best if you have less HTTP requests. So it makes sense to replace that minuscule 120 bytes image with a base64 data: url. That’s what I used for the demo, so just check the source to see how it looks like.

Thanks

And the demo page once again.

Demo

Here’s the end result.

Markup

Markup includes just the bare minimum.

<ul class="nav">
  <li class="first">
    <a href="#">yabba</a>
  </li>
  <li>
   <a href="#">dabba</a>
  </li>
  <li>
    <a href="#">doo</a>
  </li>
</ul>

It’s an unordered list with a class name “nav” (you can skip it and style the ul directly if all lists in your application are of the navigational type) and “first” for the first list item. You can also skip “first” and use the :first-child pseudo selector if you don’t care about browsers that don’t support :first-child (IE comes to mind)

Styles

First off, some shade of grey for background and sans-serif font:

body {
  background: #ddd;
  font-family: sans-serif;
}

Then, styling the whole list. We want rounded corners, so border-radius makes this a breeze. Also including Firefox’ (-moz-...) and Safari’s (-webkit-...) versions for better x-browser compatibility. No form of border-radius in IE, so IE users will see a sharp-edge box. Wrapping up this style with white background, border and no padding.

.nav {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: white;
  border: 1px solid #aaa;
  padding-left: 0;
}

Now styling the individual items in the navigation list. Removing the default list bullet with list-style: none and removing the default padding to the left of the list. Bold font and top border to separate each list item. This will result in two border lines for the first item (one from the item and one from the whole list), bit we’ll remove it in a sec.

.nav li {
  list-style: none;
  padding-left: 0;
  border-top: 1px solid #aaa;
  font-weight: bold;
}

OK, first list item – no border, you already have one.

li.first {
  border-top: 0;
}

Now the clickable nav links. Changing the default display of links to block, so that the whole list item (the whole row) is clickable (ok, touchable). Some padding to make bigger rows, dark shade of gray for link color and saying NO to the underline. Final touch – the arrow. It’s an image that we’ll use as a background and position in the middle on the right-hand side.

.nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  background: url(arrow.png) 
no-repeat right center;
}

That’s all folks!

Beautiful navigation lists with very little effort, simple semantic markup and only one image. Here’s the image if you need it (182 bytes).

Quick optimization update

Just thought that this little arrow.png is another HTTP request which is bad for performance, so you can replace this with a base64-encoded version of the icon and inline it in the CSS. Check view/source of the updated example.

You can make any image look like a rounded glossy icon by using:

• border-radius CSS property
• an alpha-transparent image overlay

For example:

Benefits:

• no image manipulation, just use existing images
• graceful degradation – IE7, 8 don’t support border radius, so they’ll display a glossy square image. IE6 has issues with PNG transparency, so I’m using a PNG8 file which IE sees as fully transparent. As a result IE6 will show the image unchanged.

But how does this work?

Using two divs:

<div class="the-image">
  <div class="the-mask">
  </div>
</div>

How are these styled then?

• both divs get the width/height of the image
• both divs get border-radius: 10px (and the same -moz-border-radius and -webkit-border-radius)
• the background of the outer div is the image
• the background of the inner div is the mask

To make it easy, I’ve created a script that can generate the overlay mask image with any dimension. The script can be used like this:

• mask.php will give you a 100×100 pixels image
• mask.php?x=57 will produce a 57×57 pixels image

Code and examples

• A page with examples can be found here. Load in any IE to see degraded experience or Safari/Mozilla/iPhone for the full experience
• The code for the script that generates the mask as well as the test page are on github

The PHP script that generates the mask is fairly well documented if you want to tweak. The gist of it really is using GD library to create a fully transparent square and a semi-transparent piece of an ellipse.

1. visiting your page
2. tapping the + icon
3. selecting “Add to Home Screen”

When this happens, the iPhone needs to figure out an icon to use for the home screen. It proceeds like this:

1. Is there a <link rel="apple-touch-icon" href="..."> tag in the head of your page? If so, the image referenced in the href attribute is used. If not?
2. Is there in the root of your web server a file called /apple-touch-icon.png. If so, it becomes the icon. If not?
3. A screenshot of your page is used (scrolled at whatever position it is scrolled at the moment).

In all of the cases, the icon is beautified for free by the use of a gloss and rounded corners. It’s also resized to fit the dimensions of an icon.

So what can you do to better represent your site on the user’s home? Well, just make sure you have a 57×57 pixel icon and then you:

• either put it in the root of the server, name it apple-touch-icon.png and forget it, or
• name it whetever you want and put it anywhere, including another server or a CDN (Content Delivery Network) for performance purposes. But make sure you refer to the image from your <link rel="apple-touch-icon".. tag

I see some sites do both – name the file apple-touch-icon.png, put it in the root and also add a link tag referring to the file. But that’s overdoing it a little.

If you don’t like the default rounded gloss the iPhone uses to beautify your icon and you think you can do better, you have the option to do so by using the filename
apple-touch-icon-precomposed.png

Some examples in the wild:

• Yahoo! front page
• Yahoo! search for the iPhone
• Facebook for iPhone
• WordPress
• Apple – they use a bigger 129×129 pixels icon for whatever reason, after all it’s their specs that say 57×57
]]> http://phonydev.com/apple-touch-icon/feed/ 3