First of all, it’s important to remember that this solution will not work in versions earlier than Internet Explorer 9, but will degrade gracefully, without losing any of their functionality.

First, you will need a simple unordered list:

1
2
3
4
5
6

<ul class="navigation">
    <li><a class="default" href="#"><span>link 1</span></a></li>
    <li><a  class="active" href="#"><span>link 2</span></a></li>
    <li><a class="default" href="#"><span>link 3</span></li>
    <li><a class="default" href="#"><span>link 4</span></a></li>
</ul>

<ul class="navigation">
    <li><a class="default" href="#"><span>link 1</span></a></li>
    <li><a  class="active" href="#"><span>link 2</span></a></li>
    <li><a class="default" href="#"><span>link 3</span></li>
    <li><a class="default" href="#"><span>link 4</span></a></li>
</ul>

This unordered list with a simple basic style and any checked item will be a different class called active and the others one with default.

The reason why there’s a span inside the links is just because we will use this extra markup to hide the text, keeping the semantic correct, but throught css we will hide the text inside span, and will make the link a square that applying a border-radius of 50% it will become a elegant ball, with a more fancier shadow and gradient. It’s possible to achieve this effect with no images:

This is the CSS Applied:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

.navigation li a span {
  display: none;
}
.navigation li a.default, .navigation li a.active {
  display: block;
  float: left;
  margin: 20px 10px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
 
.navigation li a.default {
  background-color: #CACACA;
  box-shadow: 3px 3px 1px 1px #b9b9b9 inset;
  -webkit-box-shadow: 3px 3px 1px 1px #b9b9b9 inset;
  -moz-box-shadow: 3px 3px 1px 1px #b9b9b9 inset;
}
 
.navigation li a.active {
  background: #85d945; /* Old browsers */
background: -moz-linear-gradient(top, #85d945 0%, #749f54 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85d945), color-stop(100%,#749f54)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #85d945 0%,#749f54 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #85d945 0%,#749f54 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #85d945 0%,#749f54 100%); /* IE10+ */
background: linear-gradient(top, #85d945 0%,#749f54 100%); /* W3C */
}
 
.navigation li a.default:hover {
  background-color: #B6B6B6;
  box-shadow: 3px 3px 1px 1px #B3B3B3 inset;
  -webkit-box-shadow: 3px 3px 1px 1px #B9B9B9 inset;
  -moz-box-shadow: 3px 3px 1px 1px #999 inset;
}

.navigation li a span {
  display: none;
}
.navigation li a.default, .navigation li a.active {
  display: block;
  float: left;
  margin: 20px 10px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.navigation li a.default {
  background-color: #CACACA;
  box-shadow: 3px 3px 1px 1px #b9b9b9 inset;
  -webkit-box-shadow: 3px 3px 1px 1px #b9b9b9 inset;
  -moz-box-shadow: 3px 3px 1px 1px #b9b9b9 inset;
}

.navigation li a.active {
  background: #85d945; /* Old browsers */
background: -moz-linear-gradient(top, #85d945 0%, #749f54 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85d945), color-stop(100%,#749f54)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #85d945 0%,#749f54 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #85d945 0%,#749f54 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #85d945 0%,#749f54 100%); /* IE10+ */
background: linear-gradient(top, #85d945 0%,#749f54 100%); /* W3C */
}

.navigation li a.default:hover {
  background-color: #B6B6B6;
  box-shadow: 3px 3px 1px 1px #B3B3B3 inset;
  -webkit-box-shadow: 3px 3px 1px 1px #B9B9B9 inset;
  -moz-box-shadow: 3px 3px 1px 1px #999 inset;
}

As we know, I’m using the firefox and webkit syntax for border radius, gradient, box shadow or any CSS3 feature, and, as usual, we still have to declare the W3C syntax waiting for someday they maybe use the default syntax officially.

There’s a lot of repeating code, make symple effects have to be declare even more than tree times to reflect the same result. This is bad, don’t you think?

A possible way to deal with this of a “abstract” way, is use LESS or Compass.

With Compass, for example, is possible to do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.navigation {
li a span {
  display: none;
}
li a.default, .navigation li a.active {
  display: block;
  float: left;
  margin: 20px 10px;
  width: 30px;
  height: 30px;
  @include border-radius(50%);
}
 
.navigation li a.default {
  background-color: #CACACA;
  @include box-shadow('3px 3px 1px 1px #b9b9b9 inset');
}
 li a.active {
  background: #85d945; /* Old browsers */
@include linear-gradient(top, #85d945 0%, #749f54 100%); /* FF3.6+ */
}
 
 li a.default:hover {
  background-color: #B6B6B6;
  @include box-shadow(3px 3px 1px 1px #B3B3B3 inset);
}
}

.navigation {
li a span {
  display: none;
}
li a.default, .navigation li a.active {
  display: block;
  float: left;
  margin: 20px 10px;
  width: 30px;
  height: 30px;
  @include border-radius(50%);
}

.navigation li a.default {
  background-color: #CACACA;
  @include box-shadow('3px 3px 1px 1px #b9b9b9 inset');
}
 li a.active {
  background: #85d945; /* Old browsers */
@include linear-gradient(top, #85d945 0%, #749f54 100%); /* FF3.6+ */
}

 li a.default:hover {
  background-color: #B6B6B6;
  @include box-shadow(3px 3px 1px 1px #B3B3B3 inset);
}
}

Much simple and cleaner, but is generate using Ruby with a defined syntax, but this way you can explore variables and mixins, there are ways to store color names for example and the second are functions, that you can make reusable CSS snippets, passing parameters, like functions). Well, compass and LESS are well documented and who knows the basic of programming can well follow the guidelines of the language. There different syntax styles.

If you have the following HTML / CSS:

It’s a fluid layout with a div fixed dimensions. The example above show the minimum requirements to positioning a element in viewport or relative to a parent div.

You just need two of the 4 valid positions to allocate a element on screen, they are top, left, bottom and right, so you just need top and right, top and left, bottom and top and bottom and left. With width and height you can specify the element dimensions as usual.

Declaring top, left, bottom and right with 50%

But if you declare top and bottom, or left and right? As explained in conflicting positions article, since IE7, they consider the two positions and the height is filled of the remaining space between two positions.

This mean that if you declare 20% of top, right, left and bottom you will have a behaviour like a border, with the width and height filling the content until the edge.

If you go extreme, and put two conflicting positions to 50% you will have:

So, if you declare the four rules for position with 50% the element will have one pixel, just because of the border. So, with this, if you declare less than 50% they will keep centered horizontally and vertically and the height and width will be guided by the remaining values of percentage. Width 42%, for example for top and bottom, the height will be 16% (8% twice) of the parent element or the viewport. You can see working below:

So, this way you can center fluid elements and they remaining with the same alignment proportions as you resize the viewport.

For me, even seens obvious, it’s a great way, cause I always used methods like negative margin and jQuery for center elements.

The support is still limited to Firefox, but it’s a great example how the new things at HTML5 gave us freedom to make a better user experience.

So let’s imagine that you have a simple html form with a input file, a related css and the following javascript explained.

With the new FileReader Class you can trigger a click at file input, and this way you can handle the file choose dialog after a user select a file. So you can bind a change event and handle the file chosen.

You can have a complete documentation at mozilla MDC page.

Important: If you want to use a normal link to trigger the dialog page, you should hide the input file, but not with display hidden, but with opacity: 0, because chrome don’t accept to trigger a event in a hidden file field.

What the main advantages to have the Bootstraping process at beginning of the project or use the twitter boostrap? It seens so obvious: make a pattern for all design elements growing in a scale that the layout definition step are decrease in effort to in a ideal world they don’t exist anymore, cause the front-end developer would guess with the architect the right user experience, because the library is strong enough to supply all features in the application. Use the twitter bootstrap the way it is to prototyping is something really usefull, cause is simple, clean, agnostic and with all the CSS3 features.

Other great advantage is to follow the same visual consistency across projects.

The bootstrap is organic, and according with new elements it’s growing and everything aims to go out to the limit. The minimum necessary to be bootstrap working:

• Grid elements
• Forms
• Typography
• Headers
• Lists
• Tables
• Buttons

How to show the importance of bootstraping your project

Sometimes is difficult you get negotiate this step. It just ignored or sometimes even started, but soon is discontinued and then abandoned. In this last case this is just a symptom of another wrong reason, probably there is no pattern and there’s always a difficult when need to define many pages e how a behavior should be in a some interaction, how form validations, for example.

Google Plus try to increase her popularity making one API, but the facebook api is another step further.

This battle is getting even more interesting, showing how a giant like Google are try to affront the no scale Facebook growing.