Placing elements side by side into a layout is an everyday task in the life of a front end developer. Avoiding positioning the element absolutely, I need to choose between the floating way or, more interesting, the display: inline-block way.
I really love the latter technique, because it gives me the possibility to not mind about clearing the floats, neither with the clearfix hack, nor with the overflow: hidden rule.

The only drawback of this technique was the space created between elements: some 4 pixels gap very annoying. In a post on the sublime Css tricks blog, I found a very clever solution to fight this unwanted space: setting a font-size value of 0 to the parent element.

Let’s say we have a navigation menu, like this:

 <nav> 
 <ul> 
 <li><a>voice A</a></li> 
 <li><a>voice B</a></li>
 <li><a>voice C</a></li> 
 <li><a>voice D</a></li> 
 </ul> 
</nav> 

you’ll obtain your voices standing side by side. By giving the nav element a font-size of 0, you erase the gap, but you’ll need to set a proper font-size to the a elements, because they inherit the ancestor’s font-size. Any prob? Nope.

The problems rise when you’re in a responsive context: you give to the a elements a font-size value of 1em, because you want them to be proportional and not fixed. Well done, but the em measure is relative to the ancestor’s one, so 1 x 0 = 0. Ugly.

Wait a minute and don’t despair: there’s an awesome solution brought to you by a new CSS3 unit, the rem. Quoting from snook.ca:

The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

So, there you go: be free to set your font-size to 0 to avoid the gap between elements and use the rem to the a elements, especially if you’re in a mobile context, because IE prior to 9 don’t support it (but you can fall back to pixel measurement).

Super nice work from Carlo Poso: a powerful tool for wireframing, based on the 960 grid system and expand according to the golden ratio.

The website was hand-coded by myself.

Using @font-face is a normal practice nowadays: full browser support, lots of resources to find nice fonts and a marvelous tool like Font Squirrel’s font-face generator to make our life easier.

However, there’s always room for improvement. Sometimes, I’ve noticed a weird font rendering in -webkit based browsers, most of all in Safari, with its fattier font display strategy. With web-safe fonts, you’ll just see the fonts to be fattier and, sometimes, cause you some layout problem, if you were too pixel bound.

When using font-face fonts, especially at small font sizes, the problem becomes serious: your fonts are collapsing into fat, they seem to have been eaten by a rat or run into some other ugly adventure.

To prevent this, try adding this few lines of code to your CSS:

*{
    -webkit-font-smoothing:subpixel-antialiased;
    -webkit-text-stroke:1px transparent;
    text-shadow:rgba(0, 0, 0, .01) 0 0 1px
}

The text-shadow hack works most of all for Chrome; the -webkit-font-smoothing does not affect font-face’d fonts, but is very useful to thin the web safe fonts. The -webkit-text-stroke hack worked for Safari 4, so why not including it for retro compatibility issue?

I thought about this blog 2 years ago: my idea was to stuff it with graphic design, animation, illustration, web wonders and much more.

For these two years, this blog was empty. Meanwhile, I became a front end developer and had my life saved many times by blogs around the web, sharing knowledge and tricks. Everyday I have the enormous possibility to learn something new and, so, keep on being alive. I would try to use this blog as a store for the things I learn developing everyday and, maybe, help someone else.

Being involved in web design, I want to start this thing with a quote from one of my favourite writer, Italo Calvino. In “Lezioni americane” (“Six memos for the next millennium”) he speaks about exactitude and his words stand as a guide and reference for my work:

First I shall try to define my subject. To my mind exactitude means three things above all:

1. a well-defined and well-calculated plan for the work in question;
2. an evocation of clear, incisive, memorable visual images; in Italian we have an adjective that doesn’t exist in English, “icastico” […]
3. a language as precise as possible both in choice of words and in expression of the subtleties of thought and immagination

Italo Calvino, Six memos for the next millennium, Vintage books, London, 1996, p. 55 - 56.

It happens in almost every project to have to build an overlay to your page, where to display error messages, additional info or whatever: a modal window.

Usually, I write the layer directly in javascript, append it to the body element and show it on some click. That’s for the interaction. Visually, the layer occupies the whole page and has a half opaque background. Since it’s absolutely positioned, I was used to calculate document’s height and then assign it to the layer, to make it stretches till the bottom of the page.

This solution never got me so much, since it involves javascript for a mere reason of style, which should be left to CSS.

So, I ended up with a new solution: this one.

If you have a page structure like that (let’s assume that the #layer is already inserted into the DOM):

     <body> 
 <div id=”layout”>
 <a href=”#” id=”toclick”>click</a> 
 <p>Ideo complesset orationis </p> 
 </div> 
 <div id=”layer”></div> 
 </body> 

and then your CSS will be:

         body{position: relative} #layer{ display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5) } 

The interesting part is assigning a value of 0 to all the 4 positions, meaning the #layer will be stretched throughout the whole page, since its parent is the body itself of the page.

Then, you can fade it in and out with a touch of jquery.

P.S.: I was also experimenting a solution to fading in the layer using the :target pseudo-class, but I don’t know how to fade it out, because the fragment identifier remains in the url. If anyone has got any idea, let me know!