Tooltips are a very common user interface element, I’ve used them in large number of my projects. Not to say all of my projects! In this article I’m going to make pure CSS tooltips without any JavaScript code. And with Sass mixins to make reusable and customizable components.

  • #a33438 rgb(163, 52, 56)
  • #638b97 rgb(99, 139, 151)
  • #deb48e rgb(222, 180, 142)
  • #34241d rgb(52, 36, 29)
  • #c84647 rgb(200, 70, 71)

A color theme I’ve created with the Adobe Kuler application on the iPhone. It takes a picture from the gallery or with the camera

With the recent 3.3 version of Sass a new data type is available, maps. A map is a data structure which associate a key to a value. It’s somewhat equivalent to JSON structures in JavaScript. And maps are a well-known data structure in functional programming.

The map data

In print design, a tint of a color is making it lighter by putting less ink, and a shade is mixing a color with black. Now with CSS preprocessors like Sass or Less we can easily compute color codes to reproduce these tints and shades. These two functions appear to

These days I’ve been using a lot the possibility to draw triangles and arrows with pure CSS. I use it for small user interface elements: breadcrumbs, previous pages and next pages buttons, tooltips… I’ve rewritten this article from my previous blog. My code samples were written in Less