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:

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.

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.

Search

Se inscreva e receba oportunidades de trabalho em diferentes projetos

See my posts on Medium

Career

About

Alexandre Magno is a senior software engineer at Danske Bank. Web developer for 7 years, he is active in open source community, and a jQuery Evangelist, with strong experience in Ruby on Rails and Wordpress. He's already develop a lot of libraries widely used at Globo.com and was a core developer for making the websites work in mobiles with responsive design. He's active contributor of the Bootstrap framework and develop the Globo Bootstrap, the first translation of Bootstrap to Portuguese with open source components from Globo.com. See my open source projects at Github