A few CSS rounded tooltips

Some interesting tidbits I’ve been meaning to post. A couple weeks back I ran into a couple Dribbble posts that were looking at some ways to create the designs with CSS. Being that I was more interested myself to see what the outcomes would be for my own sake, I dove in trying to see if they could be done differently than anyone else had posted. 

Rounded Point Tooltip

The first was this design by Davy Kestens. The key to it was having the rounded point on the left hand side and also creating a seamless gradient from top to bottom also. I quickly threw out this fiddle - http://jsfiddle.net/T4Jg4/6/ which is basically using a rotated square as an :after element with gradients applied:

Seamless Border + Transparency

The second was a bigger task, creating this design by Jeff Broderick into as much CSS possible. Though the animations are there and lots of psuedo :after and :before elements (including the big shadow), I feel the biggest take away from this is the triangle with the continuous border and transparency seen here:

On the left is the photoshop mockup, the right is the in-browser snapshot (Safari 5).

As you can see it’s really close and as a whole, I believe it’s not as noticeable either. You can view the whole CSS in action here: http://grinnbarrett.net/stratus/

It comes with the same premise, a rotated square with gradients applied, but this time to make the border not come behind the transparency of the triangle(and even having the inner glow too), I made a gradient that is the same background gray from 47% to 53%. If you look really close you can recognize it, but for the most part I actually feel like I accomplished something that could be implemented for real designs in the future to stay away from a bloated PNG as a background. I didn’t spend as much time perfecting it, as there are some loose ends to tie up on it along with cross browser compatibility testing (though I tested across Chrome, Safari and Firefox). It still could be useful. Here’s a fiddle to dink around with if you want: http://jsfiddle.net/3arrett/cfdNS/1/